*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:        #0f1117;
      --surface:   #161b27;
      --border:    #1e2535;
      --accent:    #6366f1;
      --accent-lo: #1e1f3a;
      --text:      #e2e8f0;
      --muted:     #64748b;
      --green:     #22c55e;
      --yellow:    #eab308;
      --red:       #ef4444;
      --code-bg:   #0b0f18;
      --sidebar-w: 260px;
      --content-w: 780px;
    }

    html { scroll-behavior: smooth; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.7;
      display: flex;
      min-height: 100vh;
    }

    /* ── Sidebar ─────────────────────────────────────────────────── */
    nav {
      width: var(--sidebar-w);
      min-height: 100vh;
      background: var(--surface);
      border-right: 1px solid var(--border);
      position: sticky;
      top: 0;
      overflow-y: auto;
      padding: 28px 0;
      flex-shrink: 0;
    }
    nav .logo {
      padding: 0 20px 24px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 16px;
    }
    nav .logo .wordmark {
      display: inline-block;
      font-size: 18px;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -.3px;
      text-decoration: none;
    }
    nav .logo .wordmark span { color: var(--accent); }
    nav .logo .tagline {
      font-size: 11px;
      color: var(--muted);
      margin-top: 2px;
    }

    nav .section-label {
      padding: 10px 20px 4px;
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--muted);
    }
    nav a {
      display: block;
      padding: 6px 20px;
      color: var(--muted);
      text-decoration: none;
      font-size: 13.5px;
      border-left: 2px solid transparent;
      transition: color .15s, border-color .15s;
    }
    nav a:hover { color: var(--text); }
    nav a.active { color: var(--accent); border-color: var(--accent); background: var(--accent-lo); }

    /* ── Main ────────────────────────────────────────────────────── */
    main {
      flex: 1;
      max-width: calc(var(--content-w) + 80px);
      padding: 48px 40px 120px;
    }
    article { max-width: var(--content-w); }

    h1 { font-size: 32px; font-weight: 800; line-height: 1.2; margin-bottom: 12px; }
    h1 .sub { display: block; font-size: 18px; font-weight: 400; color: var(--muted); margin-top: 6px; }
    h2 {
      font-size: 22px; font-weight: 700; margin-top: 56px; margin-bottom: 16px;
      padding-top: 20px; border-top: 1px solid var(--border);
    }
    h2:first-of-type { margin-top: 36px; border-top: none; }
    h3 { font-size: 15px; font-weight: 600; margin-top: 28px; margin-bottom: 10px; color: var(--text); }
    h4 { font-size: 13px; font-weight: 600; margin-top: 16px; margin-bottom: 6px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
    p  { margin-bottom: 14px; font-size: 15px; color: #c8d3e0; }
    ul, ol { padding-left: 20px; margin-bottom: 14px; font-size: 15px; color: #c8d3e0; }
    li { margin-bottom: 4px; }
    a  { color: var(--accent); text-decoration: none; }
    a:hover { text-decoration: underline; }
    strong { color: var(--text); }

    /* ── Code ─────────────────────────────────────────────────────── */
    code {
      font-family: "SF Mono", "Fira Code", "Cascadia Code", Menlo, monospace;
      font-size: 13px;
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 1px 5px;
      color: #a5b4fc;
    }
    pre {
      background: var(--code-bg);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 18px 20px;
      overflow-x: auto;
      margin: 14px 0;
      position: relative;
    }
    pre code {
      background: none;
      border: none;
      padding: 0;
      font-size: 13px;
      color: #c8d3e0;
      line-height: 1.6;
    }
    /* Shell prompt lines */
    .sh { color: #94a3b8; }
    .sh .cmd { color: #6ee7b7; }
    .sh .flag { color: #93c5fd; }
    .sh .str  { color: #fcd34d; }
    .sh .cmt  { color: #475569; font-style: italic; }
    /* TOML syntax */
    .toml .key    { color: #93c5fd; }
    .toml .val    { color: #fcd34d; }
    .toml .str    { color: #86efac; }
    .toml .hdr    { color: #c084fc; }
    .toml .cmt    { color: #475569; font-style: italic; }

    /* Python / Rust syntax (applied by the highlighter JS to .py / .rust code) */
    .hl-kw  { color: #c084fc; }                        /* keyword */
    .hl-str { color: #fcd34d; }                        /* string  */
    .hl-cmt { color: #475569; font-style: italic; }    /* comment */
    .hl-fn  { color: #6ee7b7; }                        /* call / def name */
    .hl-ty  { color: #93c5fd; }                        /* type (capitalized) */
    .hl-num { color: #fca5a5; }                        /* number  */
    .hl-at  { color: #f0abfc; }                        /* @decorator / #[attr] / macro! / lifetime */

    /* Non-scrolling wrapper (added around each <pre> by JS) so the copy button
       is positioned against it, staying pinned to the top-right instead of
       scrolling away with a wide <pre>'s horizontal overflow. The <pre> keeps
       its own margin; the wrapper is just a positioning context. */
    .code-wrap { position: relative; }

    /* copy button */
    .copy-btn {
      position: absolute;
      top: 10px; right: 10px;
      background: var(--border);
      border: 1px solid #2a3348;
      color: var(--muted);
      border-radius: 4px;
      padding: 3px 9px;
      font-size: 11px;
      cursor: pointer;
      transition: background .15s, color .15s;
    }
    .copy-btn:hover { background: var(--accent); color: #fff; }

    /* ── Callouts ─────────────────────────────────────────────────── */
    .callout {
      border-left: 3px solid;
      padding: 12px 16px;
      border-radius: 0 6px 6px 0;
      margin: 16px 0;
      font-size: 14px;
    }
    .callout.info   { border-color: var(--accent); background: var(--accent-lo); color: #a5b4fc; }
    .callout.tip    { border-color: var(--green);  background: #0b1f13; color: #86efac; }
    .callout.warn   { border-color: var(--yellow); background: #1c1600; color: #fde68a; }
    .callout strong { color: inherit; }

    /* ── Tabs ─────────────────────────────────────────────────────── */
    .tabs { margin: 20px 0; }
    .tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
    .tab-btn {
      padding: 7px 16px;
      background: none;
      border: none;
      border-bottom: 2px solid transparent;
      color: var(--muted);
      font-size: 13px;
      font-family: inherit;
      cursor: pointer;
      margin-bottom: -1px;
      transition: color .15s, border-color .15s;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    /* ── Step list ───────────────────────────────────────────────── */
    /* Only DIRECT children of .steps are numbered steps — `> li` (not a
       descendant selector), so a nested <ul> inside a step (e.g. the webhook
       field list) renders as a normal bulleted list rather than picking up the
       step counter and flex/badge layout. */
    .steps { counter-reset: step; list-style: none; padding: 0; margin: 16px 0; }
    .steps > li {
      counter-increment: step;
      display: flex; gap: 14px; margin-bottom: 16px; align-items: flex-start;
    }
    .steps > li::before {
      content: counter(step);
      min-width: 24px; height: 24px;
      background: var(--accent-lo);
      color: var(--accent);
      border: 1px solid var(--accent);
      border-radius: 50%;
      font-size: 11px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      margin-top: 2px;
    }
    /* min-width:0 lets the flex child shrink below its content width, so a wide
       <pre> (e.g. the KMS ARN line) scrolls within its own overflow-x:auto box
       instead of stretching the whole step past the column. */
    .steps > li > div { flex: 1; min-width: 0; }
    /* Nested lists inside a step: normal bulleted list, sitting inside the
       content column (not overflowing it). Long unbreakable tokens (the webhook
       URL) break rather than push the column wider. */
    .steps > li ul { margin: 8px 0 0; padding-left: 20px; }
    .steps > li ul li { list-style: disc; overflow-wrap: anywhere; }

    /* ── Badge ────────────────────────────────────────────────────── */
    .badge {
      display: inline-block;
      padding: 1px 7px;
      border-radius: 20px;
      font-size: 11px; font-weight: 600;
      vertical-align: middle;
    }
    .badge.ec2    { background: #1a2540; color: #60a5fa; }
    .badge.lambda { background: #1a1a2e; color: #c084fc; }
    .badge.s3     { background: #1a1f10; color: #86efac; }
    .badge.rust   { background: #2a1a0e; color: #fb923c; }
    .badge.python { background: #0e1a1a; color: #34d399; }
    .badge.static { background: #161625; color: #818cf8; }

    /* ── Output block ─────────────────────────────────────────────── */
    .output {
      background: #080c14;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 20px;
      font-family: "SF Mono", Menlo, monospace;
      font-size: 12.5px;
      line-height: 1.7;
      color: #94a3b8;
      margin: 14px 0;
    }
    .output .ok   { color: var(--green); }
    .output .dim  { color: #475569; }
    .output .bold { color: var(--text); font-weight: 600; }
    /* Command keywords in help output — green + bold, matching the real CLI. */
    .output .cmd  { color: #6ee7b7; font-weight: 600; }

    /* ── Pill list ────────────────────────────────────────────────── */
    .pill-list { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
    .pill {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 3px 12px;
      font-size: 13px;
      color: var(--muted);
    }

    /* ── Grid cards ───────────────────────────────────────────────── */
    .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
    .card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
      font-size: 14px;
    }
    .card .card-title { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
    .card .card-desc  { color: var(--muted); font-size: 13px; }

    /* ── Section anchors ──────────────────────────────────────────── */
    section { scroll-margin-top: 20px; }

    /* ── Responsive ───────────────────────────────────────────────── */
    @media (max-width: 860px) {
      body { flex-direction: column; }
      nav  { width: 100%; min-height: auto; position: static; }
      main { padding: 24px 20px 80px; }
      .cards { grid-template-columns: 1fr; }
    }