/* Pill nav: a pill of items with a rising fill circle on hover, a rolling label, and a dot under the current item. */
.pillnav { display: inline-flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); }
.pillnav { --pn-fg: #fff; --pn-hover: #0b0b0d; --pn-fill: #fff; }
.pillnav > .pn { --r: 90px; position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; min-width: 38px; padding: 0 16px; border-radius: 999px; border: 0 !important; background: transparent !important; color: var(--pn-fg) !important; font: 600 0.9rem/1 var(--f-ui, system-ui); text-decoration: none; cursor: pointer; white-space: nowrap; transition: color 0.3s; }
.pn .hc { position: absolute; z-index: -1; left: 50%; top: calc(100% - var(--r)); width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin-left: calc(var(--r) * -1); border-radius: 50%; background: var(--pn-fill); transform: scale(0); transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); pointer-events: none; }
.pn .t { position: relative; display: block; line-height: 1; transition: transform 0.4s cubic-bezier(0.3, 0.7, 0.2, 1); }
.pn .t::after { content: attr(data-t); position: absolute; left: 0; top: calc(100% + 1.7em); color: var(--pn-hover); }
.pn svg { transition: color 0.3s, transform 0.3s; }
@media (hover: hover) {
  .pn:hover .hc, .pn:focus-visible .hc { transform: scale(1); }
  .pn:hover, .pn:focus-visible { color: var(--pn-hover) !important; }
  .pn:hover .t, .pn:focus-visible .t { transform: translateY(-2.7em); }
}
.pn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the current item: a dot under it */
.pn[aria-current]::after, .pn[aria-pressed="true"].dot::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: reduce) { .pn .hc, .pn .t { transition-duration: 0.01s; } }
/* the studio's top bar and the account tabs reuse the pill nav; keep the numbered step badge and the tab labels tidy */
.top .pillnav .pn b { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); font: 700 0.75rem/1 var(--f-ui); transition: background 0.3s, color 0.3s; }
.top .pillnav .pn:hover b { background: #000; color: #fff; }
.tabs.pillnav { display: flex; width: 100%; }
.tabs.pillnav > .pn { flex: 1; }

.pn.is-on::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: currentColor; }
.nav-links.pillnav { --pn-fg: var(--text, #fff); }
@media (max-width: 700px) { .nav-links.pillnav { display: none; } }

/* the main nav links are centred in the bar too (logo left, call to action right) */
@media (min-width: 701px) { .nav .nav-links { position: absolute; left: 50%; margin: 0; transform: translateX(-50%); } }