:root {
  --text-primary: #fefefe;
  --text-secondary: #8f8f8f;
  --text-tertiary: #404040;

  --dashed-border: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='90' ry='90' stroke='rgba(255,255,255,0.1)' stroke-width='2' stroke-dasharray='10%2c 10' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

input,
button,
textarea,
select {
  font: inherit;
}

body::-webkit-scrollbar {
  display: none;
}

body, html {
    width: 100vw;
    height: 100vh;
}

body {
  font-family: 'SF Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI';
}

::selection {
  background: rgba(0, 128, 255, 0.3);
}

.app {
  width: 100%;
  height: 100%;
  background-color: #000;
}

.flexrow {
  display: flex;
  flex-direction: row;
}

.flexcolumn {
  display: flex;
  flex-direction: column;
}

.align-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.center-align {
  align-items: center;
  justify-content: center;
}

.hidden {
  display: none;
}

.app[data-page="player"] {
  overflow: hidden;
  position: relative;
}

.liquid-glass {
  -webkit-backdrop-filter: blur(60px) saturate(1.8);
  backdrop-filter: blur(60px) saturate(1.8);
  background: #161616e0;
  border: none;
  box-shadow: inset 0 1.5px 1px -.5px #ffffff2b, inset 0 -1.5px 1px -.5px #ffffff1f, inset 0 12px 15px -8px #0003, -1.25px 0 0 -.75px #00000073, 1.25px 0 0 -.75px #00000073, 0 0 0 .5px #0006, 0 8px 15px #0000004d, 0 16px 40px #00000059;
}

.liquid-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  z-index: -1;
  box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px;
}

#ambientCanvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%) scale(1.25);
  filter: blur(80px) brightness(0.9) saturate(1.4);
  opacity: 0.85;
  pointer-events: none;
  z-index: 1;
  transition: opacity var(--motion-base) var(--ease-standard);
  z-index: 0;
}

.toggle-container {
  width: 30px;
  height: 15px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  padding: 4px;
  cursor: pointer;
  position: relative;

  transition:
    background-color var(--motion-fast) var(--ease-standard);
}

.toggle-thumb {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  height: calc(100% - (4px * 2));
  aspect-ratio: 1 / 1;
  position: absolute;
  top: 4px;
  left: 4px;

  transition:
    transform var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.menu-item.on .toggle-container {
  background-color: rgba(255, 255, 255, 0.4);
}

.menu-item.on .toggle-thumb {
  transform: translateX(15px);
  background-color: rgba(255, 255, 255, 0.8);
}

.topbar {
  align-items: center;
  gap: 12px;
  position: absolute;
  top: 25px;
  width: calc(100% - (25px * 2));
  justify-content: space-between;
  padding: 0 25px;
}

.branding {
  color: var(--text-primary);
  gap: 12px;
  align-items: center;
}

.branding img {
  width: 16px;
  height: 16px;
}

.branding p {
  font-weight: 600;
  font-size: 20px;
}

.made-by {
  color: var(--text-tertiary);
  font-size: 14px;
}

.made-by a {
  color: var(--text-tertiary);
  text-decoration: underline;
  transition: color var(--motion-fast) var(--ease-standard);
}

.made-by a:hover {
  color: var(--text-secondary);
}