.portal-nav {
  position:fixed;top:max(22px,env(safe-area-inset-top));right:max(28px,env(safe-area-inset-right));z-index:8;
  display:flex;padding:0;border:0;background:transparent;color:var(--design-text);
  font-family:var(--design-font);
}
.portal-nav[hidden] { display:none; }
.portal-nav button {
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 15px;
  border:0;border-radius:4px;background:transparent;color:inherit;
  font:400 14px var(--design-font);letter-spacing:.015em;cursor:pointer;
  transition:opacity 180ms ease;
}
.portal-nav button:last-child { padding-right:0; }
.portal-nav svg { flex:none;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4; }
.nav-marker-round { rx:9px; }
.nav-marker-octagon { display:none; }
body[data-design='performance'] .nav-marker-round { rx:1px; }
body[data-design='physio'] .nav-marker-round { rx:4px; }
body[data-design='power'] .nav-marker-round { display:none; }
body[data-design='power'] .nav-marker-octagon { display:inline; }
.portal-nav button:focus-visible { outline:1px solid currentColor;outline-offset:1px; }
.portal-nav:has(button:focus-visible) button:not(:focus-visible) { opacity:.3; }
@media(hover:hover) {
  .portal-nav:has(button:hover) button:not(:hover) { opacity:.3; }
}
@media(max-width:700px) {
  .portal-nav { top:max(66px,calc(env(safe-area-inset-top) + 52px));right:20px; }
  .portal-nav button { padding:0 10px;gap:7px;font-size:12px; }
  .portal-nav svg { width:15px;height:15px; }
}
@media(prefers-reduced-motion:reduce) { .portal-nav button { transition:none; } }