:root {
  --spacing-unit: 0.5rem;

  --font-family-sans: "Fira Sans", "Source Sans Pro", system-ui, ui-sans-serif, sans-serif;
  --font-family-mono: "Fira Mono", "Source Code Pro", Monaco, ui-monospace, monospace;

  --primary-color-dark: #4F5B93;
  --primary-color-medium: #7A86B8;
  --primary-color-light: #E2E4EF;

  --text-color-dark: #3f3f3f;
  --text-color-light: #fff;

  --root-background-color: #333;
  --content-background-color: #F2F2F2;
  --code-background-color: #00000010;
  --code-block-background-color: #fff;

  --token-comment-color: #734100;
  --token-keyword-color: #076e07;
  --token-operator-color: #0c0c0c;
  --token-punctuation-color: #161616;
  --token-string-color: #b60c0c;
  --token-number-color: #886f00;
  --token-constant-color: #053c46;
  --token-variable-color: #000081;
  --token-function-color: #55044a;
  --token-package-color: #9c1a03;
  --token-class-name-color: #002c8a;
  --token-property-color: #000081;

  --outset-shadow-dark: 0 4px 8px #1a1a1a;
  --inset-shadow-light: inset 0 2px 4px #dfdfdf;
}

:root {
  /* Should access this content as an external resource, but CORS policy blocks, so use a data URI. */
  --compare-arrow-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 6 8' stroke='none' fill='currentColor'><path d='M0 0L2 0L6 4L2 8L0 8L4 4Z' /></svg>");
}

/* Reset */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

/* Font Family */
html {
  font-family: var(--font-family-sans);
}

code {
  font-family: var(--font-family-mono);
}

/* Code Highlighting */
.token.comment {
  color: var(--token-comment-color);
  font-style: italic;
}

.token.keyword {
  color: var(--token-keyword-color);
}

.token.operator {
  color: var(--token-operator-color);
}

.token.punctuation {
  color: var(--token-punctuation-color);
}

.token.string {
  color: var(--token-string-color);
}

.token.number {
  color: var(--token-number-color);
}

.token.constant {
  color: var(--token-constant-color);
}

.token.variable {
  color: var(--token-variable-color);
}

.token.function {
  color: var(--token-function-color);
}

.token.package {
  color: var(--token-package-color);
}

.token.class-name {
  color: var(--token-class-name-color);
}

.token.property {
  color: var(--token-property-color);
}

.root {
  background: var(--root-background-color);
}

@media (width > 80rem) {
  :root {
    --spacing-unit: 1rem;
  }
}

.heading-anchor {
  text-decoration: none;
  color: unset;
  position: relative;
}

.heading-anchor::before {
  position: absolute;
  translate: -100%;
  font-size: 0.7em;
  color: transparent;
  content: "#";
}

@media (width > 80rem) {
  .heading-anchor::before {
    font-size: 1em;
  }
}

.heading-anchor:hover::before {
  color: var(--primary-color-medium);
}

/* Header */
.header {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);

  padding: calc(var(--spacing-unit) * 2);

  background: var(--primary-color-dark);
  color: var(--text-color-light);
  box-shadow: var(--outset-shadow-dark);
}

.header-logo {
  display: block;
  width: 100%;
}

@media (width > 30rem) {
  .header-logo {
    max-width: 30rem;
  }
}

.header-title {
  font-size: 4rem;
  line-height: 1;
}

.header-subtitle {
  text-align: center;
  white-space: pre-line;

  font-size: 1.5rem;
  font-weight: 300;
  line-height: 1.5;
}

.upgrade-button {
  padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 3);
  border-radius: 9999px;

  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;

  color: var(--text-color-light);
  border: 2px solid var(--text-color-light);
}

.upgrade-button:hover {
  text-decoration: underline;
}

.upgrade-button::before {
  margin-top: -0.1em;
  display: block;
}

/* Main */
.container {
  margin-inline: auto;

  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);

  padding-block: calc(var(--spacing-unit) * 2);
}

@media (width > 40rem) {
  .container {
    padding-inline: calc(var(--spacing-unit) * 2);
  }
}

@media (width > 80rem) {
  .container {
    max-width: 80rem;
  }
}

