:root {
        --bg: #ffffff;
        --muted: #252c35;
        --accent: #06b6d4;
        --glass: rgba(255, 255, 255, 0.6);
        --glass-border: rgba(255, 255, 255, 0.7);
       
      }

      html,
      body {
        height: 100%;
        margin: 0;
        font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial !important;
        background: var(--bg);
        color: #010102;
        font-size: 17px;
        font-optical-sizing: auto;
        font-weight: 300;
      }
      
      code {
          font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI",
          Roboto, "Helvetica Neue", Arial !important;
      }

      main {
        margin-left: 0;
        padding: 0px;
      }

      .node-card {
        background: #fafbfc;
        border-radius: 12px;
        padding: 18px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        box-shadow: 0 8px 20px rgba(2, 6, 23, 0.02);
      }

      .badge {
        padding: 6px 10px;
        border-radius: 999px;
        font-weight: 600;
        font-size: 13px;
      }

      .badge-open {
        background: #16a34a;
        color: white;
      }

       .badge-doc {
        background: rgba(216, 218, 220, 0.654);
        color: rgba(125, 132, 140, 0.654);
      }

      .badge-secure {
        background: #024b9a;
        color: white;
      }

      .lang-tabs {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .lang-btn {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.88));
        box-shadow: 0 3px 5px rgba(46, 46, 46, 0.08);
        border: 1px solid rgba(15, 23, 42, 0.05);
        padding: 6px 18px;
        border-radius: 999px;
        color: var(--muted);
        cursor: pointer;
        font-size: 14px;
      }

      .lang-btn.active {
        background: linear-gradient(180deg, #06b6d4, #0ea5a4);
        color: white;
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(6, 182, 212, 0.08);
      }

      .code-pane {
        display: none;
      }

      .code-pane.active {
        display: block;
      }

      pre[class*="language-"] {
        border-radius: 8px;
        padding: 12px;
        background: #0b1220;
        color: #e6edf3;
        overflow: auto;
      }

      .collapse-btn {
        cursor: pointer;
        background: transparent;
        border: 0;
        color: var(--muted);
        margin-left: 20px;
        font-size: 14.5px;
      }

      pre {
        font-size: 15px !important;
      }