.vo {
  font-family: var(--vo-font-body);
  font-size: var(--vo-text-md);
  line-height: var(--vo-body-leading);
  color: var(--vo-ink);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.vo, .vo *, .vo *::before, .vo *::after { box-sizing: border-box; }

/* Fonts follow the --vo-font-* tokens, which :lang() swaps; re-reading them on a [lang] subtree gives a nested block its own face. */
.vo :where([lang]) { font-family: var(--vo-font-body); }

.vo :where(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  font-family: var(--vo-font-display);
  font-weight: var(--vo-display-weight);
  letter-spacing: var(--vo-display-tracking);
  line-height: var(--vo-display-leading);
  color: inherit;
}

.vo :where(p, figure, blockquote, dl, dd) { margin: 0; }
.vo :where(img, svg, video) { max-inline-size: 100%; }
/* Width/height attributes are only hints: an axis left to them squashes the artwork once CSS sizes the other. */
.vo :where(img) { block-size: auto; inline-size: auto; }
.vo :where(button, input, select, textarea) { font: inherit; color: inherit; }
.vo :where(a:not([class])) {
  color: var(--vo-orange-ink);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.vo [hidden] { display: none !important; }
.vo :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--vo-focus-width) solid var(--vo-focus);
  outline-offset: var(--vo-focus-offset);
}

.vo-tone-blue { --vo-tone: var(--vo-blue); --vo-tone-soft: var(--vo-blue-soft); --vo-tone-tint: var(--vo-blue-tint); --vo-tone-line: var(--vo-blue-line); --vo-tone-ink: var(--vo-blue-ink); }
.vo-tone-orange { --vo-tone: var(--vo-orange); --vo-tone-soft: var(--vo-orange-soft); --vo-tone-tint: var(--vo-orange-tint); --vo-tone-line: var(--vo-orange-line); --vo-tone-ink: var(--vo-orange-ink); }
.vo-tone-yellow { --vo-tone: var(--vo-yellow); --vo-tone-soft: var(--vo-yellow-soft); --vo-tone-tint: var(--vo-yellow-tint); --vo-tone-line: var(--vo-yellow-line); --vo-tone-ink: var(--vo-yellow-ink); }
.vo-tone-green { --vo-tone: var(--vo-green); --vo-tone-soft: var(--vo-green-soft); --vo-tone-tint: var(--vo-green-tint); --vo-tone-line: var(--vo-green-line); --vo-tone-ink: var(--vo-green-ink); }
.vo-tone-coral { --vo-tone: var(--vo-coral); --vo-tone-soft: var(--vo-coral-soft); --vo-tone-tint: var(--vo-coral-tint); --vo-tone-line: var(--vo-coral-line); --vo-tone-ink: var(--vo-coral-ink); }
.vo-tone-purple { --vo-tone: var(--vo-purple); --vo-tone-soft: var(--vo-purple-soft); --vo-tone-tint: var(--vo-purple-tint); --vo-tone-line: var(--vo-purple-line); --vo-tone-ink: var(--vo-purple-ink); }
.vo-tone-warning { --vo-tone: var(--vo-warning); --vo-tone-soft: var(--vo-warning-soft); --vo-tone-tint: var(--vo-warning-tint); --vo-tone-line: var(--vo-warning-line); --vo-tone-ink: var(--vo-warning-ink); }
.vo-tone-danger { --vo-tone: var(--vo-danger); --vo-tone-soft: var(--vo-danger-soft); --vo-tone-tint: var(--vo-danger-tint); --vo-tone-line: var(--vo-danger-line); --vo-tone-ink: var(--vo-danger-ink); }
.vo-tone-neutral { --vo-tone: var(--vo-ink-mute); --vo-tone-soft: var(--vo-surface-sunken); --vo-tone-tint: var(--vo-neutral-tint); --vo-tone-line: var(--vo-line-strong); --vo-tone-ink: var(--vo-ink-soft); }

