:root{
      --bg: #0f172a;        /* slate-900 */
      --fg: #e2e8f0;        /* slate-200 */
      --accent: #22d3ee;    /* cyan-400 */
      --fg-dim: #94a3b8;    /* slate-400 */
    }
    * { box-sizing: border-box; }

    /* Menubar container */
    nav {
      background: var(--bg);
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .menu {
      max-width: 1100px;
      margin: 0;
      padding: 0.75rem 1rem;
      display: flex;
      gap: 1rem;
    }

    .brand {
      font-weight: 700;
      letter-spacing: 0.2px;
      color: var(--fg);
      text-decoration: none;
    }

    .menu ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      gap: 0.5rem;
    }

    .menu a {
      display: inline-block;
      padding: 0.5rem 0.75rem;
      color: var(--fg-dim);
      text-decoration: none;
      border-radius: 0.5rem;
      transition: color .15s ease, background-color .15s ease;
    }

    .menu a:hover,
    .menu a:focus {
      color: var(--fg);
      background: rgba(255,255,255,0.06);
      outline: none;
    }

    .menu a.active {
      color: var(--bg);
      background: var(--accent);
    }

    /* Push links to the right */
    .spacer { flex: 1; }