:root {
  --brand-mint: #27F5CC;
  --brand-paper: #F5F5F5;
  --brand-blue: #004069;
  --ink: var(--brand-blue);
  --muted: rgb(0 64 105 / 72%);
  --faint: rgb(0 64 105 / 52%);
  --line: rgb(0 64 105 / 18%);
  --surface: var(--brand-paper);
  --canvas: var(--brand-paper);
  --green: var(--brand-blue);
  --green-dark: var(--brand-blue);
  --mint: var(--brand-mint);
  --mint-soft: rgb(39 245 204 / 18%);
  --coral: var(--brand-mint);
  --coral-soft: rgb(39 245 204 / 18%);
  --yellow: var(--brand-mint);
  --yellow-soft: rgb(39 245 204 / 18%);
  --blue: var(--brand-blue);
  --blue-soft: rgb(0 64 105 / 12%);
  --shadow: 0 16px 45px rgb(0 64 105 / 10%);
  --signal-black: var(--brand-blue);
  --signal-paper: var(--brand-paper);
  --signal-white: var(--brand-paper);
  --signal-yellow: var(--brand-mint);
  --signal-red: var(--brand-blue);
  --signal-cyan: var(--brand-mint);
  --signal-blue: var(--brand-blue);
  --signal-muted: rgb(0 64 105 / 72%);
  --signal-line: rgb(0 64 105 / 20%);
  --landing-ink: var(--brand-blue);
  --landing-paper: var(--brand-paper);
  --landing-cream: var(--brand-paper);
  --landing-green: var(--brand-blue);
  --landing-green-bright: var(--brand-mint);
  --landing-red: var(--brand-blue);
  --landing-yellow: var(--brand-mint);
  --landing-line: rgb(0 64 105 / 20%);
}

html,
body {
  color: var(--brand-blue);
  background: var(--brand-paper);
}

body {
  background-image: none;
}

::selection {
  color: var(--brand-blue);
  background: var(--brand-mint);
}

:focus-visible {
  outline-color: var(--brand-mint) !important;
}

.language-picker {
  display: inline-flex;
  min-width: 126px;
  min-height: 38px;
  padding: 0 10px;
  align-items: center;
  gap: 7px;
  color: var(--brand-blue);
  background: var(--brand-paper);
  border: 1px solid currentColor;
}

.language-picker > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.language-picker select {
  width: 100%;
  color: inherit;
  font: 700 10px 'DM Sans', sans-serif;
  letter-spacing: 0;
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.language-picker option {
  color: var(--brand-blue);
  background: var(--brand-paper);
}

.signal-language {
  min-width: 112px;
  color: var(--brand-paper);
  background: transparent;
  border-color: rgb(245 245 245 / 55%);
}

.signal-header.is-scrolled .signal-language {
  color: var(--brand-blue);
  border-color: var(--brand-blue);
}

.mobile-language {
  display: none;
}

.auth-language {
  align-self: flex-end;
  margin-bottom: 24px;
}

.password-field {
  position: relative;
  display: block;
}

.password-field input {
  width: 100%;
  padding-right: 48px !important;
}

.password-field button {
  position: absolute;
  top: 50%;
  right: 5px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--brand-blue);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transform: translateY(-50%);
  place-items: center;
}

.password-field button:hover {
  background: rgb(39 245 204 / 18%);
}

.app-language {
  min-width: 116px;
}

.sidebar,
.media-player,
.login-visual::after {
  background-color: var(--brand-blue);
}

.primary-button,
.register-submit,
.light-button,
.player-play,
.studio-switch {
  color: var(--brand-blue) !important;
  background: var(--brand-mint) !important;
  border-color: var(--brand-mint) !important;
}

.secondary-button,
.panel,
.music-card,
.event-card,
.modal,
.login-panel,
.register-panel {
  background-color: var(--brand-paper);
  border-color: var(--line);
}

.stat-card.coral,
.stat-card.yellow,
.stat-card.blue,
.stat-card.mint {
  color: var(--brand-blue);
}

.stat-card .stat-icon,
.demo-pill,
.status.lover,
.info-banner {
  color: var(--brand-blue);
  background: rgb(39 245 204 / 18%);
}

.network-state.is-slow i,
.network-state.is-offline i {
  background: var(--brand-mint);
  box-shadow: 0 0 0 5px rgb(39 245 204 / 15%);
}

.signal-now-cover,
.pulse-cover {
  background: var(--brand-paper);
}