.vo-canvas { background: var(--vo-canvas); }
.vo-canvas--warm { background: var(--vo-canvas-warm); }

.vo-container {
  inline-size: min(var(--vo-container), 100% - var(--vo-gutter) * 2);
  margin-inline: auto;
}

.vo-stack { display: flex; flex-direction: column; gap: var(--vo-space-4); }
.vo-stack--sm { gap: var(--vo-space-2); }
.vo-stack--lg { gap: var(--vo-space-6); }

.vo-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vo-space-3); }

.vo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--vo-space-4);
}

.vo-visually-hidden {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.vo-skip {
  position: absolute;
  inset-inline-start: var(--vo-space-3);
  inset-block-start: -100px;
  z-index: var(--vo-z-overlay);
  padding: var(--vo-space-3) var(--vo-space-5);
  border-radius: var(--vo-radius-sm);
  background: var(--vo-navy);
  color: var(--vo-on-color);
  font-weight: var(--vo-weight-bold);
  text-decoration: none;
}
.vo-skip:focus { inset-block-start: var(--vo-space-3); }

.vo-icon {
  display: inline-block;
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  vertical-align: -0.25em;
}
.vo-icon--sm { inline-size: 1em; block-size: 1em; }
.vo-icon--lg { inline-size: 1.75em; block-size: 1.75em; }
.vo-icon--mirror:dir(rtl) { transform: scaleX(-1); }

/* The logo never shrinks with its container: a fixed height plus a squeezed width would distort it. */
.vo-logo { display: block; block-size: 32px; inline-size: auto; max-inline-size: none; }
.vo-logo--sm { block-size: 24px; }
.vo-logo--md { block-size: 32px; }
.vo-logo--lg { block-size: 44px; }

.vo-link {
  color: var(--vo-orange-ink);
  font-weight: var(--vo-weight-medium);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: .2em;
}
.vo-link:hover { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  .vo *, .vo *::before, .vo *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.vo-topbar {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--vo-z-sticky);
  background: var(--vo-canvas-glass);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  backdrop-filter: saturate(150%) blur(14px);
  border-block-end: 1px solid var(--vo-line);
}
.vo-topbar__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--vo-space-2) var(--vo-space-4);
  min-block-size: 64px;
  padding-block: var(--vo-space-2);
}
.vo-topbar__logo { display: inline-flex; flex: none; }
.vo-topbar__art { flex: none; block-size: 40px; inline-size: auto; margin-inline-start: auto; }
.vo-topbar__actions { display: flex; align-items: center; gap: var(--vo-space-2); margin-inline-start: auto; }
.vo-topbar__art + .vo-topbar__actions { margin-inline-start: 0; }

.vo-langs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vo-space-1); }
.vo-langs__item {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--vo-tap);
  padding-inline: var(--vo-space-3);
  border-radius: var(--vo-radius-pill);
  color: var(--vo-ink-soft);
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-medium);
  text-decoration: none;
  white-space: nowrap;
}
.vo-langs__item:hover { background: var(--vo-neutral-tint); color: var(--vo-ink); }
.vo-langs__item[aria-current="true"] { background: var(--vo-navy); color: var(--vo-on-color); }

