:root {
  --changelog-bg: #101012;
  --changelog-card: rgba(255, 255, 255, .055);
  --changelog-card-strong: rgba(255, 255, 255, .085);
  --changelog-line: rgba(255, 255, 255, .14);
  --changelog-text: #f3f2ed;
  --changelog-muted: #a5a3a0;
  --changelog-accent: #f4a261;
  --changelog-green: #78d99a;
}

* { box-sizing: border-box; }
html { background: var(--changelog-bg); }
body {
  min-width: 320px;
  margin: 0;
  background:
    radial-gradient(circle at 78% 0%, rgba(244, 162, 97, .16), transparent 32rem),
    var(--changelog-bg);
  color: var(--changelog-text);
  font-family: var(--font-body);
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
.changelog-nav,
.changelog-footer,
main { width: min(100% - 48px, 1080px); margin: 0 auto; }
.changelog-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  border-bottom: 1px solid var(--changelog-line);
}
.changelog-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.02em; }
.changelog-brand img { border-radius: 8px; }
.changelog-nav nav { display: flex; align-items: center; gap: 22px; color: var(--changelog-muted); font-size: 13px; }
.changelog-nav nav a:hover,
.changelog-footer a:hover { color: var(--changelog-text); }
.changelog-download {
  padding: 7px 14px;
  border: 1px solid rgba(244, 162, 97, .58);
  border-radius: 999px;
  color: var(--changelog-text);
}
.changelog-hero { max-width: 720px; padding: 112px 0 86px; }
.changelog-kicker,
.changelog-release-label { color: var(--changelog-accent); font-size: 12px; letter-spacing: .16em; }
.changelog-kicker { margin: 0 0 22px; }
.changelog-hero h1 { margin: 0; font-family: var(--font-wordmark); font-size: clamp(48px, 8vw, 92px); font-weight: 400; letter-spacing: -.055em; line-height: .98; }
.changelog-hero h1 em { color: var(--changelog-accent); font-style: normal; }
.changelog-hero > p:last-child { max-width: 590px; margin: 30px 0 0; color: var(--changelog-muted); font-size: 16px; }
.changelog-list { padding-bottom: 96px; }
.changelog-release { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 42px; padding: 48px 0; border-top: 1px solid var(--changelog-line); }
.changelog-release-latest { padding: 54px 32px; border: 1px solid rgba(244, 162, 97, .38); border-radius: 18px; background: linear-gradient(135deg, var(--changelog-card-strong), var(--changelog-card)); }
.changelog-release-meta { display: flex; flex-direction: column; gap: 8px; color: var(--changelog-muted); font-size: 12px; }
.changelog-release-meta time { font-family: var(--font-mono); }
.changelog-release-body h2 { margin: -8px 0 8px; font-size: 36px; letter-spacing: -.045em; }
.changelog-summary { margin: 0 0 26px; color: var(--changelog-muted); font-size: 17px; }
.changelog-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.changelog-columns h3 { margin: 0 0 10px; color: var(--changelog-green); font-size: 13px; letter-spacing: .08em; }
.changelog-release ul { margin: 0 0 25px; padding-left: 20px; color: var(--changelog-muted); }
.changelog-release li + li { margin-top: 8px; }
.changelog-release-link { color: var(--changelog-accent); font-size: 13px; }
.changelog-footer { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 28px 0 48px; border-top: 1px solid var(--changelog-line); color: var(--changelog-muted); font-size: 13px; }
.changelog-footer span { margin-left: auto; }
@media (max-width: 720px) {
  .changelog-nav,
  .changelog-footer,
  main { width: min(100% - 36px, 1080px); }
  .changelog-nav { min-height: 64px; }
  .changelog-nav nav { gap: 12px; font-size: 12px; }
  .changelog-nav nav a:not(.changelog-download) { display: none; }
  .changelog-hero { padding: 74px 0 60px; }
  .changelog-release,
  .changelog-release-latest { grid-template-columns: 1fr; gap: 20px; padding: 30px 0; }
  .changelog-release-latest { padding: 30px 22px; }
  .changelog-columns { grid-template-columns: 1fr; gap: 18px; }
  .changelog-footer span { width: 100%; margin-left: 0; }
}