:root {
  --timing: cubic-bezier(0.23, 1, 0.32, 1);
  --transition-curve: cubic-bezier(0.55, 0.085, 0, 0.99);
  --transition-time: 100ms;
  --transition-time--slow: 600ms;
  --transition-time--slower: 1000ms;

  --color-black: #1A2230;
  --color-p: #4E5A6B;
  --color-bg: #ffffff;
  --color-gray: #7A8494;

  --color-link: #3A4555;

  --space-unit: 1em;
  --space-xxs: calc(0.25 * var(--space-unit));
  --space-xs: calc(0.5 * var(--space-unit));
  --space-sm: calc(0.75 * var(--space-unit));
  --space-md: calc(1.25 * var(--space-unit));
  --space-lg: calc(2 * var(--space-unit));
  --space-xl: calc(4 * var(--space-unit));
  --space-xxl: calc(8 * var(--space-unit));

  --fs-0: calc(4 * var(--space-unit));
  --fs-1: calc(3 * var(--space-unit));
  --fs-2: calc(1.5 * var(--space-unit));
  --fs-3: calc(1.25 * var(--space-unit));
  --fs-4: calc(1 * var(--space-unit));

  --fw-normal: 400;
  --fw-medium: 700;
  --fw-bold: 800;

  --border-radius: 8px;

  --max-width: 40em;

  --lh-default: 1.4;
  --lh-tight: 1.1;
  --lh-loose: 1.6;

  --f-body: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

body {
  font-size: var(--space-unit);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.4;
  background-color: var(--color-bg);
  color: var(--color-black);
  max-width: var(--max-width);
  padding: var(--space-xxl) var(--space-unit);
  margin: auto;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  opacity: 0;
}

header img {
  margin-bottom: var(--space-xl);
}

main {
  padding: var(--space-lg) 0;
}

a {
  color: var(--color-link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

h1 {
  font-size: var(--fs-0);
  line-height: var(--lh-tight);
  font-weight: var(--fw-bold);
  letter-spacing: -0.025em;
  color: var(--color-black);
}

h2 {
  font-size: var(--fs-3);
  font-weight: var(--fw-medium);
  color: var(--color-black);
}

h3 {
  margin-top: var(--space-xs);
  font-size: var(--fs-2);
  color: var(--color-p);
  font-weight: var(--fw-normal);
}

section {
  margin-top: var(--space-lg);
}

section:first-child {
  margin-top: 0;
}

p {
  color: var(--color-p);
  padding-top: var(--space-xs);
  line-height: var(--lh-default);
  font-size: var(--fs-3);
}

li {
  list-style: none;
  line-height: var(--lh-loose);
  color: var(--color-p);
  font-size: var(--fs-3);
}

li span {
  margin-right: 0.25em;
  font-weight: var(--fw-medium);
}

footer {
  opacity: 0.6;
  color: var(--color-black);
  margin: var(--space-xxl) 0;
}

footer a {
  color: inherit;
}

#bookmarklet {
  display: inline-block;
  cursor: grab;
  margin: var(--space-md) 0;
}

#bookmarklet:active {
  cursor: grabbing;
}

.note {
  color: var(--color-p);
  font-size: var(--fs-3);
  padding-top: var(--space-md);
}

.note code {
  background: #f0f0f0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}