:root {
      --bg: #0b0f17;
      --panel: #111826;
      --panel-2: #0d1524;
      --text: #e6eef7;
      --muted: #9db1c7;
      --acc: #67b0ff;
      --acc2: #ff9f43;
      --border: #22324a;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
    }

    header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: rgba(11, 15, 23, .9);
      border-bottom: 1px solid var(--border);
      backdrop-filter: blur(6px);
    }

     .wrap.header-flex {
      max-width: none;
      margin: 0;
      padding-left: 2%;
      padding-right: 24px;
    }

    .wrap {
      max-width: 1200px;
      margin: 0 auto;
      padding: 7px 24px;
    }

    .header-flex {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .header-logo {
      height: 36px;
      width: auto;
      display: block;
      opacity: 0.95;
    }

    .header-flex {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .header-left {
      display: flex;
      align-items: center;
    }

    .header-logo {
      height: 36px;
      width: auto;
      display: block;
      opacity: 0.95;
    }

    h1,
    h2,
    h3 {
      margin: 16px 0;
      line-height: 1.2;
    }

    h1 {
      font-size: 28px;
    }

    h2 {
      font-size: 22px;
      margin-top: 28px;
    }

    h3 {
      font-size: 18px;
      margin-top: 22px;
    }

    p {
      color: var(--muted);
    }

    .container {
      max-width: 1100px;
      margin: 0 auto;
      padding: 18px 24px;
    }

    .pill {
      display: inline-block;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
    }

    section {
      background: var(--panel);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 20px;
      margin: 14px 0;
      scroll-margin-top: 98px;
    }

    pre {
      background: #0c1320;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
      overflow: auto;
      margin: 10px 0;
    }

    code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 13px;
      color: #dfe9f7;
    }

    .callout {
      background: #0f1a2d;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 14px;
      color: var(--muted);
    }

    .btn {
      display: inline-block;
      padding: 8px 12px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: #0f1a2d;
      color: var(--text);
      text-decoration: none;
      font-weight: 600;
    }

    .btn:hover {
      background: #12203a;
    }

    footer {
      color: #9db1c7;
      text-align: center;
      padding: 24px;
      border-top: 1px solid var(--border);
    }

    /* Left button bar */
    .sidebar {
      position: fixed;
      left: 0;
      top: 60px;
      bottom: 0;
      width: 240px;
      padding: 12px;
      background: #0a1220;
      border-right: 1px solid var(--border);
      overflow-y: auto;
      overflow-x: hidden;
      z-index: 15;
    }

    .navbtn {
      display: block;
      width: 100%;
      text-align: left;
      border: 1px solid var(--border);
      background: #0f1a2d;
      color: #fff;
      padding: 10px 12px;
      border-radius: 12px;
      margin: 6px 0;
      text-decoration: none;
      font-weight: 700;
    }

    .navbtn:hover {
      background: #12203a;
    }

    .content {
      margin-left: 260px;
      min-height: calc(100vh - 98px);
      padding: 0px 24px;
    }

    @media (max-width: 900px) {
      .sidebar {
        position: static;
        width: auto;
        top: auto;
        border-right: none;
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        background: transparent;
      }

      .content {
        margin-left: 0;
        padding-top: 0;
      }
    }

    .comment {
      color: #9db1c7;
      font-style: italic;
    }

    /* simple form grid */
    .grid {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      margin-top: 12px;
    }

    .grid .span-2 {
      grid-column: span 2
    }

    .grid .span-3 {
      grid-column: span 3
    }

    .grid .span-6 {
      grid-column: span 6
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .field label {
      font-size: 12px;
      color: var(--muted)
    }

    .field input {
      background: #0c1320;
      border: 1px solid var(--border);
      color: #fff;
      padding: 10px 12px;
      border-radius: 10px;
      outline: none
    }

    .input-row {
      display: flex;
      gap: 8px;
      align-items: center
    }

.spacer { display: none; }

.btn2 {
  text-decoration: none;
    display: inline-block;
    padding: 12px 18px;
    border-radius: 10px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    background: #0f1a2d;
    color: var(--text);
    white-space: normal;
    word-break: break-word;
}

.btn2:hover {
  text-decoration: none;
  box-shadow:
    0px 0px 0px 1px rgba(96, 165, 250, 0.25) inset,
    0px 0px 8px 8px rgba(96, 165, 250, 0.20);
    transition: box-shadow 220ms ease, transform 220ms ease;
}

.btn2:active {
  text-decoration: none;
  background: #353535;     /* darker than #464646 */
  transform: translateY(1px);
  box-shadow:
    0 0 0 1px rgba(96,165,250,.35) inset,
    0 4px 16px rgba(96,165,250,.22);
}

.btn2:focus-visible {
  text-decoration: none;
  outline: none;
  box-shadow:
    0 0 0 2px rgba(13,148,246,.85), /* bright ring */
    0 0 0 6px rgba(13,148,246,.25); /* halo */
}

.btn2.cta {
    text-decoration: none;
    background: linear-gradient(120deg, var(--brand), var(--accent));
    color: #001016;
    font-weight: 700;
}

.nav a.brand {
    font-weight: 800;
    letter-spacing: .5px;
    font-size: 20px;
    color: var(--fg);
}

.nav .spacer {
    flex: 0;
}

.brand-logo {
  height: 50px;            /* adjust to taste: 24–36px works well */
  width: auto;
  display: block;
}

.brand-logo2 {
  height: 90px;            /* adjust to taste: 24–36px works well */
  width: auto;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 6px;
  display: block;
}