:root {
      --bg: #0f172a;
      --panel: #111827;
      --panel-2: #0b1220;
      --text: #e5e7eb;
      --muted: #9ca3af;
      --accent: #60a5fa;
      --border: #1f2937;
      --radius: 10px;
      --item-h: 42px;
      --w: 220px;
      --gap: 6px;
    }


    /* ===== Horizontal menubar ===== */
    nav.menubar_b {
      position: sticky; /* stays at top while scrolling */
      top: 0;
      z-index: 1000;
      background: #e6ffe6;
      border-bottom: 1px solid var(--border);
    }

    ul.menu-list_b {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    ul.menu-list_b.root_b {
      display: flex;
      gap: 4px;
      padding: 6px 8px;
      align-items: center;
    }

    li.menu-item_b {
      position: relative; /* anchor for submenu positioning */
    }

    /* Right-justify Help and About items in B menu */
    nav.menubar_b ul.root_b > li.menu-item_b:nth-last-child(4) {
      margin-left: auto;
    }

    /* Clickable "row" for top items and submenu items */
    .row_b {
      height: var(--item-h);
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      border-radius: 8px;
      color: black;
      background: transparent;
      border: 1px solid transparent;
      cursor: pointer;
      text-align: left;
      font-size: 15px;
      line-height: 1;
      white-space: nowrap;
    }

    a.row {
      text-decoration: none;
    }

    .row_b .chev_b {
      font-size: 14px;
      color: var(--muted);
      transition: transform .12s ease, color .12s ease;
    }

    li.menu-item_b.open_b > .row_b {
      background: transparent;
      border-color: var(--border);
    }

    li.menu-item_b.open_b > .row_b .chev_b {
      transform: rotate(90deg);
      color: var(--accent);
    }

    /* ===== Submenus (NO hover) ===== */
    ul.submenu_b {
      position: absolute;
      background: #e6ffe6;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 6px;
      width: auto;
      display: none; /* shown only via .open class */
      z-index: 10;
    }

    /* Top-level submenu drops DOWN under menubar */
    ul.root_b > li.menu-item_b > ul.submenu_b {
      top: calc(100% + var(--gap));
      left: 0;
    }

    /* Nested submenus open to the RIGHT of their parent item */
    ul.submenu_b li.menu-item_b > ul.submenu_b {
      top: 0;
      left: calc(100% + var(--gap));
    }

    li.menu-item_b.open_b > ul.submenu_b {
      display: block;
    }

    /* Submenu items stack vertically */
    ul.submenu_b .row_b {
      width: auto;
      min-width: 20px;
      max-width: 300px;
      height: 40px;
      font-size: 14px;
    }

    .sep_b {
      height: 1px;
      background: var(--border);
      margin: 6px 8px;
    }

    /* ===== Demo content ===== */
    main {
      padding: 80px 24px 24px; /* top padding so content doesn't hide behind bar */
      max-width: 950px;
      margin: 0 auto;
    }

    .panel_b {
      background: rgba(17, 24, 39, 0.7);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px;
      min-height: 220px;
    }

    .panel h2 {
      margin-top: 0;
      font-size: 18px;
    }

    .note_b { color: var(--muted); font-size: 14px; }

    /* Small screens: make bar wrap; submenus become static blocks */
    @media (max-width: 680px) {
      ul.menu-list_b.root_b { flex-wrap: wrap; }
      ul.submenu_b {
        position: static;
        width: auto;
        margin-top: 6px;
      }
      ul.submenu_b li.menu-item_b > ul.submenu_b {
        margin-left: 10px;
      }
    }