.feature-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);

  padding: calc(var(--spacing-unit) * 2);

  background: var(--content-background-color);
  color: var(--text-color-dark);
  box-shadow: var(--outset-shadow-dark);
}

.feature-title {
  top: 0;
  font-size: 2rem;
  position: sticky;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.rfc-anchor {
  font-size: 1rem;
  text-decoration: none;
}

.compare-grid {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 1);
}

@media (width > 80rem) {
  .compare-grid {
    flex-direction: row;
    gap: calc(var(--spacing-unit) * 2);
  }
}

.compare-block-old {
  flex: 1;
  min-width: 0;
}

.compare-block-old::before {
  display: flex;
  align-items: center;
  justify-content: center;

  width: calc(var(--spacing-unit) * 10);
  height: calc(var(--spacing-unit) * 3);

  font-size: 0.9rem;
  font-weight: bold;

  background: var(--primary-color-light);
  color: var(--text-color-dark);
}

@media (width > 80rem) {
  .compare-block-old::before {
    width: calc(var(--spacing-unit) * 6);
    height: calc(var(--spacing-unit) * 2);
  }
}

.compare-block-new {
  flex: 1;
  min-width: 0;
}

.compare-block-new::before {
  display: flex;
  align-items: center;
  justify-content: center;

  width: calc(var(--spacing-unit) * 10);
  height: calc(var(--spacing-unit) * 3);

  font-size: 0.9rem;
  font-weight: bold;

  background: var(--primary-color-dark);
  color: var(--text-color-light);
}

@media (width > 80rem) {
  .compare-block-new::before {
    width: calc(var(--spacing-unit) * 6);
    height: calc(var(--spacing-unit) * 2);
  }
}

.compare-arrow {
  align-self: center;
  position: relative;
}

.compare-arrow::before {
  position: absolute;
  translate: -50%;

  width: calc(var(--spacing-unit) * 3);
  height: calc(var(--spacing-unit) * 3);

  rotate: 90deg;

  background-color: var(--primary-color-medium);
  mask: var(--compare-arrow-image) center / contain no-repeat;

  content: "";
}

@media (width > 80rem) {
  .compare-arrow::before {
    rotate: 0deg;
  }
}

code:not([class]) {
  margin-block: 0.1em;
  display: inline-block;
  padding: 0.1em 0.4em;
  background: var(--code-background-color);
}

.code-block {
  padding: calc(var(--spacing-unit) * 2);
  overflow-x: auto;

  font-size: 0.9rem;
  line-height: 1.5;

  background: var(--code-block-background-color);
  box-shadow: var(--inset-shadow-light);
}

.feature-info p {
  margin-block-end: calc(var(--spacing-unit) * 1);
}

.feature-info-list {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 1);

  font-size: 14px;
}

.change-summary-section {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);

  padding: calc(var(--spacing-unit) * 2);

  background: var(--content-background-color);
  color: var(--text-color-dark);
  box-shadow: var(--outset-shadow-dark);
}

@media (width > 80rem) {
  .change-summary-section {
    flex-direction: row;
  }
}

.change-summary-column {
  flex: 1;

  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 1);

  min-width: 0;
}

.change-summary-title {
  top: 0;
  font-size: 2rem;
  position: sticky;
  z-index: 10;
  backdrop-filter: blur(8px);
}

.change-summary-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 1);
}

.change-summary-list li {
  padding-inline-start: calc(var(--spacing-unit) * 1);
  font-weight: 300;
  border-inline-start: 1px solid var(--primary-color-medium);
}

/* Footer */
.footer {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);

  padding: calc(var(--spacing-unit) * 2);

  background: var(--primary-color-dark);
  color: var(--text-color-light);
  box-shadow: var(--outset-shadow-dark);
}

.footer-title {
  font-size: 2rem;
}

.footer-content {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 2);

  font-weight: 300;
  line-height: 1.5;
}

.footer-content a {
  color: var(--text-color-light);
}

/* Focus Ring */
*:focus-visible {
  outline: 2px solid var(--primary-color-medium);
  outline-offset: 2px;
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Print */
@media print {
  :root {
    background: white;
    color: black;
  }

  button {
    display: none;
  }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
  }
}