:root {
  --brand-jasper: #092e2a;
  --brand-white: #ffffff;
  --brand-jungle: #104d47;
  --brand-lime: #b1ff85;
  --brand-light-grey: #fafafa;
  --brand-grey: #dcdcdc;
  --brand-dark-grey: #868686;
  --brand-greenblack: #072825;
  --brand-quarry: #088772;
  --brand-kiwi: #59d892;
  --brand-greenbelt: #00c4a0;
  --brand-ladybird: #00bab2;
  --brand-bluebonnet: #3182c7;
  --brand-salvia: #7763dc;

  --navy: var(--brand-jasper);
  --ink: var(--brand-jasper);
  --muted: var(--brand-jungle);
  --green: var(--brand-quarry);
  --mint: var(--brand-lime);
  --line: var(--brand-grey);
  --paper: var(--brand-light-grey);
  --accent: var(--brand-salvia);
}

body {
  color: var(--brand-jasper);
  background: var(--brand-light-grey);
}

a {
  color: var(--brand-jungle);
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline-color: var(--brand-quarry);
}

#sidebar {
  background: var(--brand-jasper);
  color: var(--brand-light-grey);
}
.brand {
  color: var(--brand-white);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(225px, 100%);
  margin-left: auto;
  margin-right: auto;
  overflow: visible;
}
.brand img,
.brand-logo {
  display: block;
  width: 100% !important;
  max-width: 225px;
  height: auto;
  object-fit: contain;
  flex: 0 0 auto;
}
.brand .university {
  width: 100%;
  margin-top: 14px;
  padding-left: 4px;
  text-align: center;
}
.brand-mark {
  border-color: var(--brand-quarry);
  color: var(--brand-lime);
}
.course-label,
#sidebar .eyebrow {
  color: var(--brand-kiwi);
}
.sidebar-sub,
.progress-label,
.group-label,
.sidebar-foot {
  color: var(--brand-grey);
}
progress,
progress::-webkit-progress-bar {
  background: var(--brand-jungle);
}
progress::-webkit-progress-value {
  background: var(--brand-lime);
}
#lessons {
  scrollbar-color: var(--brand-quarry) transparent;
}
.lesson-link {
  color: var(--brand-light-grey);
}
.lesson-link:hover {
  background: var(--brand-jungle);
}
.lesson-link.active {
  background: var(--brand-lime);
  color: var(--brand-jasper);
}
.number {
  border-color: var(--brand-quarry);
}
.active .number {
  background: var(--brand-jasper);
  color: var(--brand-lime);
  border-color: var(--brand-jasper);
}
.done .number {
  background: var(--brand-light-grey);
  color: var(--brand-jasper);
  border-color: var(--brand-quarry);
}
.sidebar-foot {
  border-color: var(--brand-jungle);
}

.topbar,
.screen-card,
.coach,
.howto {
  background: var(--brand-white);
}
.slash {
  color: var(--brand-dark-grey);
}
.eyebrow,
.step-count,
.tab.active {
  color: var(--brand-jungle);
}
.duration {
  color: var(--brand-jasper);
  background: color-mix(in srgb, var(--brand-kiwi) 22%, var(--brand-white));
}
.tab.active {
  border-color: var(--brand-quarry);
}
.screen-stage {
  background: var(--brand-grey);
}
.hotspot {
  border-color: var(--brand-salvia);
  background: color-mix(in srgb, var(--brand-salvia) 18%, transparent);
  box-shadow: 0 0 0 4px #ffffffb8;
}
.hotspot:hover {
  background: color-mix(in srgb, var(--brand-salvia) 30%, transparent);
}
.hotspot span {
  background: var(--brand-jasper);
  color: var(--brand-lime);
}
.hint {
  background: var(--brand-light-grey);
  border-color: var(--brand-kiwi);
}
.hint strong {
  color: var(--brand-jungle);
}
.primary {
  border-color: var(--brand-lime);
  background: var(--brand-lime);
  color: var(--brand-jasper);
}
.primary:hover {
  border-color: var(--brand-kiwi);
  background: var(--brand-kiwi);
}
.secondary {
  border-color: var(--brand-grey);
  color: var(--brand-jasper);
  background: var(--brand-white);
}
.secondary:hover {
  background: var(--brand-light-grey);
}
.dot {
  background: var(--brand-grey);
}
.dot.active {
  background: var(--brand-quarry);
}
.dot.checked {
  background: var(--brand-greenbelt);
}
.video-wrap {
  background: var(--brand-jasper);
  color: var(--brand-light-grey);
}
.option:has(input:checked) {
  background: color-mix(
    in srgb,
    var(--brand-greenbelt) 13%,
    var(--brand-white)
  );
  border-color: var(--brand-quarry);
}
.option input {
  accent-color: var(--brand-quarry);
}
.feedback {
  background: color-mix(in srgb, var(--brand-kiwi) 20%, var(--brand-white));
}
.feedback.error {
  background: color-mix(in srgb, var(--brand-salvia) 16%, var(--brand-white));
}
.complete {
  background: color-mix(in srgb, var(--brand-lime) 30%, var(--brand-white));
  border-color: var(--brand-kiwi);
}
dialog::backdrop {
  background: #072825c7;
}
.badge {
  background: color-mix(
    in srgb,
    var(--brand-greenbelt) 16%,
    var(--brand-white)
  );
  color: var(--brand-jasper);
}
.storage-warning {
  color: var(--brand-jasper);
  background: color-mix(in srgb, var(--brand-salvia) 16%, var(--brand-white));
}

@media (max-width: 760px) {
  body.menu-open #sidebar {
    box-shadow: 10px 0 30px #07282566;
  }
}