:root {
      --gb-bg0: #282828;
      --gb-bg1: #3c3836;
      --gb-fg: #ebdbb2;
      --gb-fg-dim: #a89984;
      --gb-orange: #fe8019;
      --gb-orange-dim: #d65d0e;
      --gb-aqua: #8ec07c;
      --gb-line: #504945;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: "JetBrains Mono", ui-monospace, monospace;
      font-size: 15px;
      line-height: 1.55;
      color: var(--gb-fg);
      background: var(--gb-bg0);
    }

    .layout {
      display: flex;
      min-height: 100vh;
    }

    .sidebar {
      flex-shrink: 0;
      width: 200px;
      padding: 2rem 1rem;
      display: flex;
      flex-direction: column;
      gap: 0.35rem;
      background: var(--gb-bg0);
    }

    .sidebar a {
      color: var(--gb-fg-dim);
      text-decoration: none;
      padding: 0.45rem 0.65rem;
      border-radius: 4px;
      transition: color 0.15s ease, background 0.15s ease;
    }

    .sidebar a:hover,
    .sidebar a:focus-visible {
      color: var(--gb-orange);
      /* background: var(--gb-bg1); */
      outline: none;
    }

    .divider {
      flex-shrink: 0;
      width: 1px;
      min-height: 100vh;
      background: var(--gb-line);
      align-self: stretch;
      margin-left: 1rem;
    }

    main {
      flex: 1;
      padding: 2rem 3rem 3rem;
      max-width: 52rem;
    }
    
    a {
      color: var(--gb-orange);
    }
    
    p {
      margin-bottom: 1rem;
    }

    section {
      margin-bottom: 3.5rem;
      scroll-margin-top: 1.5rem;
    }

    section h1 {
      font-size: 1.35rem;
      font-weight: 600;
      color: var(--gb-aqua);
      margin: 0 0 1rem;
    }

    section p {
      margin: 0;
      color: var(--gb-fg);
    }

    .brand {
      font-weight: 600;
      color: var(--gb-orange);
      margin-bottom: 1.25rem;
      padding: 0 0.65rem;
      letter-spacing: 0.02em;
    }