:root {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  padding: 64px 20px;
  color: var(--changelog-text);
  background:
    radial-gradient(circle at 14% 0, var(--changelog-glow-primary), transparent 30rem),
    radial-gradient(circle at 92% 100%, var(--changelog-glow-secondary), transparent 32rem),
    var(--changelog-bg);
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
  font-synthesis: none;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: min(820px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 52px);
  border: 1px solid var(--changelog-line);
  border-radius: 28px;
  background: var(--changelog-surface);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .35), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(20px);
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--changelog-primary);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  color: transparent;
  background: linear-gradient(100deg, var(--changelog-title-start), var(--changelog-title-end));
  background-clip: text;
  -webkit-background-clip: text;
  font-size: clamp(2.2rem, 7vw, 4rem);
  line-height: 1;
  letter-spacing: -.055em;
  text-align: center;
}

.subtitle {
  max-width: 560px;
  margin: 18px auto 52px;
  color: var(--changelog-muted);
  text-align: center;
}

.version {
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--changelog-line);
}

.version:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.version h2 {
  margin: 0 0 18px;
  color: var(--changelog-text);
  font-size: 1.25rem;
  letter-spacing: -.02em;
}

.changes ul {
  display: grid;
  gap: 14px;
  margin: 0;
  padding-left: 22px;
  color: var(--changelog-muted);
}

.changes li {
  padding-left: 4px;
  overflow-wrap: anywhere;
}

.source,
.version-tag,
.date {
  display: inline-block;
  margin-right: 6px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}

.source {
  color: var(--changelog-primary);
}

.version-tag {
  color: var(--changelog-text);
}

.date {
  color: var(--changelog-secondary);
}

.empty {
  margin: 0;
  color: var(--changelog-muted);
  text-align: center;
}

.back-link {
  display: block;
  margin-top: 34px;
  color: var(--changelog-muted);
  text-align: center;
  text-decoration: none;
}

.back-link:hover {
  color: var(--changelog-text);
}

:focus-visible {
  outline: 2px solid var(--changelog-primary);
  outline-offset: 4px;
}

@media (max-width: 560px) {
  body {
    padding: 18px 12px;
  }

  .container {
    border-radius: 22px;
  }
}