.vo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vo-space-2);
  min-block-size: var(--vo-tap);
  margin: 0;
  padding: var(--vo-space-2) var(--vo-space-5);
  border: 2px solid transparent;
  border-radius: var(--vo-radius-pill);
  background: var(--vo-surface);
  color: var(--vo-ink);
  font-family: var(--vo-font-body);
  font-size: var(--vo-text-md);
  font-weight: var(--vo-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--vo-dur-fast) var(--vo-ease), box-shadow var(--vo-dur-fast) var(--vo-ease),
              background-color var(--vo-dur-fast) var(--vo-ease), border-color var(--vo-dur-fast) var(--vo-ease),
              color var(--vo-dur-fast) var(--vo-ease);
}
/* White on Momentum Orange is 2.61:1, below AA. Brand-exact by product decision; see DESIGN.md before changing it. */
.vo-btn--primary { background: var(--vo-action); color: var(--vo-on-color); box-shadow: var(--vo-shadow-2); }
.vo-btn--primary:hover { background: var(--vo-action-hover); box-shadow: var(--vo-shadow-3); transform: translateY(-2px); }
.vo-btn--secondary { border-color: var(--vo-line-strong); }
.vo-btn--secondary:hover { border-color: var(--vo-orange); color: var(--vo-orange-ink); transform: translateY(-2px); }
.vo-btn--soft {
  border-color: var(--vo-tone-line, var(--vo-orange-line));
  background: var(--vo-tone-tint, var(--vo-orange-tint));
  color: var(--vo-tone-ink, var(--vo-orange-ink));
}
.vo-btn--soft:hover { background: var(--vo-tone-soft, var(--vo-orange-soft)); }
.vo-btn--on-dark { color: var(--vo-navy); }
.vo-btn--on-dark:hover { background: var(--vo-yellow); }
.vo-btn:active { transform: translateY(0); }
.vo-btn--sm { min-block-size: 36px; padding: var(--vo-space-1) var(--vo-space-4); font-size: var(--vo-text-sm); }
.vo-btn--lg { min-block-size: 52px; padding: var(--vo-space-3) var(--vo-space-6); font-size: var(--vo-text-lg); }
.vo-btn--block { display: flex; inline-size: 100%; }
.vo-btn:disabled, .vo-btn[aria-disabled="true"] {
  box-shadow: none;
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.vo-icon-btn {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: var(--vo-tap);
  block-size: var(--vo-tap);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--vo-surface);
  color: var(--vo-orange-deep);
  box-shadow: var(--vo-shadow-1);
  cursor: pointer;
  transition: transform var(--vo-dur-fast) var(--vo-ease), box-shadow var(--vo-dur-fast) var(--vo-ease);
}
.vo-icon-btn:hover { box-shadow: var(--vo-shadow-2); transform: translateY(-1px); }
.vo-icon-btn--sm { inline-size: 36px; block-size: 36px; }

.vo-topbar--static {
  position: static;
  padding-inline: var(--vo-space-4);
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius-md);
}

.vo-tabbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--vo-z-sticky);
  display: flex;
  min-inline-size: 0;
  gap: var(--vo-space-1);
  padding: var(--vo-space-2);
  padding-block-end: calc(var(--vo-space-2) + env(safe-area-inset-bottom, 0px));
  background: var(--vo-surface);
  border-block-start: 1px solid var(--vo-line);
  box-shadow: var(--vo-shadow-up);
}
.vo-tabbar--static {
  position: static;
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius-md);
  box-shadow: var(--vo-shadow-1);
}
.vo-tabbar__item {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  min-inline-size: 0;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-block-size: 56px;
  padding: var(--vo-space-1);
  border-radius: var(--vo-radius-md);
  color: var(--vo-ink-mute);
  font-size: var(--vo-text-xs);
  font-weight: var(--vo-weight-medium);
  text-align: center;
  text-decoration: none;
}
.vo-tabbar__item .vo-icon { inline-size: 24px; block-size: 24px; }
.vo-tabbar__item:hover { color: var(--vo-ink); }
.vo-tabbar__item[aria-current="page"] { background: var(--vo-orange-soft); color: var(--vo-orange); font-weight: var(--vo-weight-bold); }
.vo-tabbar__label {
  max-inline-size: 100%;
  overflow: hidden;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vo-segmented {
  display: flex;
  gap: var(--vo-space-1);
  padding: var(--vo-space-1);
  background: var(--vo-surface);
  border-radius: var(--vo-radius-lg);
  box-shadow: var(--vo-shadow-1);
}
.vo-segmented__item {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: var(--vo-space-1);
  min-inline-size: 0;
  min-block-size: var(--vo-tap);
  margin: 0;
  padding: var(--vo-space-2);
  border: 0;
  border-radius: var(--vo-radius-md);
  background: transparent;
  color: var(--vo-ink-soft);
  font-weight: var(--vo-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--vo-dur-fast) var(--vo-ease), color var(--vo-dur-fast) var(--vo-ease);
}
.vo-segmented__item:hover { background: var(--vo-neutral-tint); color: var(--vo-ink); }
.vo-segmented__item:is([aria-current="page"], [aria-current="true"], [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--vo-action);
  color: var(--vo-on-color);
  box-shadow: var(--vo-shadow-1);
}

.vo-pagehead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--vo-space-4);
}
.vo-pagehead__title { font-size: var(--vo-text-2xl); color: var(--vo-navy); }
.vo-pagehead--brand .vo-pagehead__title { font-size: var(--vo-text-3xl); color: var(--vo-orange); }
.vo-pagehead__sub { max-inline-size: 40rem; color: var(--vo-ink-soft); font-size: var(--vo-text-lg); }
.vo-pagehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vo-space-2); }

