<div class="gl-mac">
  <header class="gl-mac-tb">
    <strong>Toolbar</strong><span class="gl-mac-coord">grid-area: tb</span>
  </header>
  <nav class="gl-mac-side">
    <strong>Source list</strong>
    <span class="gl-mac-coord">grid-area: side</span>
    <ul>
      <li>★ Favorites</li>
      <li>📨 Inbox</li>
      <li>🚀 Sent</li>
      <li>📁 Archive</li>
    </ul>
  </nav>
  <main class="gl-mac-main">
    <strong>Content pane</strong>
    <span class="gl-mac-coord">grid-area: main</span>
    <p>The right-hand pane scrolls independently. The sidebar source list stays sticky.</p>
  </main>
</div>

.gl-mac {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 48px 1fr;
  grid-template-areas:
    "tb tb"
    "side main";
  gap: 0;
  width: 100%;
  min-height: 480px;
  background: #1c1c1e;
  font-family: -apple-system, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  color: #f5f5f7;
  border: 1px solid #2a2a2e;
  border-radius: 12px;
  overflow: hidden;
  box-sizing: border-box;
}
.gl-mac-tb {
  grid-area: tb;
  background: linear-gradient(180deg, #2a2a2e, #1c1c1e);
  border-bottom: 1px solid #0a0a0a;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.gl-mac-tb strong { font-size: 13px; font-weight: 600; color: #f5f5f7; }
.gl-mac-coord {
  font-family: 'SF Mono', 'JetBrains Mono', monospace;
  font-size: 10.5px; letter-spacing: 0.04em;
  color: #007aff;
  background: rgba(0,122,255,0.12);
  padding: 2px 8px; border-radius: 999px;
}
.gl-mac-side {
  grid-area: side;
  background: #18181b;
  border-right: 1px solid #2a2a2e;
  padding: 14px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gl-mac-side strong { font-size: 11px; font-weight: 600; color: #98989d; letter-spacing: 0.06em; text-transform: uppercase; }
.gl-mac-side .gl-mac-coord { align-self: flex-start; }
.gl-mac-side ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.gl-mac-side li {
  padding: 6px 10px; border-radius: 6px;
  font-size: 13px; color: #f5f5f7;
  cursor: default;
}
.gl-mac-side li:nth-child(2) { background: linear-gradient(90deg, #007aff, #0a84ff); }
.gl-mac-main {
  grid-area: main;
  background: #1c1c1e;
  padding: 18px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.gl-mac-main strong { font-size: 15px; font-weight: 700; color: #f5f5f7; }
.gl-mac-main p { margin: 0; font-size: 13px; color: #98989d; line-height: 1.55; max-width: 480px; }
.gl-mac-main .gl-mac-coord { align-self: flex-start; }
@media (max-width: 720px) {
  .gl-mac { grid-template-columns: 1fr; grid-template-rows: 48px auto 1fr; grid-template-areas: "tb" "side" "main"; }
  .gl-mac-side { border-right: 0; border-bottom: 1px solid #2a2a2e; }
}