.pulse-cover i {
  background: rgb(39 245 204 / 92%);
}

.access-chip.is-free {
  color: var(--brand-blue);
  background: var(--brand-mint);
  border-color: var(--brand-mint);
}

.new-cover,
.video-stage video {
  background: var(--brand-blue);
}

.install-prompt {
  width: min(480px, calc(100vw - 30px));
  padding: 34px;
  overflow: visible;
  color: var(--brand-blue);
  font-family: 'DM Sans', sans-serif;
  background: var(--brand-paper);
  border: 2px solid var(--brand-blue);
  border-radius: 6px;
  box-shadow: 12px 12px 0 var(--brand-mint);
}

.install-prompt::backdrop {
  background: rgb(0 64 105 / 82%);
  backdrop-filter: blur(9px);
}

.install-prompt[open] {
  animation: install-prompt-in 260ms cubic-bezier(.2,.8,.2,1) both;
}

.install-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--brand-blue);
  background: transparent;
  border: 1px solid rgb(0 64 105 / 20%);
  border-radius: 50%;
  cursor: pointer;
  place-items: center;
}

.install-mark {
  display: grid;
  width: 64px;
  height: 64px;
  margin-bottom: 28px;
  color: var(--brand-mint);
  background: var(--brand-blue);
  border-radius: 6px;
  place-items: center;
}

.install-prompt > span {
  color: var(--brand-blue);
  font: 700 9px 'DM Sans', sans-serif;
  text-transform: uppercase;
}

.install-prompt h2 {
  max-width: 370px;
  margin: 10px 0 14px;
  font-size: clamp(42px, 7vw, 64px);
  line-height: .88;
  text-transform: uppercase;
}

.install-prompt > p {
  max-width: 390px;
  margin: 0;
  color: rgb(0 64 105 / 72%);
  font-size: 14px;
  line-height: 1.6;
}

.install-actions {
  display: grid;
  margin-top: 28px;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.install-actions button {
  min-height: 52px;
  padding: 0 17px;
  font: 700 9px 'DM Sans', sans-serif;
  text-transform: uppercase;
  cursor: pointer;
}

.install-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: var(--brand-blue);
  background: var(--brand-mint);
  border: 1px solid var(--brand-blue);
}

.install-later {
  color: var(--brand-blue);
  background: transparent;
  border: 1px solid rgb(0 64 105 / 20%);
}

.install-actions button:hover,
.install-actions button:focus-visible,
.install-close:hover,
.install-close:focus-visible {
  color: var(--brand-paper);
  background: var(--brand-blue);
  outline: 0;
}

.free-release:nth-child(3) {
  color: var(--brand-blue);
  background: var(--brand-paper);
}

.shared-section {
  color: var(--brand-paper);
  background: var(--brand-blue);
}

.shared-copy > span,
.shared-rank small,
.shared-rank strong {
  color: var(--brand-paper);
}

.shared-rank:hover small,
.shared-rank:hover strong,
.shared-rank:focus-visible small,
.shared-rank:focus-visible strong {
  color: var(--brand-blue);
}

.shared-board,
.shared-rank {
  border-color: rgb(245 245 245 / 38%);
}

.shared-feature-play {
  color: var(--brand-blue) !important;
  background: var(--brand-mint);
}

.is-navigating {
  cursor: progress;
}

.is-navigating::after {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  content: '';
  background: var(--brand-mint);
  transform-origin: left;
  animation: route-progress 800ms ease-in-out infinite alternate;
}

@keyframes route-progress {
  from { transform: scaleX(.18); }
  to { transform: scaleX(.88); }
}

@keyframes install-prompt-in {
  from { opacity: 0; transform: translateY(22px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 900px) {
  .signal-language { display: none; }
  .mobile-language { display: inline-flex; width: 100%; margin-bottom: 8px; grid-column: 1 / -1; }
  .app-language { min-width: 106px; }
}

@media (max-width: 560px) {
  .app-language { min-width: 96px; padding: 0 6px; }
  .app-language select { font-size: 9px; }
  .auth-language { margin-bottom: 16px; }
  .install-prompt { padding: 26px 20px 22px; box-shadow: 7px 7px 0 var(--brand-mint); }
  .install-mark { width: 54px; height: 54px; margin-bottom: 22px; }
  .install-prompt h2 { font-size: 42px; }
  .install-actions { grid-template-columns: 1fr; }
}