.vo-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--vo-space-3); }
.vo-section-title { font-size: var(--vo-text-xl); color: var(--vo-navy); }
.vo-section-head__action {
  color: var(--vo-orange-ink);
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-bold);
  text-decoration: none;
}
.vo-section-head__action:hover { text-decoration: underline; }

.vo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--vo-space-2);
  padding: var(--vo-space-1) var(--vo-space-3);
  border: 1px solid var(--vo-blue-line);
  border-radius: var(--vo-radius-pill);
  background: var(--vo-blue-soft);
  color: var(--vo-blue-ink);
  font-size: var(--vo-text-xs);
  font-weight: var(--vo-weight-bold);
  letter-spacing: var(--vo-label-tracking);
  text-transform: var(--vo-label-transform);
  max-inline-size: 100%;
}
.vo-eyebrow .vo-icon { color: var(--vo-blue); }

.vo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--vo-space-1);
  padding: 2px var(--vo-space-2);
  border-radius: var(--vo-radius-pill);
  background: var(--vo-tone-tint, var(--vo-neutral-tint));
  color: var(--vo-tone-ink, var(--vo-ink-soft));
  font-size: var(--vo-text-xs);
  font-weight: var(--vo-weight-bold);
  line-height: 1.5;
  white-space: nowrap;
}

.vo-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--vo-space-2);
  min-block-size: 36px;
  padding: var(--vo-space-1) var(--vo-space-4);
  border: 1px solid var(--vo-tone-line, var(--vo-line-strong));
  border-radius: var(--vo-radius-pill);
  background: var(--vo-tone-tint, var(--vo-surface));
  color: var(--vo-tone-ink, var(--vo-ink-soft));
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-bold);
  text-decoration: none;
  white-space: nowrap;
}
.vo-chip .vo-icon { color: var(--vo-tone-ink, var(--vo-orange)); }

.vo-card {
  position: relative;
  display: block;
  padding: var(--vo-space-5);
  background: var(--vo-surface);
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius-md);
  box-shadow: var(--vo-shadow-1);
  color: inherit;
  text-decoration: none;
}
.vo-card__title { font-size: var(--vo-text-lg); color: var(--vo-navy); }
.vo-card__body { color: var(--vo-ink-soft); }
.vo-card__title + .vo-card__body { margin-block-start: var(--vo-space-2); }
.vo-card__actions { display: flex; flex-wrap: wrap; gap: var(--vo-space-2); margin-block-start: var(--vo-space-4); }
.vo-card--interactive { cursor: pointer; transition: transform var(--vo-dur) var(--vo-ease), box-shadow var(--vo-dur) var(--vo-ease); }
.vo-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--vo-shadow-3); }
.vo-card--highlight { background: var(--vo-yellow-soft); border-color: var(--vo-yellow-line); }
.vo-card--rule { overflow: hidden; padding-block-start: calc(var(--vo-space-5) + 5px); }
.vo-card--rule::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 5px;
  background: var(--vo-tone, var(--vo-orange));
}
/* The brand book's celebration card: a hard edge in the tone colour toward the inline start. */
.vo-card--pop {
  margin-inline-start: var(--vo-pop-offset);
  margin-block-end: var(--vo-pop-offset);
  border: 2px solid var(--vo-tone, var(--vo-orange));
  box-shadow: calc(var(--vo-pop-offset) * -1) var(--vo-pop-offset) 0 var(--vo-tone, var(--vo-orange));
}
.vo-card--pop:dir(rtl) { box-shadow: var(--vo-pop-offset) var(--vo-pop-offset) 0 var(--vo-tone, var(--vo-orange)); }
.vo-card--pop .vo-card__title { color: var(--vo-tone-ink, var(--vo-orange-ink)); font-size: var(--vo-text-xl); }

