/* A restrained game-style meter. Fill is real progress within the current level. */
.account-page .xp-guide { margin-top: 12px; font-size: .875rem; line-height: 1.55; }
.account-page .xp-guide > summary { min-height: 44px; padding-block: 10px; box-sizing: border-box; cursor: pointer; }
.account-page .xp-guide :is(p, ul) { margin-block: 12px; }
.account-page .xp-guide ul { padding-left: 1.4rem; }
.account-page .xp-guide li { margin-block: 6px; }
html.street-page body.street-site .xp-display {
  --xp-fill: 0%; --xp-dark: var(--accent-ink); --xp-light: var(--accent);
  color: #464646; text-decoration: none; font: 500 .75rem/1.35 var(--sans);
  font-variant-numeric: tabular-nums; box-sizing: border-box;
}
html.street-page body.street-site .xp-display:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 5px; }
.xp-level { font-weight: 750; letter-spacing: .06em; }
.xp-total { font-weight: 650; max-width: 100%; overflow-wrap: anywhere; }
.xp-caption { color: #6d6d6d; }
.xp-track {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  background: #e3e3e3; border: 1px solid #d0d0d0; border-radius: 999px;
  box-shadow: inset 0 2px 4px #36363614, 0 1px 0 #ffffff;
}
.xp-fill {
  position: absolute; left: 0; bottom: 0; width: var(--xp-fill); height: 100%;
  border-radius: inherit; background: linear-gradient(90deg, var(--xp-dark), var(--xp-light));
  box-shadow: inset 0 1px 2px #ffffff8c;
  overflow: hidden;
}
.xp-fill::after {
  content: ''; position: absolute; inset: 0; width: 100%; height: 100%;
  background: linear-gradient(110deg, transparent 25%, #ffffffb3 48%, transparent 72%);
  transform: translateX(-150%); animation: xp-shimmer 5s ease-in-out infinite;
}
@keyframes xp-shimmer { 0%, 25% { transform: translateX(-150%); } 75%, 100% { transform: translateX(150%); } }
html.street-page body.street-site .xp-display--home {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px;
  width: min(100%, 24rem); margin-top: 24px; padding: 12px 16px; border-radius: 16px;
  text-align: left; font-size: .875rem;
}
.xp-display--home .xp-level { grid-column: 1; grid-row: 1; }
.xp-display--home .xp-total { grid-column: 2; grid-row: 1; text-align: right; }
.xp-display--home .xp-track { grid-column: 1 / -1; grid-row: 2; height: 14px; }
.xp-display--home .xp-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html.street-page body.street-site .xp-display--account {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 10px 16px;
  width: 100%;
  margin: 24px 0; padding: 20px; border: 1px solid #e3e3e3; border-radius: 16px; background: #f5f5f7;
}
.xp-display--account .xp-level { grid-column: 1; grid-row: 1; font-size: .9rem; letter-spacing: 0; }
.xp-display--account .xp-total { grid-column: 2; grid-row: 1; font-size: .9rem; }
.xp-display--account .xp-track { grid-column: 1 / -1; grid-row: 2; height: 16px; }
.xp-display--account .xp-caption { grid-column: 1 / -1; grid-row: 3; }
@media (max-width: 600px) {
  html.street-page body.street-site .xp-display--account { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) { .xp-fill::after { animation: none; transform: none; opacity: .25; } }
@media (forced-colors: active) {
  .xp-track { border-color: CanvasText; background: Canvas; box-shadow: none; }
  .xp-fill { forced-color-adjust: none; background: Highlight !important; box-shadow: none; }
  .xp-fill::after { display: none; }
  html.street-page body.street-site .xp-display { color: LinkText; }
  .xp-caption { color: CanvasText; }
}