:root {
  color-scheme: light;
  --theme-bg: #ffffff;
  --theme-surface: #ffffff;
  --theme-text: #161616;
  --theme-muted: #6b6b6b;
  --theme-subtle: #9a9a9a;
  --theme-line: #dedede;
  --theme-accent: #be1e2d;
  --theme-control: #d3d3d3;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --theme-bg: #101010;
  --theme-surface: #161616;
  --theme-text: #f4f4f1;
  --theme-muted: #b2b2ad;
  --theme-subtle: #8a8a84;
  --theme-line: #353535;
  --theme-accent: #ef5261;
  --theme-control: #4c4c4c;
  --ink: #f4f4f1;
  --muted: #b2b2ad;
  --accent: #ef5261;
  --line: #353535;
}

html,
body {
  background-color: var(--theme-bg) !important;
  color: var(--theme-text);
}

html.theme-page-loading body {
  opacity: 0 !important;
}

html.theme-page-ready body {
  opacity: 1 !important;
  transition:
    opacity 1s ease-out,
    background-color 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}

body,
.navbar,
.dropdown-menu,
input,
textarea,
select {
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

.navbar,
.navbar.bg-white,
.dropdown-menu {
  background-color: var(--theme-surface) !important;
  border-color: var(--theme-line) !important;
}

.navbar-light .navbar-brand,
.navbar-light .navbar-nav .nav-link,
.dropdown-item {
  color: var(--theme-text) !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .active > .nav-link,
.dropdown-item:hover,
.dropdown-item:focus {
  color: var(--theme-accent) !important;
}

html[data-theme="dark"] #logo {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .navbar-toggler {
  border-color: var(--theme-line);
}

html[data-theme="dark"] .navbar-toggler-icon {
  filter: invert(1);
}

html[data-theme="dark"] hr {
  border-color: var(--theme-line);
}

html[data-theme="dark"] [style*="color: #c8c8c8"],
html[data-theme="dark"] [style*="color:#c8c8c8"],
html[data-theme="dark"] [style*="color: #888888"],
html[data-theme="dark"] [style*="color:#888888"] {
  color: var(--theme-subtle) !important;
}

html[data-theme="dark"] [style*="background:#FFFFFF"],
html[data-theme="dark"] [style*="background: #FFFFFF"],
html[data-theme="dark"] [style*="background:#ffffff"],
html[data-theme="dark"] [style*="background: #ffffff"],
html[data-theme="dark"] [style*="background:#FFF"],
html[data-theme="dark"] [style*="background: #FFF"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"] {
  background: var(--theme-bg) !important;
}

html[data-custom-background] [style*="background:#FFFFFF"],
html[data-custom-background] [style*="background: #FFFFFF"],
html[data-custom-background] [style*="background:#ffffff"],
html[data-custom-background] [style*="background: #ffffff"],
html[data-custom-background] [style*="background:#FFF"],
html[data-custom-background] [style*="background: #FFF"],
html[data-custom-background] [style*="background:white"],
html[data-custom-background] [style*="background: white"] {
  background: var(--theme-bg) !important;
}

html[data-custom-text] [style*="color: #c8c8c8"],
html[data-custom-text] [style*="color:#c8c8c8"],
html[data-custom-text] [style*="color: #888888"],
html[data-custom-text] [style*="color:#888888"] {
  color: var(--theme-text) !important;
}

html[data-theme="dark"] #myBtnContainer {
  border-color: var(--theme-line);
  background: var(--theme-surface) !important;
  box-shadow: 0 1px 0 var(--theme-line) !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  border-color: var(--theme-line);
  background-color: var(--theme-surface);
  color: var(--theme-text);
}

html[data-theme="dark"] button:not(.theme-switch):not(.homepage-hero__button--primary),
html[data-theme="dark"] .btn:not(.active) {
  border-color: #555 !important;
  background-color: #1c1c1c !important;
  color: var(--theme-text) !important;
}

html[data-theme="dark"] .homepage-hero__button--secondary {
  border-color: var(--theme-text);
  color: var(--theme-text);
}

html[data-theme="dark"] .homepage-hero__button--secondary:hover,
html[data-theme="dark"] .homepage-hero__button--secondary:focus {
  background: var(--theme-text);
  color: var(--theme-bg);
}

.theme-switch-item {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}

.app-store-nav-item {
  display: flex;
  align-items: center;
  margin-left: 0.65rem;
}

.navbar-light .navbar-nav .app-store-nav-link {
  padding: 0.55rem 0.9rem !important;
  border: 1px solid var(--theme-accent);
  border-radius: 12px;
  background: var(--theme-accent);
  color: #ffffff !important;
  font-weight: 600;
  line-height: 1;
}

.navbar-light .navbar-nav .app-store-nav-link:hover,
.navbar-light .navbar-nav .app-store-nav-link:focus,
.navbar-light .navbar-nav .active > .app-store-nav-link {
  color: #ffffff !important;
  opacity: 0.82;
}

.tint-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  width: 100%;
  margin: 2rem auto 0;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--theme-line);
  color: var(--theme-muted);
  font-family: "Montserrat", sans-serif;
}