.vo-bubble {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--vo-tone-soft, var(--vo-blue-soft));
  color: var(--vo-tone, var(--vo-blue));
}
.vo-bubble .vo-icon { inline-size: 24px; block-size: 24px; }
.vo-bubble--sm { inline-size: 36px; block-size: 36px; }
.vo-bubble--sm .vo-icon { inline-size: 18px; block-size: 18px; }
.vo-bubble--lg { inline-size: 64px; block-size: 64px; }
.vo-bubble--lg .vo-icon { inline-size: 30px; block-size: 30px; }

.vo-infolist {
  display: grid;
  gap: var(--vo-space-2);
  margin: 0;
  padding: var(--vo-space-3);
  list-style: none;
  background: var(--vo-surface);
  border-radius: var(--vo-radius-md);
  box-shadow: var(--vo-shadow-1);
}
.vo-inforow {
  display: flex;
  align-items: center;
  gap: var(--vo-space-3);
  padding: var(--vo-space-3) var(--vo-space-4);
  background: var(--vo-surface-sunken);
  border-radius: var(--vo-radius-sm);
}
.vo-inforow__icon { inline-size: 24px; block-size: 24px; color: var(--vo-blue); }
.vo-inforow__text { display: grid; gap: 2px; min-inline-size: 0; }
.vo-inforow__label { color: var(--vo-ink-mute); font-size: var(--vo-text-xs); }
.vo-inforow__value { color: var(--vo-ink); font-weight: var(--vo-weight-bold); overflow-wrap: anywhere; }

