:root {
  --page-bg: linear-gradient(135deg, #f8fafc, #e2e8f0 50%, #f8fafc);
  --text-primary: #0f172a;
  --text-secondary: #64748b;
  --card-bg: rgba(255, 255, 255, 0.85);
  --card-border: rgba(148, 163, 184, 0.3);
  --card-hover-bg: rgba(255, 255, 255, 0.95);
  --card-hover-border: rgba(148, 163, 184, 0.5);
  --nav-bg: rgba(255, 255, 255, 0.7);
  --nav-border: rgba(148, 163, 184, 0.25);
  --nav-hover-bg: rgba(255, 255, 255, 0.9);
  --nav-color: #475569;
  --accent-bar-opacity: 0.6;
  --shadow-active: 0 8px 32px rgba(0, 0, 0, 0.1);
  --shadow-side: 0 2px 8px rgba(0, 0, 0, 0.06);
}

html.dark {
  --page-bg: linear-gradient(135deg, #0f172a, #1e293b 50%, #0f172a);
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --card-bg: #0f172a 10%;
  --card-border: rgba(255, 255, 255, 0.1);
  --card-hover-bg: rgba(255, 255, 255, 0.08);
  --card-hover-border: rgba(255, 255, 255, 0.2);
  --nav-bg: rgba(255, 255, 255, 0.08);
  --nav-border: rgba(255, 255, 255, 0.15);
  --nav-hover-bg: rgba(255, 255, 255, 0.2);
  --nav-color: #f8fafc;
  --accent-bar-opacity: 0.4;
  --shadow-active: 0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-side: 0 2px 8px rgba(0, 0, 0, 0.15);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  overflow: hidden;
  font-family: Inter, sans-serif;
  transition: background-color 0.3s, color 0.3s;
}

.card {
  transition: background-color 0.3s, border-color 0.3s;
}

.track {
  width: min(420px, 72vw);
  aspect-ratio: 2 / 3;
}

.btn-prev {
  left: max(16px, calc(50% - min(420px, 72vw) / 2 - 72px));
}

.btn-next {
  right: max(16px, calc(50% - min(420px, 72vw) / 2 - 72px));
}

.card-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.3s;
}

.card:hover .card-body::before {
  opacity: var(--accent-bar-opacity);
}

@media (max-width: 640px) {
  .track {
    width: 78vw;
  }

  .btn-prev {
    left: 12px;
  }

  .btn-next {
    right: 12px;
  }
}

@media (max-width: 400px) {
  .track {
    width: 82vw;
  }
}