.tint-controls__title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.tint-control-field {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  color: inherit;
  font-size: 0.72rem;
  line-height: 1;
}

.tint-control {
  width: 28px;
  height: 28px;
  padding: 2px;
  border: 1px solid var(--theme-line);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.tint-control::-webkit-color-swatch-wrapper {
  padding: 0;
}

.tint-control::-webkit-color-swatch {
  border: 0;
  border-radius: 50%;
}

.tint-control::-moz-color-swatch {
  border: 0;
  border-radius: 50%;
}

.tint-control:hover,
.tint-control:focus,
.tint-control:active {
  scale: 1 !important;
  transform: none !important;
}

.tint-reset {
  min-height: 30px;
  padding: 0.35rem 0.75rem !important;
  border: 1px solid var(--theme-line) !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: var(--theme-text) !important;
  font-family: "Montserrat", sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  cursor: pointer;
}

.tint-reset:hover,
.tint-reset:focus,
.tint-reset:active {
  border-color: var(--theme-text) !important;
  background: transparent !important;
  color: var(--theme-text) !important;
  scale: 1 !important;
  transform: none !important;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--theme-text) !important;
  font: inherit;
  cursor: pointer;
}

.theme-switch,
.theme-switch:hover,
.theme-switch:focus,
.theme-switch:active {
  scale: 1 !important;
  transform: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.theme-switch__track {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 28px;
  flex: 0 0 auto;
  border: 1px solid var(--theme-line);
  border-radius: 999px;
  background: var(--theme-control);
  transition: background-color 180ms ease, border-color 180ms ease;
}

.theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: 50%;
  background: #ffffff;
  color: #161616;
  font-family: Arial, sans-serif;
  font-size: 0.72rem;
  line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.32);
  transition: transform 180ms ease;
}

.theme-switch__thumb::before {
  content: "☾";
}

.theme-switch[aria-checked="true"] .theme-switch__track {
  border-color: var(--theme-accent);
  background: var(--theme-accent);
}

.theme-switch[aria-checked="true"] .theme-switch__thumb {
  transform: translateX(20px);
}

.theme-switch[aria-checked="true"] .theme-switch__thumb::before {
  content: "☀";
}

.project-section-anchor {
  scroll-margin-top: 7rem;
}

.project-side-nav {
  z-index: 98;
  color: var(--theme-text);
  font-family: "Montserrat", sans-serif;
}

.project-side-nav__title {
  margin: 0 0 0.8rem;
  color: var(--theme-muted);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.project-side-nav__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-side-nav__list li {
  margin: 0;
}

.project-side-nav__list a {
  display: block;
  padding: 0.42rem 0.65rem;
  border-left: 2px solid transparent;
  color: var(--theme-muted);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease;
}

.project-side-nav__list a:hover,
.project-side-nav__list a:focus,
.project-side-nav__list a.active {
  border-color: var(--theme-accent);
  color: var(--theme-text);
}

.project-side-nav__utility--first {
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--theme-line);
}

.project-side-nav__utility a {
  color: var(--theme-accent);
  font-weight: 600;
}

.legacy-project-side-nav {
  display: none !important;
}

.project-main-content {
  width: 100% !important;
  max-width: 100% !important;
}

@media (min-width: 992px) {
  .project-side-nav {
    position: fixed;
    top: 7rem;
    left: max(1rem, calc((100vw - 1320px) / 2 + 1rem));
    width: 175px;
    max-height: calc(100vh - 8.5rem);
    overflow-y: auto;
    padding: 1rem 0;
  }

  body.project-detail-page > .container {
    max-width: 1320px;
    padding-left: 220px;
  }
}

@media (max-width: 991.98px) {
  .project-side-nav {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
    overflow-x: auto;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--theme-line);
    border-bottom: 1px solid var(--theme-line);
    background: var(--theme-surface);
    scrollbar-width: none;
  }

  .project-side-nav::-webkit-scrollbar {
    display: none;
  }

  .project-side-nav__title {
    display: none;
  }

  .project-side-nav__list {
    display: flex;
    min-width: max-content;
    align-items: center;
  }

  .project-side-nav__list a {
    padding: 0.45rem 0.7rem;
    border-bottom: 2px solid transparent;
    border-left: 0;
    white-space: nowrap;
  }

  .project-side-nav__list a:hover,
  .project-side-nav__list a:focus,
  .project-side-nav__list a.active {
    border-bottom-color: var(--theme-accent);
  }

  .project-side-nav__utility--first {
    margin-top: 0;
    margin-left: 0.5rem;
    padding-top: 0;
    padding-left: 0.5rem;
    border-top: 0;
    border-left: 1px solid var(--theme-line);
  }

  .app-store-nav-item {
    align-items: flex-start;
    margin: 0.5rem 0 0;
  }

  .theme-switch-item {
    margin: 0.5rem 0 0;
  }

  .tint-controls {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.theme-page-ready body,
  body,
  .navbar,
  .dropdown-menu,
  input,
  textarea,
  select,
  .theme-switch__track,
  .theme-switch__thumb {
    transition: none;
  }
}