:root {
      --paper:      #EDF1F6;
      --paper-deep: #E2E8F0;
      --card:       #FBFCFD;
      --ink:        #16202C;
      --ink-soft:   #4A5A6B;
      --ink-faint:  #7B8A9A;
      --rule:       #C6D0DC;
      --rule-soft:  #DFE5EC;
      --blue:       #0B5E8A;
      --blue-wash:  #E3EDF4;
      --green:      #1B7A4B;
      --code-bg:    #16202C;
      --code-text:  #DCE4EC;

      --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
      --sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --gutter: clamp(1.25rem, 5vw, 4rem);
    }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html {
      -webkit-text-size-adjust: 100%;
      max-width: 100%;
      overflow-x: hidden;
    }
  body {
      font-family: var(--sans);
      background-color: var(--paper);
      background-image:
        linear-gradient(var(--rule-soft) 1px, transparent 1px),
        linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
      background-size: 32px 32px;
      color: var(--ink);
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
      max-width: 100%;
      overflow-x: hidden;
    }
  .wrap {
      max-width: 1080px;
      margin: 0 auto;
      padding: 0 var(--gutter) 4rem;
    }


  .skip {
    position: absolute;
    left: -9999px;
    background: var(--ink);
    color: var(--paper);
    padding: .6rem 1rem;
    font-family: var(--mono);
    font-size: 12px;
  }
  .skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: 100;
  }

  /* Portfolio-standard masthead */
  .masthead {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      gap: 1rem;
      flex-wrap: wrap;
      padding: 1.75rem 0 1rem;
      border-bottom: 1px solid var(--ink);
    }
  .masthead-name {
      font-family: var(--mono);
      font-size: clamp(15px, 2vw, 17px);
      font-weight: 600;
      letter-spacing: 0.14em;
      text-transform: uppercase;
    }
  .masthead-role {
      font-size: 13px;
      color: var(--ink-soft);
      margin-top: 2px;
    }
  .masthead-links {
      display: flex;
      gap: 1.25rem;
      font-family: var(--mono);
      font-size: 12px;
      letter-spacing: 0.04em;
    }
  .masthead-links a {
      text-decoration: none;
      color: var(--ink-soft);
      padding-bottom: 2px;
      border-bottom: 1px solid var(--rule);
      transition: color .15s, border-color .15s;
    }
  .masthead-links a:hover,
  .masthead-links a:focus-visible {
      color: var(--blue);
      border-color: var(--blue);
    }

  .demo-main { padding-top: 1.5rem; }
  .cols { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 20px; align-items: start; }
  @media (max-width: 820px) { .cols { grid-template-columns: 1fr; } }
  .card { background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--ink); border-radius: 0; padding: 20px; min-width: 0; }
  .label { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); margin-bottom: 12px; }

  label { display: block; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin: 14px 0 5px; }
  input, textarea {
    width: 100%; font-family: var(--sans); font-size: 14px; padding: 9px 11px;
    border: 1px solid var(--rule); border-radius: 0; background: #fff; color: var(--ink); outline: none;
  }
  input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--blue); outline: 2px solid color-mix(in srgb, var(--blue) 18%, transparent); outline-offset: 1px; }
  textarea { resize: vertical; min-height: 68px; }
  .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  button {
    font: inherit;
  }
  .submit-button {
    width: 100%;
    margin-top: 16px;
    padding: 11px;
    border: 0;
    border-radius: 0;
    background: var(--blue);
    color: #fff;
    cursor: pointer;
    font-family: var(--mono);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .submit-button:hover { background: #1D4FD8; }
  .submit-button:disabled { opacity: .5; cursor: not-allowed; }
  .note { font-size: 11px; color: var(--ink-faint); margin-top: 10px; line-height: 1.45; }
  .status { font-size: 13px; margin-top: 10px; min-height: 18px; }
  .status.ok { color: var(--green); font-weight: 600; }
  .status.err { color: #B91C1C; font-weight: 600; }

  .inbox-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
  .empty { padding: 2.5rem 1rem; text-align: center; color: var(--ink-faint); font-size: 14px; }

  .lead { border: 1px solid var(--rule); border-radius: 0; margin-bottom: 12px; overflow: hidden; min-width: 0; }
  .lead-head { padding: 10px 14px; background: var(--blue-wash); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
  .lead-title { font-weight: 700; font-size: 14px; }
  .lead-meta { font-size: 11px; color: var(--ink-faint); }
  .lead-body { padding: 14px; min-width: 0; }

  .step { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); margin: 0 0 6px; }
  .step + .step { margin-top: 16px; }

  .trace { display: flex; flex-wrap: wrap; gap: 6px; }
  .chip { font-family: var(--mono); font-size: 11px; padding: 3px 8px; border-radius: 20px; background: var(--rule-soft); color: var(--ink); }
  .chip .arrow { color: var(--blue); margin: 0 4px; }

  pre {
    background: var(--code-bg); color: var(--code-text); border-radius: 0;
    padding: 12px 14px; overflow-x: auto; font-family: var(--mono);
    font-size: 12px; line-height: 1.5;
    white-space: pre-wrap; word-break: break-word; max-width: 100%;
  }

  .tabs { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
  .tab { width: auto; margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; padding: 5px 11px; border-radius: 20px; border: 1px solid var(--rule); background: #fff; color: var(--ink-faint); cursor: pointer; }
  .tab.active { border-color: var(--blue); color: var(--blue); background: var(--blue-wash); }

  .premise {
    border: 1px solid var(--rule); border-left: 3px solid var(--blue);
    background: var(--blue-wash); padding: 13px 16px; margin: 0 0 1.5rem;
  }
  .premise-q { font-weight: 700; font-size: 14.5px; margin-bottom: 5px; }
  .premise p { font-size: 13px; color: var(--ink-soft); margin: 0; max-width: 78ch; }

  /* scenario picker */
  select {
    width: 100%; font-family: var(--sans); font-size: 14px; padding: 9px 11px;
    border: 1px solid var(--rule); border-radius: 0; background: #fff; color: var(--ink); outline: none;
  }
  .scenario-blurb {
    font-size: 12px; color: var(--ink-soft); margin-top: 8px; line-height: 1.5;
    min-height: 46px; padding: 8px 10px; background: var(--paper); border-left: 2px solid var(--rule);
  }
  .picker-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 5px; }
  .picker-head .label { margin: 0; }
  .picker-head-spaced { margin-top: 14px; }
  .label-flush { margin: 0; }
  .note-compact { margin: 0 0 10px; }
  .step-num {
    font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em;
    background: var(--ink); color: var(--card); padding: 2px 6px;
  }
  .divider { border: 0; border-top: 1px solid var(--rule-soft); margin: 18px 0 4px; }

  /* delivery results */
  .delivery { display: grid; gap: 8px; }
  .adapter { border: 1px solid var(--rule); border-left: 3px solid var(--rule); background: #fff; }
  .adapter.delivered { border-left-color: var(--green); }
  .adapter.partial   { border-left-color: #A8690B; }
  .adapter.failed,
  .adapter.dead_letter { border-left-color: #B91C1C; }
  .adapter-head {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    margin: 0; padding: 8px 11px; cursor: pointer; background: none; border: 0; width: 100%; text-align: left;
    font-family: var(--sans); color: var(--ink);
  }
  .adapter-head:hover { background: var(--paper); }
  .adapter-name { font-weight: 600; font-size: 13px; }
  .pill {
    font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 20px; white-space: nowrap;
  }
  .pill.delivered   { background: #E4F1EA; color: var(--green); }
  .pill.partial     { background: #F7EEDF; color: #8A5710; }
  .pill.failed,
  .pill.dead_letter { background: #F7E7E6; color: #B91C1C; }
  .adapter-reason { font-size: 11.5px; color: var(--ink-soft); margin-left: auto; }
  .caret { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }

  .timeline { padding: 4px 11px 11px; border-top: 1px solid var(--rule-soft); }
  .tl-row { display: grid; grid-template-columns: 3.4rem 1fr; gap: 8px; padding: 5px 0; font-size: 12px; border-bottom: 1px solid var(--rule-soft); }
  .tl-row:last-child { border-bottom: 0; }
  .tl-at { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); }
  .tl-what b { font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
  .tl-what.request b { color: var(--blue); }
  .tl-what.backoff b, .tl-what.refresh b, .tl-what.verify b { color: #8A5710; }
  .tl-what.ok b { color: var(--green); }
  .tl-what.fail b, .tl-what.exhausted b, .tl-what.warn b { color: #B91C1C; }
  .tl-note { color: var(--ink-soft); }

  /* collapsed payload build */
  .build { margin-top: 16px; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
  .build summary {
    cursor: pointer; font-family: var(--mono); font-size: 11px; font-weight: 500;
    letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); list-style: none;
  }
  .build summary::-webkit-details-marker { display: none; }
  .build summary::before { content: '\25B8'; margin-right: 6px; display: inline-block; }
  .build[open] summary::before { content: '\25BE'; }
  .build summary:hover { color: var(--blue); }
  .build-body { padding-top: 4px; }
  .build .step:first-child { margin-top: 10px; }

  /* dead letter queue */
  .dlq { margin-top: 20px; }
  .dlq-item {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    border: 1px solid var(--rule); border-left: 3px solid #B91C1C;
    padding: 9px 11px; margin-bottom: 8px; background: #fff; font-size: 13px;
  }
  .dlq-reason { font-size: 11.5px; color: var(--ink-soft); }
  .replay {
    margin: 0 0 0 auto; width: auto; padding: 6px 12px; font-size: 11px;
    background: var(--ink); color: #fff;
  }
  .replay:hover { background: var(--blue); }

  footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 12px; color: var(--ink-faint); }
  :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

  @media (max-width: 520px) {
    .masthead {
      align-items: flex-start;
    }

    .masthead-links {
      width: 100%;
      gap: 1rem;
      flex-wrap: wrap;
    }

    .masthead-role {
      max-width: 34ch;
    }

    .demo-main {
      padding-top: 1.25rem;
    }

    .card {
      padding: 16px;
    }

    .adapter-reason {
      width: 100%;
      margin-left: 0;
    }
  }

  @media (max-width: 420px) {
    .row2 {
      grid-template-columns: 1fr;
      gap: 0;
    }

    .tl-row {
      grid-template-columns: 3rem minmax(0, 1fr);
    }

    .premise {
      padding: 12px 14px;
    }
  }

  @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }