:root {
          --bg-main: #0b0f19;
          --bg-sidebar: #0f172a;
          --bg-card: #1e293b;
          --text-main: #f8fafc;
          --text-muted: #94a3b8;
          --accent: #3b82f6;
          --accent-green: #10b981;
          --accent-orange: #f59e0b;
          --border: #334155;
          --code-bg: #111827;
      }
      
      * {
          box-sizing: border-box;
          margin: 0;
          padding: 0;
      }
      
      body {
          font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
          background-color: var(--bg-main);
          color: var(--text-main);
          line-height: 1.6;
          display: flex;
          min-height: 100vh;
      }
      
      aside {
          width: 300px;
          background-color: var(--bg-sidebar);
          border-right: 1px solid var(--border);
          padding: 30px 20px;
          position: fixed;
          top: 0;
          bottom: 0;
          left: 0;
          overflow-y: auto;
          z-index: 10;
      }
      
      .logo-container {
          display: flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 40px;
          text-decoration: none;
          color: var(--text-main);
      }
      
      .logo-container svg {
          border-radius: 8px;
      }
      
      .logo-container h1 {
          font-size: 20px;
          font-weight: 700;
          letter-spacing: -0.5px;
      }
      
      .nav-group {
          margin-bottom: 25px;
      }
      
      .nav-title {
          font-size: 11px;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: var(--text-muted);
          margin-bottom: 10px;
          font-weight: bold;
      }
      
      .nav-links {
          list-style: none;
      }
      
      .nav-links li {
          margin-bottom: 8px;
      }
      
      .nav-links a {
          color: var(--text-muted);
          text-decoration: none;
          font-size: 14px;
          display: block;
          padding: 6px 10px;
          border-radius: 6px;
          transition: all 0.2s;
      }
      
      .nav-links a:hover,
      .nav-links a.active {
          color: var(--text-main);
          background-color: var(--bg-card);
      }
      
      main {
          margin-left: 300px;
          flex: 1;
          padding: 60px 80px;
          max-width: 1100px;
      }
      
      section {
          margin-bottom: 60px;
          scroll-margin-top: 40px;
      }
      
      h2 {
          font-size: 28px;
          font-weight: 700;
          margin-bottom: 20px;
          border-bottom: 1px solid var(--border);
          padding-bottom: 10px;
          letter-spacing: -0.5px;
      }
      
      h3 {
          font-size: 20px;
          font-weight: 600;
          margin: 30px 0 15px;
          color: var(--accent);
      }
      
      p {
          color: var(--text-muted);
          font-size: 16px;
          margin-bottom: 20px;
      }
      
      strong {
          color: var(--text-main);
      }
      
      pre {
          background-color: var(--code-bg);
          border: 1px solid var(--border);
          border-radius: 8px;
          padding: 20px;
          overflow-x: auto;
          margin-bottom: 25px;
          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
          font-size: 14px;
      }
      
      code {
          color: var(--accent-green);
      }
      
      pre code {
          color: var(--text-main);
      }
      
      .keyword {
          color: #f43f5e;
      }
      
      .type {
          color: #06b6d4;
      }
      
      .string {
          color: #10b981;
      }
      
      .comment {
          color: #64748b;
          font-style: italic;
      }
      
      .callout {
          background-color: var(--bg-card);
          border-left: 4px solid var(--accent);
          padding: 20px;
          border-radius: 0 8px 8px 0;
          margin-bottom: 25px;
      }
      
      .callout p {
          margin-bottom: 0;
          color: var(--text-main);
      }
      
      @media (max-width: 900px) {
          body {
              flex-direction: column;
          }
          aside {
              position: relative;
              width: 100%;
              border-right: none;
              border-bottom: 1px solid var(--border);
          }
          main {
              margin-left: 0;
              padding: 40px 20px;
          }
      }
      
      .code-block-container {
          position: relative;
          background-color: #282c34;
          /* Dark background for code */
          color: #abb2bf;
          /* Light text color */
          padding: 15px;
          border-radius: 5px;
          margin-bottom: 15px;
      }
      
      .code-block-container pre {
          margin: 0;
          overflow-x: auto;
          /* Allow horizontal scrolling for long lines */
      }
      
      .code-block-container code {
          display: block;
          /* Ensure code takes full width */
          font-family: monospace;
          font-size: 14px;
          line-height: 1.5;
      }
      
      .copy-button {
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: #61afef;
          /* Blue copy button */
          color: white;
          border: none;
          padding: 5px 10px;
          border-radius: 3px;
          cursor: pointer;
          font-size: 12px;
      }
      
      .copy-button:hover {
          background-color: #52a0dc;
      }