.lab-home {
  --home-accent: #28533c;
  --home-surface: #edf5eb;
  --home-ink: #192e23;
  --home-focus: #783900;
  max-width: 72rem;
  margin-inline: auto;
  padding: clamp(1rem, 4vw, 3rem);
  border-radius: 1rem;
  background: var(--home-surface);
  color: var(--home-ink);
  overflow-wrap: anywhere;
}

.lab-home--numeracy {
  --home-accent: #1e507a;
  --home-surface: #eaf3fc;
  --home-ink: #172f46;
}

.lab-home--differentiation {
  --home-accent: #753e23;
  --home-surface: #fbefe5;
  --home-ink: #42291f;
}

:is([data-theme="dark"], [data-wl-theme="dark"], body.dark, body.dark-mode) .lab-home {
  --home-focus: #ffcf91;
  --home-ink: #f6f7f3;
  --home-surface: #23372a;
  --home-accent: #bcdfb5;
}

:is([data-theme="dark"], body.dark, body.dark-mode) .lab-home--numeracy {
  --home-surface: #1e3246;
  --home-accent: #bfdfff;
}

:is([data-theme="dark"], body.dark) .lab-home--differentiation {
  --home-surface: #3c2a24;
  --home-accent: #ffc9a5;
}

:is([data-wl-contrast="high"], body.access-high-contrast, body.high-contrast) .lab-home {
  --home-surface: #000;
  --home-ink: #fff;
  --home-accent: #ffeb75;
  --home-focus: #ffeb75;
}

.lab-home:is(#my-v64-home, #my-num-home, #differentiation-home) {
  background: var(--home-surface);
  color: var(--home-ink);
}

.lab-home:is(#my-v64-home, #my-num-home, #differentiation-home) :is(h1, h2, h3, p, a, article) {
  color: inherit;
}

.lab-home:is(#my-v64-home, #my-num-home, #differentiation-home) article {
  border-top: 4px solid var(--home-accent);
  background: transparent;
}

.lab-home :is(.home-actions, .my-num-actions, .actions) {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.lab-home:is(#my-v64-home, #my-num-home, #differentiation-home) a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.lab-home:is(#my-v64-home, #my-num-home, #differentiation-home) :is(.home-actions, .my-num-actions, .actions) a {
  padding: .65em 1em;
  border: 1px solid var(--home-accent);
  border-radius: .6rem;
  background: transparent;
}

.lab-home:is(#my-v64-home, #my-num-home, #differentiation-home) :is(.home-actions, .my-num-actions, .actions) a:first-child {
  background: var(--home-accent);
  color: var(--home-surface);
}

.lab-home a:focus-visible {
  outline: 3px solid var(--home-focus);
  outline-offset: 3px;
}

.lab-account-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline: .5rem;
  padding: .4rem .8rem;
  border: 1px solid currentColor;
  border-radius: .6rem;
  color: inherit;
  text-decoration: underline;
}

.brand-mark.differentiation-mark {
  background: #753e23;
  color: #fff3e9;
}

/* The legacy welcome markup arrives before the public home renderer. */
#page-welcome:not(:has(#my-num-home)) > *,
#my-num-legacy-views {
  display: none !important;
}

@media (max-width: 650px) {
  .lab-home :is(.home-actions, .my-num-actions, .actions) a {
    width: 100%;
    justify-content: flex-start;
  }
}