.vo-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--vo-space-2);
  min-block-size: 120px;
  padding: var(--vo-space-4) var(--vo-space-7);
  background: var(--vo-surface);
  border-radius: var(--vo-radius-md);
  box-shadow: var(--vo-shadow-1);
  color: var(--vo-ink);
  text-align: center;
  text-decoration: none;
  transition: transform var(--vo-dur) var(--vo-ease), box-shadow var(--vo-dur) var(--vo-ease);
}
.vo-tile:hover { transform: translateY(-2px); box-shadow: var(--vo-shadow-2); }
.vo-tile__label { font-weight: var(--vo-weight-bold); }
.vo-tile__chevron {
  position: absolute;
  inset-inline-end: var(--vo-space-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  color: var(--vo-ink-mute);
}

.vo-stats {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-5);
  text-align: center;
}
.vo-stat { flex: 1 1 10rem; padding-inline: var(--vo-space-3); }
@container (min-width: 36rem) {
  .vo-stat + .vo-stat { border-inline-start: 1px solid var(--vo-line); }
}
.vo-stat__value {
  display: block;
  color: var(--vo-orange);
  font-family: var(--vo-font-display);
  font-size: var(--vo-text-4xl);
  font-weight: var(--vo-display-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vo-stat__label { display: block; margin-block-start: var(--vo-space-2); color: var(--vo-ink-soft); font-weight: var(--vo-weight-medium); }

.vo-statpill {
  display: inline-flex;
  align-items: center;
  gap: var(--vo-space-2);
  padding-block: 2px;
  padding-inline: 2px var(--vo-space-3);
  border-radius: var(--vo-radius-pill);
  background: var(--vo-yellow-tint);
  color: var(--vo-ink);
  font-weight: var(--vo-weight-bold);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.vo-statpill__value { min-inline-size: 2ch; }
.vo-statpill__star { inline-size: 24px; block-size: 24px; color: var(--vo-gold); }

.vo-coin {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 26px;
  block-size: 26px;
  border-radius: 50%;
  background: var(--vo-orange);
  color: var(--vo-on-color);
  font-family: var(--vo-font-display);
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-display-weight);
  line-height: 1;
}

.vo-ranklist { display: grid; gap: var(--vo-space-3); margin: 0; padding: 0; list-style: none; }
.vo-rankrow {
  display: flex;
  align-items: center;
  gap: var(--vo-space-3);
  padding: var(--vo-space-3) var(--vo-space-4);
  background: var(--vo-surface);
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius-md);
  box-shadow: var(--vo-shadow-1);
}
.vo-rankrow--top { background: var(--vo-yellow-soft); border: 2px solid var(--vo-yellow-line); }
.vo-rankrow__main { display: grid; flex: 1 1 auto; gap: var(--vo-space-2); min-inline-size: 0; }
.vo-rankrow__name {
  overflow: hidden;
  color: var(--vo-ink);
  font-size: var(--vo-text-lg);
  font-weight: var(--vo-weight-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vo-rankrow__stats { display: flex; flex-wrap: wrap; gap: var(--vo-space-2); }

.vo-medal {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  background: var(--vo-blue-tint);
  box-shadow: 0 0 0 3px var(--vo-blue-soft);
  color: var(--vo-navy);
  font-family: var(--vo-font-display);
  font-size: var(--vo-text-xl);
  font-weight: var(--vo-display-weight);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.vo-medal--gold { background: var(--vo-yellow); box-shadow: 0 0 0 3px var(--vo-yellow-line); }
.vo-medal--silver { background: var(--vo-medal-silver); box-shadow: 0 0 0 3px var(--vo-medal-silver-ring); }
.vo-medal--bronze { background: var(--vo-medal-bronze); box-shadow: 0 0 0 3px var(--vo-medal-bronze-ring); color: var(--vo-on-color); }
.vo-medal__crown {
  position: absolute;
  inset-block-start: -15px;
  inset-inline: 0;
  margin-inline: auto;
  inline-size: 22px;
  block-size: 22px;
  color: var(--vo-gold);
}

.vo-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 48px;
  block-size: 48px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--vo-orange-soft);
  color: var(--vo-orange-ink);
  font-size: var(--vo-text-md);
  font-weight: var(--vo-weight-bold);
}
.vo-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.vo-avatar--sm { inline-size: 32px; block-size: 32px; font-size: var(--vo-text-xs); }
.vo-avatar--lg { inline-size: 72px; block-size: 72px; font-size: var(--vo-text-xl); }

.vo-meter { display: grid; gap: var(--vo-space-2); }
.vo-meter__head {
  display: flex;
  justify-content: space-between;
  gap: var(--vo-space-3);
  color: var(--vo-ink-soft);
  font-size: var(--vo-text-sm);
  font-weight: var(--vo-weight-bold);
}
.vo-progress {
  display: block;
  inline-size: 100%;
  block-size: 12px;
  overflow: hidden;
  border: 0;
  border-radius: var(--vo-radius-pill);
  background: var(--vo-tone-tint, var(--vo-blue-tint));
  color: var(--vo-tone, var(--vo-blue));
  -webkit-appearance: none;
  appearance: none;
}
.vo-progress::-webkit-progress-bar { background: var(--vo-tone-tint, var(--vo-blue-tint)); border-radius: var(--vo-radius-pill); }
.vo-progress::-webkit-progress-value { background: var(--vo-tone, var(--vo-blue)); border-radius: var(--vo-radius-pill); }
.vo-progress::-moz-progress-bar { background: var(--vo-tone, var(--vo-blue)); border-radius: var(--vo-radius-pill); }

.vo-steps {
  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--vo-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vo-step {
  position: relative;
  display: grid;
  flex: 1 1 12rem;
  align-content: start;
  justify-items: start;
  gap: var(--vo-space-2);
}
.vo-step__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  inline-size: 52px;
  block-size: 52px;
  border: 3px solid var(--vo-orange);
  border-radius: 50%;
  background: var(--vo-surface);
  box-shadow: var(--vo-shadow-2);
  color: var(--vo-orange-ink);
  font-family: var(--vo-font-display);
  font-size: var(--vo-text-xl);
  font-weight: var(--vo-display-weight);
}
.vo-step:nth-child(3n+2) .vo-step__num { border-color: var(--vo-yellow); color: var(--vo-navy); }
.vo-step:nth-child(3n) .vo-step__num { border-color: var(--vo-green); color: var(--vo-green-ink); }
.vo-step__title { margin-block-start: var(--vo-space-2); font-size: var(--vo-text-lg); color: var(--vo-navy); }
.vo-step__body { color: var(--vo-ink-soft); }
@container (min-width: 40rem) {
  .vo-step:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 25px;
    inset-inline-start: 64px;
    inset-inline-end: calc(var(--vo-space-5) * -1);
    block-size: 2px;
    border-radius: var(--vo-radius-pill);
    background: var(--vo-line-strong);
  }
}

.vo-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--vo-space-3);
  padding: var(--vo-space-4) var(--vo-space-5);
  border-inline-start: 5px solid var(--vo-tone, var(--vo-blue));
  border-radius: var(--vo-radius-md);
  background: var(--vo-tone-soft, var(--vo-blue-soft));
  color: var(--vo-ink);
}
.vo-alert__icon { inline-size: 24px; block-size: 24px; color: var(--vo-tone-ink, var(--vo-blue-ink)); }
.vo-alert__title { display: block; color: var(--vo-tone-ink, var(--vo-blue-ink)); font-weight: var(--vo-weight-bold); }
.vo-alert__body { color: var(--vo-ink-soft); }

