/* Stack switcher shared by every stack page: a native <details> menu, works without JS. */
.stacks { position: relative; margin-right: auto; margin-left: 0.75rem; }
.stacks > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px;
  padding: 0 0.85rem; border: 1px solid rgba(236, 232, 223, 0.18); border-radius: 999px; cursor: pointer;
  font: 600 0.9rem/1 "Satoshi", sans-serif; color: #ECE8DF; background: rgba(236, 232, 223, 0.04);
  transition: border-color 0.2s, background 0.2s; white-space: nowrap; }
.stacks > summary::-webkit-details-marker { display: none; }
.stacks > summary:hover { border-color: #ECE8DF; }
.stacks > summary:focus-visible { outline: 2px solid #F2B544; outline-offset: 2px; }
.stacks > summary svg { width: 12px; height: 12px; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.stacks[open] > summary svg { transform: rotate(180deg); }
.stacks__menu { position: absolute; top: calc(100% + 8px); left: 0; width: min(320px, calc(100vw - 32px)); z-index: 60;
  padding: 6px; border-radius: 16px; background: #14161c; border: 1px solid rgba(236, 232, 223, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); animation: stacks-in 0.22s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes stacks-in { from { opacity: 0; transform: translateY(-6px); } }
.stacks__menu a { display: block; padding: 12px 14px; border-radius: 11px; text-decoration: none; color: #ECE8DF; }
.stacks__menu a:hover, .stacks__menu a:focus-visible { background: rgba(236, 232, 223, 0.07); outline: none; }
.stacks__menu a[aria-current="page"] { background: rgba(236, 232, 223, 0.09); }
.stacks__menu b { display: flex; align-items: center; gap: 0.5rem; font: 800 1.05rem/1.2 "Cabinet Grotesk", sans-serif; }
.stacks__menu b i { font: 600 0.7rem/1 "JetBrains Mono", monospace; font-style: normal; letter-spacing: 0.06em;
  text-transform: uppercase; color: #0b130e; background: #3ddc97; padding: 4px 6px; border-radius: 5px; }
.stacks__menu span { display: block; margin-top: 4px; font: 400 0.85rem/1.35 "Satoshi", sans-serif; color: #9A9DA6; }
@media (prefers-reduced-motion: reduce) { .stacks__menu { animation: none; } .stacks > summary svg { transition: none; } }
/* Phones: the menu spans the nav (the sticky nav is its containing block) and the brand keeps only its mark. */
@media (max-width: 520px) {
  .stacks { position: static; margin-left: 0.25rem; }
  .stacks__menu { left: 12px; right: 12px; width: auto; top: calc(100% + 6px); }
  .nav:has(.stacks) .brand span { display: none; }
}