/* Section menu for long pages, after the brand guidelines' chapter menu: a back-to-top button and a
   tab showing the current section, which opens the full list. Desktop only; it floats in the right
   margin and never changes the page layout. Shown from 1400px, where the margin is wide enough for it. */
.xnav { display: none; }
[data-nav][id] { scroll-margin-top: 96px; }
[data-nav][tabindex="-1"]:focus { outline: none; }
@media (min-width: 1400px) {
  .xnav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: fixed; z-index: 30; top: 50%;
    right: max(12px, calc((100vw - 1240px) / 4 - 24px)); transform: translate(calc(100% + 40px), -50%); visibility: hidden;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s; }
  .xnav.show { transform: translate(0, -50%); visibility: visible; transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
}
.xnav-top, .xnav-tab { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18); background: rgba(15, 13, 38, .9); color: #fff; cursor: pointer; font: 600 calc(.875rem + 1px)/1 var(--body);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -12px rgba(15, 13, 38, .55); }
.xnav-top:hover { background: var(--vio); }
.xnav-tab b { font: 400 13px/1 var(--display); color: var(--vio-300); }
/* The tab shows the section number; its name slides out on hover or keyboard focus. */
.xnav-tab span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s cubic-bezier(.2, .7, .2, 1), opacity .25s, margin .35s; }
.xnav-tab:hover, .xnav-tab:focus-visible, .xnav-tab[aria-expanded="true"] { padding: 0 18px; gap: 10px; }
.xnav-tab:hover span, .xnav-tab:focus-visible span, .xnav-tab[aria-expanded="true"] span { max-width: 240px; opacity: 1; }
.xnav-top:focus-visible, .xnav-tab:focus-visible, .xnav-list a:focus-visible { outline: 2px solid var(--vio-300); outline-offset: 3px; }
.xnav-list { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); max-height: calc(100vh - 120px); overflow: auto;
  list-style: none; margin: 0; padding: 8px; min-width: 240px; border-radius: 20px; background: rgba(15, 13, 38, .96);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(15, 13, 38, .35); animation: xnav-in .25s ease; }
.xnav-list[hidden] { display: none; }
@keyframes xnav-in { from { opacity: 0; } to { opacity: 1; } }
.xnav-list a { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 12px; color: rgba(255, 255, 255, .82);
  text-decoration: none; font: 500 calc(.875rem + 1px)/1.35 var(--body); }
.xnav-list a b { font: 400 12px/1 var(--display); color: var(--vio-300); min-width: 20px; }
.xnav-list a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.xnav-list a[aria-current="true"] { background: var(--vio); color: #fff; }
.xnav-list a[aria-current="true"] b { color: #fff; }
.xnav-list .xnav-up a { color: rgba(255, 255, 255, .65); }
@media (prefers-reduced-motion: reduce) { .xnav, .xnav.show, .xnav-tab span { transition: none; } .xnav-list { animation: none; } }