.vo-empty {
  display: grid;
  justify-items: center;
  gap: var(--vo-space-3);
  padding: var(--vo-space-7) var(--vo-space-5);
  text-align: center;
}
.vo-empty__art { inline-size: 120px; block-size: auto; }
.vo-empty__title { font-size: var(--vo-text-xl); color: var(--vo-navy); }
.vo-empty__body { max-inline-size: 28rem; color: var(--vo-ink-soft); }
.vo-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--vo-space-2); margin-block-start: var(--vo-space-2); }

.vo-ticks { display: grid; gap: var(--vo-space-3); margin: 0; padding: 0; list-style: none; }
.vo-ticks > li { position: relative; padding-inline-start: 2rem; }
.vo-ticks > li::before {
  content: "\2713";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .15em;
  display: grid;
  place-items: center;
  inline-size: 22px;
  block-size: 22px;
  border-radius: 50%;
  background: var(--vo-green-tint);
  color: var(--vo-green-ink);
  font-size: var(--vo-text-xs);
  font-weight: var(--vo-weight-bold);
  line-height: 1;
}

.vo-accordion { display: grid; gap: var(--vo-space-3); }
.vo-accordion__item { background: var(--vo-surface); border: 1px solid var(--vo-line); border-radius: var(--vo-radius-md); }
.vo-accordion__q {
  display: flex;
  align-items: center;
  gap: var(--vo-space-3);
  min-block-size: var(--vo-tap);
  padding: var(--vo-space-4) var(--vo-space-5);
  color: var(--vo-ink);
  font-weight: var(--vo-weight-bold);
  list-style: none;
  cursor: pointer;
}
.vo-accordion__q::-webkit-details-marker { display: none; }
.vo-accordion__q::marker { content: ""; }
.vo-accordion__q::after {
  content: "+";
  margin-inline-start: auto;
  color: var(--vo-orange-deep);
  font-family: var(--vo-font-display);
  font-size: 1.5rem;
  line-height: 1;
}
.vo-accordion__item[open] .vo-accordion__q::after { content: "\2212"; }
.vo-accordion__a {
  margin-inline: var(--vo-space-5);
  margin-block-end: var(--vo-space-5);
  padding-inline-start: var(--vo-space-4);
  border-inline-start: 4px solid var(--vo-yellow);
  color: var(--vo-ink-soft);
}

