:root {
  --footer-ui-scale: 1;
}

.viewport-center-anchor {
  --viewport-center-local-x: 50%;
}

.header-toolbar {
  position: relative;
  min-height: 46px;
}

.toolbar-group-left {
  grid-column: 1;
}

.toolbar-group-center.viewport-center-anchor {
  position: absolute;
  top: 50%;
  left: var(--viewport-center-local-x);
  transform: translate(-50%, -50%);
  width: max-content;
  align-items: center;
  text-align: center;
  pointer-events: none;
}

.toolbar-group-right {
  grid-column: 3;
  justify-self: end;
  margin-left: auto;
}

.hero-brand h2.viewport-center-anchor {
  position: absolute;
  left: var(--viewport-center-local-x);
  transform: translateX(-50%);
}

.resize-handle::before {
  left: var(--viewport-center-local-x, 50%);
}

.app-footer {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  gap: clamp(0.3rem, calc(0.55rem * var(--footer-ui-scale)), 0.55rem);
  padding: clamp(0.62rem, calc(1rem * var(--footer-ui-scale)), 1.1rem)
    clamp(0.64rem, calc(0.95rem * var(--footer-ui-scale)), 0.95rem)
    clamp(0.42rem, calc(0.7rem * var(--footer-ui-scale)), 0.7rem);
}

.app-footer.is-collapsed {
  overflow: hidden;
  scrollbar-gutter: auto;
  scrollbar-width: none;
  gap: 0.06rem;
  padding: 0.12rem 0.5rem 0.06rem;
}

.app-footer.is-collapsed::-webkit-scrollbar {
  display: none;
}

.app-footer.is-collapsed .footer-layout-grid,
.app-footer.is-collapsed .footer-col {
  overflow: hidden;
}

.app-footer.is-collapsed .footer-center-controls {
  flex-wrap: nowrap;
  gap: calc(0.44rem * var(--footer-ui-scale));
}

.app-footer.is-collapsed .footer-btn {
  width: clamp(30px, calc(42px * var(--footer-ui-scale)), 40px);
  height: clamp(30px, calc(42px * var(--footer-ui-scale)), 40px);
  font-size: clamp(0.82rem, calc(1rem * var(--footer-ui-scale)), 0.98rem);
}

.app-footer.is-collapsed .footer-btn.is-nav {
  width: clamp(34px, calc(50px * var(--footer-ui-scale)), 46px);
  height: clamp(34px, calc(50px * var(--footer-ui-scale)), 46px);
  font-size: clamp(0.92rem, calc(1.12rem * var(--footer-ui-scale)), 1.06rem);
}

.app-footer.is-collapsed .footer-speed-toggle {
  width: clamp(30px, calc(42px * var(--footer-ui-scale)), 40px);
  height: clamp(30px, calc(42px * var(--footer-ui-scale)), 40px);
  min-width: clamp(30px, calc(42px * var(--footer-ui-scale)), 40px);
}

.app-footer.is-collapsed .footer-btn.is-primary {
  width: clamp(38px, calc(60px * var(--footer-ui-scale)), 54px);
  height: clamp(38px, calc(60px * var(--footer-ui-scale)), 54px);
  font-size: clamp(1.04rem, calc(1.28rem * var(--footer-ui-scale)), 1.2rem);
}

.footer-main-row {
  grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
  gap: clamp(0.45rem, calc(0.8rem * var(--footer-ui-scale)), 0.8rem);
}

.footer-left-panel {
  gap: clamp(0.4rem, calc(0.6rem * var(--footer-ui-scale)), 0.6rem);
}

.footer-album-art {
  width: clamp(42px, calc(56px * var(--footer-ui-scale)), 56px);
  height: clamp(42px, calc(56px * var(--footer-ui-scale)), 56px);
  font-size: clamp(0.9rem, calc(1.1rem * var(--footer-ui-scale)), 1.1rem);
}

#footer-track-title {
  font-size: clamp(0.74rem, calc(0.88rem * var(--footer-ui-scale)), 0.88rem);
  white-space: normal;
  overflow-wrap: anywhere;
}

#footer-track-album {
  font-size: clamp(0.68rem, calc(0.76rem * var(--footer-ui-scale)), 0.76rem);
  white-space: normal;
  overflow-wrap: anywhere;
}

.footer-center-controls {
  flex-wrap: wrap;
  row-gap: 0.35rem;
}

.footer-right-controls {
  min-width: 0;
  grid-template-columns: auto auto minmax(110px, 1fr) auto;
}

.footer-btn {
  width: clamp(40px, calc(42px * var(--footer-ui-scale)), 48px);
  height: clamp(40px, calc(42px * var(--footer-ui-scale)), 48px);
  font-size: clamp(0.95rem, calc(1rem * var(--footer-ui-scale)), 1.15rem);
  line-height: 0;
  text-align: center;
}

.footer-btn.is-nav {
  width: clamp(46px, calc(50px * var(--footer-ui-scale)), 56px);
  height: clamp(46px, calc(50px * var(--footer-ui-scale)), 56px);
  font-size: clamp(1.04rem, calc(1.14rem * var(--footer-ui-scale)), 1.22rem);
}

.footer-speed-toggle {
  width: clamp(40px, calc(42px * var(--footer-ui-scale)), 48px);
  height: clamp(40px, calc(42px * var(--footer-ui-scale)), 48px);
  min-width: clamp(40px, calc(42px * var(--footer-ui-scale)), 48px);
  border-radius: var(--frontend-footer-round-button-radius);
  line-height: 1;
  padding: 0;
}

.footer-speed-icon {
  display: block;
  width: 1.02em;
  height: 1.02em;
  transform: rotate(-27.5deg);
}

.footer-btn.is-primary {
  width: clamp(52px, calc(60px * var(--footer-ui-scale)), 66px);
  height: clamp(52px, calc(60px * var(--footer-ui-scale)), 66px);
  font-size: clamp(1.18rem, calc(1.32rem * var(--footer-ui-scale)), 1.44rem);
}

.app-footer button,
.app-footer [role='button'],
.app-footer .mock-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.app-footer button svg,
.app-footer [role='button'] svg,
.app-footer .mock-button svg {
  display: block;
  width: 1.1em;
  height: 1.1em;
  margin: auto;
  flex: 0 0 auto;
  pointer-events: none;
}

.footer-bottom-row {
  position: relative;
  min-height: 1.4rem;
}

.footer-bottom-center.viewport-center-anchor {
  position: absolute;
  left: var(--viewport-center-local-x);
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
}

.footer-bottom-right {
  justify-self: end;
  margin-left: auto;
}

@media (max-width: 900px) {
  .toolbar-group-left,
  .toolbar-group-right {
    grid-column: auto;
  }

  .toolbar-group-center.viewport-center-anchor {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
    pointer-events: auto;
  }

  .hero-brand h2.viewport-center-anchor,
  .footer-bottom-center.viewport-center-anchor {
    position: static;
    left: auto;
    transform: none;
    text-align: left;
  }

  .footer-bottom-row {
    min-height: 0;
  }
}