.webhook-testing-page {
  --wt-night: #061b2b;
  --wt-night-raised: #0a2a41;
  --wt-night-edge: #1e4965;
  --wt-ice: #f4f8fc;
  --wt-paper: #ffffff;
  --wt-ink: #10273b;
  --wt-muted: #506579;
  --wt-muted-on-night: #bfd0de;
  --wt-blue: #096bca;
  --wt-blue-bright: #48a4ff;
  --wt-line: #d7e2ec;
  color: var(--wt-ink);
}

.webhook-testing-page *,
.webhook-testing-page *::before,
.webhook-testing-page *::after { box-sizing: border-box; }

.wt-shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.wt-hero { position: relative; overflow: hidden; background: var(--wt-night); color: #f1f8ff; }
.wt-hero::before { position: absolute; inset: 0; content: ""; pointer-events: none; opacity: .46; background-image: linear-gradient(rgba(93, 167, 222, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 167, 222, .08) 1px, transparent 1px); background-size: 44px 44px; mask-image: linear-gradient(90deg, transparent, #000 35%, #000); }
.wt-hero__layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: clamp(40px, 4vw, 64px); min-height: 480px; padding-block: 72px 78px; }
.wt-kicker { margin: 0 0 18px; color: #75bdff; font-size: .73rem; font-weight: 750; letter-spacing: .19em; line-height: 1.4; text-transform: uppercase; }
.wt-hero h1 { max-width: 620px; margin: 0; color: #f7fbff; font-size: clamp(3.2rem, 6.2vw, 5.8rem); font-weight: 720; letter-spacing: -.055em; line-height: .98; }
.wt-hero__lead { max-width: 560px; margin: 24px 0 0; color: #ccdae6; font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.6; }
.wt-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 32px; }
.wt-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 16px; padding: 12px 19px; border: 1px solid var(--wt-blue); border-radius: 5px; background: var(--wt-blue); color: #fff; font-size: .96rem; font-weight: 680; line-height: 1.25; text-decoration: none; transition: background-color .16s ease, border-color .16s ease, transform .16s ease; }
.webhook-testing-page .wt-button { color: #fff; }
.wt-button:hover { transform: translateY(-1px); border-color: #48a4ff; background: #075bac; }
.wt-button:focus-visible, .wt-inline-link:focus-visible, .wt-path-card a:focus-visible { outline: 3px solid #91caff; outline-offset: 4px; }
.wt-inline-link { color: #8dcaff; font-weight: 650; text-underline-offset: 5px; }
.wt-inline-link:hover { color: #fff; }
.wt-hero__note { max-width: 490px; margin: 26px 0 0; color: #9db5c8; font-size: .92rem; line-height: 1.6; }
.wt-journey { min-width: 0; margin: 0; padding: clamp(20px, 3vw, 34px); border: 1px solid var(--wt-night-edge); border-radius: 9px; background: linear-gradient(145deg, rgba(18, 55, 82, .82), rgba(7, 29, 45, .92)); box-shadow: inset 0 1px rgba(255,255,255,.035); }
.wt-journey__sample { max-width: 390px; padding: 16px 18px; border: 1px solid #315a76; border-radius: 6px; background: #071b2b; }
.wt-sample__head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 13px; color: #9bb8ce; font-size: .67rem; font-weight: 700; letter-spacing: .14em; }
.wt-sample__head code { padding: 4px 7px; border: 1px solid #3b8eda; border-radius: 4px; color: #86c6ff; font-size: .74rem; letter-spacing: .02em; }
.wt-journey__sample > strong { color: #edf7ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .95rem; }
.wt-journey pre, .wt-response pre { overflow-x: auto; margin: 14px 0 0; padding: 12px 14px; border: 1px solid #1a3e58; border-radius: 4px; background: #081725; color: #b9d8ef; font-size: .84rem; line-height: 1.65; white-space: pre; }
.wt-journey__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin: 28px 0 0; padding: 0; list-style: none; }
.wt-journey__steps li { position: relative; display: flex; min-width: 0; gap: 11px; align-items: flex-start; }
.wt-journey__steps li:not(:last-child)::after { position: absolute; top: 13px; left: calc(100% - 2px); width: 18px; height: 1px; background: #3b87c6; content: ""; }
.wt-journey__number { display: grid; width: 27px; height: 27px; flex: 0 0 27px; place-items: center; border: 1px solid #348fe1; border-radius: 50%; color: #9dd1ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .66rem; }
.wt-journey__steps strong, .wt-journey__steps small, .wt-journey__steps b { display: block; }
.wt-journey__steps strong { color: #f2f8fd; font-size: .9rem; }
.wt-journey__steps small { margin-top: 5px; color: #b1c5d6; font-size: .73rem; line-height: 1.4; }
.wt-journey__steps b { margin-top: 7px; color: #7fc3ff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-weight: 650; }
.wt-journey figcaption { margin-top: 22px; color: #9db5c8; font-size: .76rem; line-height: 1.5; }

.wt-section { padding-block: clamp(64px, 8vw, 104px); }
.wt-paths { background: var(--wt-ice); }
.wt-section__heading { max-width: 700px; }
.wt-section__heading .wt-kicker { color: #216fb4; }
.wt-section__heading h2, .wt-mock h2, .wt-final h2 { margin: 0; color: var(--wt-ink); font-size: clamp(2rem, 4vw, 3.45rem); font-weight: 710; letter-spacing: -.04em; line-height: 1.08; }
.wt-section__heading > p:not(.wt-kicker) { max-width: 580px; margin: 18px 0 0; color: var(--wt-muted); font-size: 1rem; line-height: 1.65; }
.wt-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; }
.wt-path-card { display: flex; min-height: 242px; flex-direction: column; align-items: flex-start; padding: 26px; border-top: 2px solid #4099e8; background: var(--wt-paper); }
.wt-path-card__number { color: #1c83dc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; font-weight: 720; letter-spacing: .12em; }
.wt-path-card h3 { margin: 24px 0 0; color: var(--wt-ink); font-size: 1.3rem; letter-spacing: -.02em; }
.wt-path-card p { margin: 12px 0 22px; color: var(--wt-muted); line-height: 1.6; }
.wt-path-card a { margin-top: auto; color: #126ebc; font-weight: 700; text-underline-offset: 4px; }

.wt-guide { background: var(--wt-paper); }
.wt-guide__layout, .wt-evidence__layout, .wt-faq__layout { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: clamp(38px, 8vw, 104px); }
.wt-guide-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.wt-guide-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; padding: 0 0 28px; }
.wt-guide-list li + li { padding-top: 24px; border-top: 1px solid var(--wt-line); }
.wt-guide-list__number { color: #1684ef; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.12rem; font-weight: 760; }
.wt-guide-list h3 { margin: 0; color: var(--wt-ink); font-size: 1.2rem; }
.wt-guide-list p { margin: 9px 0 0; color: var(--wt-muted); line-height: 1.65; }

.wt-mock { padding-block: clamp(60px, 7vw, 90px); background: var(--wt-night); color: #eaf5ff; }
.wt-mock__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .88fr); gap: clamp(38px, 8vw, 110px); align-items: center; }
.wt-mock .wt-kicker { color: #75bdff; }
.wt-mock h2 { max-width: 520px; color: #f3f9ff; }
.wt-mock__copy > p:not(.wt-kicker) { max-width: 610px; margin: 19px 0 0; color: #bfd0de; line-height: 1.65; }
.wt-mock__copy .wt-mock__limit { margin-top: 13px; color: #91aabd; font-size: .88rem; }
.webhook-testing-page .wt-button--outline { margin-top: 24px; border-color: #4a8fbd; background: transparent; color: #e9f5ff; }
.wt-button--outline:hover { border-color: #8acaff; background: rgba(50, 133, 197, .15); }
.wt-response { padding: 20px; border: 1px solid #294d67; border-radius: 7px; background: #0b263a; }
.wt-response__tabs { display: flex; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid #294d67; color: #a9c2d5; font-size: .86rem; }
.wt-response__tabs span:first-child { color: #80c2ff; }
.wt-response__status { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 18px; color: #b2c6d7; font-size: .82rem; }
.wt-response__status code { color: #9bd0ff; font-size: .78rem; }
.wt-response pre { border-color: #264d69; background: #061b2b; color: #c4e1f6; }
.wt-response > p { margin: 14px 0 0; color: #96adbf; font-size: .75rem; line-height: 1.5; }

.wt-evidence { background: var(--wt-ice); }
.wt-evidence__details { min-width: 0; }
.wt-evidence-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.wt-evidence-list li { position: relative; padding: 0 0 20px 24px; color: #344b5f; line-height: 1.65; }
.wt-evidence-list li + li { padding-top: 18px; border-top: 1px solid var(--wt-line); }
.wt-evidence-list li::before { position: absolute; top: .45em; left: 0; width: 8px; height: 8px; border: 2px solid #2587d9; border-radius: 50%; content: ""; }
.wt-related-links { display: flex; flex-wrap: wrap; gap: 10px 22px; padding-top: 10px; }
.wt-related-links a { color: #155a91; font-size: .91rem; font-weight: 700; text-underline-offset: 4px; }
.wt-related-links a:focus-visible { outline: 3px solid #1677c8; outline-offset: 4px; }
.wt-faq { background: var(--wt-paper); }
.wt-faq-list { display: grid; gap: 0; }
.wt-faq-item { padding: 0 0 23px; }
.wt-faq-item + .wt-faq-item { padding-top: 21px; border-top: 1px solid var(--wt-line); }
.wt-faq-item h3 { margin: 0; color: var(--wt-ink); font-size: 1.08rem; line-height: 1.4; }
.wt-faq-item p { margin: 9px 0 0; color: var(--wt-muted); line-height: 1.65; }
.wt-final { padding-block: clamp(52px, 7vw, 82px); background: #eaf3fb; }
.wt-final__inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; }
.wt-final .wt-kicker { color: #216fb4; }
.wt-final h2 { max-width: 690px; }
.wt-final__inner > div > p:last-child { max-width: 600px; margin: 14px 0 0; color: var(--wt-muted); line-height: 1.6; }
.wt-final .wt-button { flex: 0 0 auto; }

@media (max-width: 900px) {
  .wt-hero__layout { grid-template-columns: minmax(0, 1fr); gap: 38px; padding-block: 60px; }
  .wt-journey { max-width: 700px; }
  .wt-path-grid { gap: 12px; }
  .wt-path-card { padding: 22px; }
}

@media (max-width: 680px) {
  .wt-shell { width: min(100% - 36px, 540px); }
  .wt-hero__layout { min-height: 0; padding-block: 48px 54px; }
  .wt-hero h1 { max-width: 440px; font-size: clamp(2.85rem, 14vw, 4.2rem); }
  .wt-hero__lead { margin-top: 18px; font-size: 1rem; }
  .wt-actions { align-items: flex-start; flex-direction: column; gap: 17px; margin-top: 25px; }
  .wt-journey { padding: 16px; }
  .wt-journey__steps { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .wt-journey__steps li { align-items: center; }
  .wt-journey__steps li:not(:last-child)::after { top: 27px; left: 13px; width: 1px; height: 13px; }
  .wt-journey__steps small { margin-top: 2px; }
  .wt-journey__steps b { display: inline-block; margin: 4px 0 0 6px; }
  .wt-path-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
  .wt-path-card { min-height: 0; padding: 22px; }
  .wt-path-card h3 { margin-top: 16px; }
  .wt-guide__layout, .wt-evidence__layout, .wt-faq__layout, .wt-mock__layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .wt-section { padding-block: 56px; }
  .wt-guide-list li { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; }
  .wt-mock { padding-block: 56px; }
  .wt-final__inner { align-items: flex-start; flex-direction: column; }
  .wt-final .wt-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .webhook-testing-page *, .webhook-testing-page *::before, .webhook-testing-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}