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

    :root {
      --bg: #09090b;
      --card: #111114;
      --border: rgba(255, 255, 255, .07);
      --t1: #f5f5f5;
      --t2: rgba(255, 255, 255, .6);
      --t3: rgba(255, 255, 255, .35);
      --acc: #4B6BFB;
      --g: #22C55E;
      --y: #F0B429;
      --r: #EF4444
    }

    html {
      scroll-behavior: smooth
    }

    body {
      background: var(--bg);
      color: var(--t1);
      font-family: 'DM Sans', sans-serif;
      line-height: 1.7;
      -webkit-font-smoothing: antialiased
    }

    a {
      color: var(--acc);
      text-decoration: none
    }

    a:hover {
      text-decoration: underline
    }

    ::selection {
      background: rgba(75, 107, 251, .3)
    }

    .wrap {
      display: grid;
      grid-template-columns: 240px 1fr;
      min-height: 100vh
    }

    @media(max-width:860px) {
      .wrap {
        grid-template-columns: 1fr
      }

      .sb {
        display: none
      }
    }

    .sb {
      position: sticky;
      top: 0;
      height: 100vh;
      overflow-y: auto;
      border-right: 1px solid var(--border);
      padding: 24px 16px;
      background: #0c0c0f
    }

    .sb::-webkit-scrollbar {
      width: 3px
    }

    .sb::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, .08);
      border-radius: 2px
    }

    .logo {
      font-size: 18px;
      font-weight: 700;
      letter-spacing: -.4px;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px
    }

    .logo i {
      background: var(--acc);
      color: #fff;
      width: 26px;
      height: 26px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: 800;
      font-style: normal
    }

    .ng {
      margin-bottom: 18px
    }

    .nl {
      font-size: 9px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: var(--t3);
      margin-bottom: 6px;
      padding-left: 8px
    }

    .na {
      display: block;
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 12.5px;
      color: var(--t2);
      font-weight: 500
    }

    .na:hover {
      background: rgba(255, 255, 255, .03);
      color: var(--t1);
      text-decoration: none
    }

    .na.on {
      background: rgba(75, 107, 251, .1);
      color: var(--acc)
    }

    .mn {
      padding: 36px 44px 80px;
      max-width: 780px
    }

    @media(max-width:860px) {
      .mn {
        padding: 20px 16px
      }
    }

    h1 {
      font-size: 28px;
      font-weight: 700;
      letter-spacing: -.4px;
      margin-bottom: 6px
    }

    h2 {
      font-size: 20px;
      font-weight: 700;
      margin-top: 44px;
      margin-bottom: 14px;
      padding-top: 20px;
      border-top: 1px solid var(--border);
      letter-spacing: -.2px
    }

    h2:first-of-type {
      border-top: none;
      margin-top: 28px
    }

    h3 {
      font-size: 15px;
      font-weight: 600;
      margin-top: 22px;
      margin-bottom: 8px;
      color: rgba(255, 255, 255, .9)
    }

    p,
    li {
      margin-bottom: 10px;
      color: var(--t2);
      font-size: 14px
    }

    ul,
    ol {
      padding-left: 20px
    }

    strong {
      color: var(--t1);
      font-weight: 600
    }

    code {
      background: rgba(255, 255, 255, .05);
      padding: 1px 6px;
      border-radius: 4px;
      font-family: 'JetBrains Mono', monospace;
      font-size: 12px;
      color: #e2e8f0
    }

    .cd {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 18px;
      margin-bottom: 12px
    }

    .ct {
      font-size: 13.5px;
      font-weight: 600;
      color: var(--t1);
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      gap: 7px
    }

    .cb {
      font-size: 12.5px;
      color: var(--t2);
      line-height: 1.6
    }

    .st {
      display: flex;
      gap: 12px;
      margin-bottom: 14px;
      align-items: flex-start
    }

    .sn {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(75, 107, 251, .12);
      color: var(--acc);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 11px;
      font-weight: 700;
      flex-shrink: 0;
      margin-top: 1px
    }

    .sb2 {
      font-size: 13.5px;
      color: var(--t2);
      flex: 1
    }

    .hi {
      font-size: 15px;
      color: var(--t2);
      margin-bottom: 28px;
      line-height: 1.6
    }

    .tip {
      background: rgba(34, 197, 94, .06);
      border: 1px solid rgba(34, 197, 94, .12);
      border-radius: 9px;
      padding: 12px 16px;
      margin-bottom: 14px;
      font-size: 12.5px;
      color: var(--t2);
      line-height: 1.6
    }

    .warn {
      background: rgba(240, 180, 41, .06);
      border: 1px solid rgba(240, 180, 41, .12);
      border-radius: 9px;
      padding: 12px 16px;
      margin-bottom: 14px;
      font-size: 12.5px;
      color: var(--t2);
      line-height: 1.6
    }