.vo-field { display: grid; gap: var(--vo-space-2); }
.vo-field:where(fieldset) { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.vo-field__label { color: var(--vo-ink-soft); font-size: var(--vo-text-sm); font-weight: var(--vo-weight-bold); }
.vo-field__hint { color: var(--vo-ink-mute); font-size: var(--vo-text-xs); }
.vo-field__error { color: var(--vo-danger-ink); font-size: var(--vo-text-sm); font-weight: var(--vo-weight-medium); }
.vo-field__error:empty { display: none; }

.vo-input, .vo-select, .vo-textarea {
  display: block;
  inline-size: 100%;
  min-block-size: var(--vo-tap);
  margin: 0;
  padding: var(--vo-space-2) var(--vo-space-3);
  border: 1.5px solid var(--vo-field-line);
  border-radius: var(--vo-radius-sm);
  background: var(--vo-surface);
  color: var(--vo-ink);
  font: inherit;
  line-height: 1.4;
  transition: border-color var(--vo-dur-fast) var(--vo-ease), box-shadow var(--vo-dur-fast) var(--vo-ease);
}
.vo-textarea { min-block-size: 96px; resize: vertical; }
.vo-input::placeholder, .vo-textarea::placeholder { color: var(--vo-ink-mute); opacity: 1; }
.vo-input:focus, .vo-select:focus, .vo-textarea:focus {
  outline: 2px solid transparent;
  border-color: var(--vo-focus);
  box-shadow: 0 0 0 4px var(--vo-blue-tint);
}
.vo-input[aria-invalid="true"], .vo-select[aria-invalid="true"], .vo-textarea[aria-invalid="true"] { border-color: var(--vo-danger); }
.vo-input[aria-invalid="true"]:focus, .vo-select[aria-invalid="true"]:focus, .vo-textarea[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px var(--vo-danger-tint); }
.vo-input:disabled, .vo-select:disabled, .vo-textarea:disabled { background: var(--vo-surface-sunken); color: var(--vo-ink-mute); cursor: not-allowed; }

.vo-check {
  display: inline-flex;
  align-items: center;
  gap: var(--vo-space-2);
  min-block-size: var(--vo-tap);
  color: var(--vo-ink);
  cursor: pointer;
}
.vo-check input { flex: none; inline-size: 20px; block-size: 20px; margin: 0; accent-color: var(--vo-orange-deep); }

/* Inline-size containment keeps a wide table from widening grid or flex ancestors; it scrolls inside its frame instead. */
.vo-table-wrap {
  contain: inline-size;
  overflow-x: auto;
  background: var(--vo-surface);
  border: 1px solid var(--vo-line);
  border-radius: var(--vo-radius-md);
  box-shadow: var(--vo-shadow-1);
}
.vo-table { inline-size: 100%; border-collapse: collapse; font-size: var(--vo-text-sm); }
.vo-table th, .vo-table td {
  padding: var(--vo-space-3) var(--vo-space-4);
  border-block-end: 1px solid var(--vo-line);
  text-align: start;
  vertical-align: middle;
}
.vo-table th { background: var(--vo-surface-sunken); color: var(--vo-ink-soft); font-weight: var(--vo-weight-bold); white-space: nowrap; }
.vo-table tbody tr:last-child td { border-block-end: 0; }
.vo-table tbody tr:hover td { background: var(--vo-blue-soft); }
.vo-table .vo-table__num { text-align: end; font-variant-numeric: tabular-nums; }