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

html {
  font-size: calc(100% * 17 / 16);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html {
    font: -apple-system-body;
  }
}

.wds-page {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font: var(--wds-type-body);
  color: var(--wds-foreground);
  background-color: var(--wds-canvas);
  -webkit-font-smoothing: antialiased;
}

.wds-content {
  display: flex;
  flex-direction: column;
  gap: var(--wds-card-spacing);
  width: 100%;
  max-width: calc(var(--wds-readable-width) + 2 * var(--wds-page-margin));
  margin: 0 auto;
  padding: var(--wds-space-8) var(--wds-page-margin) var(--wds-page-bottom-padding);
}

.wds-page-name {
  margin: 0;
  font: var(--wds-type-page-name);
  color: var(--wds-foreground);
}

.wds-card {
  display: flex;
  flex-direction: column;
  gap: var(--wds-related-content-roomy-spacing);
  margin: 0;
  padding: var(--wds-space-20) var(--wds-card-content-inset);
  background-color: var(--wds-card);
  border-radius: var(--wds-card-corner-radius);
}

.wds-card-heading {
  margin: 0;
  font: var(--wds-type-heading-medium);
  color: var(--wds-foreground);
}

.wds-points {
  display: flex;
  flex-direction: column;
  gap: var(--wds-related-content-spacing);
  margin: 0;
  padding: 0;
  list-style: none;
  font: var(--wds-type-body-medium);
  color: var(--wds-secondary-foreground);
}

.wds-points > * {
  margin: 0;
}

.wds-points--primary {
  color: var(--wds-foreground);
}

.wds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wds-related-content-spacing);
  width: 100%;
  max-width: calc(var(--wds-readable-width) + 2 * var(--wds-page-margin));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--wds-page-margin);
  text-align: center;
}

.wds-empty__title {
  margin: 0;
  font: var(--wds-type-subheading);
  color: var(--wds-foreground);
}

.wds-empty__description {
  margin: 0;
  font: var(--wds-type-body);
  color: var(--wds-secondary-foreground);
}

.wds-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--wds-space-24);
  width: 100%;
  max-width: calc(var(--wds-readable-width) + 2 * var(--wds-page-margin));
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: var(--wds-page-margin);
  text-align: center;
}

.wds-intro__title {
  margin: 0;
  font: var(--wds-type-display-medium);
  color: var(--wds-foreground);
}

.wds-intro__description {
  margin: 0;
  font: var(--wds-type-body-medium);
  color: var(--wds-secondary-foreground);
}

.wds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--wds-minimum-touch-target);
  padding: var(--wds-space-12) var(--wds-space-20);
  border: none;
  border-radius: var(--wds-corner-radius-pill);
  background-color: var(--wds-accent);
  color: var(--wds-on-accent);
  font: var(--wds-type-subheading);
  text-decoration: none;
  cursor: pointer;
}

.wds-button:focus-visible {
  outline: 2px solid var(--wds-foreground);
  outline-offset: 2px;
}