@layer layout {
  .global-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-lg);
    border-block-end: 1px solid var(--white-06);
    flex-shrink: 0;
  }

  .brandmark {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    white-space: nowrap;
  }

  .global-nav {
    display: flex;
    gap: var(--space-xs);
    background: hsl(0 0% 100% / 0.04);
    border-radius: var(--radius-pill);
    padding: 3px;
  }

  .nav-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-tertiary);
    cursor: pointer;
    transition:
      color var(--dur-fast) ease,
      background var(--dur-fast) ease;
  }

  .nav-chip:hover {
    color: var(--text-secondary);
  }

  .nav-dot {
    inline-size: 6px;
    block-size: 6px;
    border-radius: 50%;
    opacity: 0.6;
  }

  .nav-dot--f1 { background: var(--f1-red); }
  .nav-dot--nft { background: var(--nft-violet); }
  .nav-dot--food { background: var(--food-orange); }
  .nav-dot--knowledge { background: var(--know-blue); }

  .view-sections {
    flex: 1;
    display: grid;
    min-block-size: 0;
    overflow: hidden;
  }

  .view {
    grid-area: 1 / 1;
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition:
      opacity var(--dur-mid) ease,
      visibility 0s linear var(--dur-mid);
  }

  /* Bento Grid */
  .bento-dashboard {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: var(--space-md);
    padding: var(--space-lg);
    max-inline-size: 1400px;
    margin-inline: auto;
  }

  .card--hero { grid-column: 1 / 3; grid-row: 1 / 3; }
  .card--b    { grid-column: 3; grid-row: 1; }
  .card--c    { grid-column: 3; grid-row: 2; }
  .card--d    { grid-column: 1; grid-row: 3; }
  .card--e    { grid-column: 2; grid-row: 3; }
  .card--f    { grid-column: 3; grid-row: 3; }

  /* Responsive */
  @media (max-width: 64rem) {
    .bento-dashboard {
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto;
    }

    .card--hero { grid-column: 1 / 3; grid-row: 1; }
    .card--b    { grid-column: 1; grid-row: 2; }
    .card--c    { grid-column: 2; grid-row: 2; }
    .card--d    { grid-column: 1; grid-row: 3; }
    .card--e    { grid-column: 2; grid-row: 3; }
    .card--f    { grid-column: 1 / 3; grid-row: 4; }
  }

  @media (max-width: 48rem) {
    .global-header {
      flex-direction: column;
      gap: var(--space-sm);
      padding: var(--space-sm);
    }

    .bento-dashboard {
      grid-template-columns: 1fr;
      padding: var(--space-sm);
    }

    .card--hero,
    .card--b,
    .card--c,
    .card--d,
    .card--e,
    .card--f {
      grid-column: 1;
      grid-row: auto;
    }
  }
}