@font-face {
  font-family: "Libre Franklin";
  src: url("./fonts/libre-franklin.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #252421;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Libre Franklin", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.home {
  display: flex;
  flex-direction: column;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 80px;
  padding: 18px clamp(20px, 4vw, 48px);
  background: var(--paper);
}

.friedolin {
  display: block;
  width: 32px;
  height: auto;
  opacity: 0.2;
}

.quiet-link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 44px;
  min-height: 44px;
  color: #76716b;
  font-size: 12px;
  line-height: 20px;
  text-decoration: underline;
  text-decoration-color: #c8c3bc;
  text-underline-offset: 4px;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: calc(100svh - 80px);
  padding: 24px 24px 104px;
  text-align: center;
}

.pigeon-button {
  --pigeon-size: 160px;
  display: block;
  width: var(--pigeon-size);
  height: var(--pigeon-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--paper);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms var(--ease-out);
}

.pigeon {
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("./assets/idle.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: calc(var(--pigeon-size) * var(--sprite-columns)) calc(var(--pigeon-size) * var(--sprite-rows));
  animation: pigeon-frames var(--sprite-duration) steps(1, end) infinite;
}

.pigeon[data-state="communicating"] {
  background-image: url("./assets/communicating.png");
}

.pigeon[data-state="writing"] {
  background-image: url("./assets/writing.png");
}

.pigeon[data-state="reading"] {
  background-image: url("./assets/reading.png");
}

@keyframes pigeon-frames {
  0.00000000% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -0); }
  0.69444444% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -0); }
  1.38888889% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -0); }
  2.08333333% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -0); }
  2.77777778% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -0); }
  3.47222222% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -0); }
  4.16666667% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -0); }
  4.86111111% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -0); }
  5.55555556% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -0); }
  6.25000000% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -0); }
  6.94444444% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -0); }
  7.63888889% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -0); }
  8.33333333% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -1); }
  9.02777778% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -1); }
  9.72222222% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -1); }
  10.41666667% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -1); }
  11.11111111% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -1); }
  11.80555556% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -1); }
  12.50000000% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -1); }
  13.19444444% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -1); }
  13.88888889% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -1); }
  14.58333333% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -1); }
  15.27777778% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -1); }
  15.97222222% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -1); }
  16.66666667% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -2); }
  17.36111111% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -2); }
  18.05555556% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -2); }
  18.75000000% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -2); }
  19.44444444% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -2); }
  20.13888889% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -2); }
  20.83333333% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -2); }
  21.52777778% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -2); }
  22.22222222% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -2); }
  22.91666667% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -2); }
  23.61111111% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -2); }
  24.30555556% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -2); }
  25.00000000% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -3); }
  25.69444444% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -3); }
  26.38888889% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -3); }
  27.08333333% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -3); }
  27.77777778% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -3); }
  28.47222222% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -3); }
  29.16666667% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -3); }
  29.86111111% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -3); }
  30.55555556% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -3); }
  31.25000000% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -3); }
  31.94444444% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -3); }
  32.63888889% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -3); }
  33.33333333% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -4); }
  34.02777778% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -4); }
  34.72222222% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -4); }
  35.41666667% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -4); }
  36.11111111% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -4); }
  36.80555556% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -4); }
  37.50000000% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -4); }
  38.19444444% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -4); }
  38.88888889% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -4); }
  39.58333333% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -4); }
  40.27777778% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -4); }
  40.97222222% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -4); }
  41.66666667% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -5); }
  42.36111111% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -5); }
  43.05555556% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -5); }
  43.75000000% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -5); }
  44.44444444% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -5); }
  45.13888889% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -5); }
  45.83333333% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -5); }
  46.52777778% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -5); }
  47.22222222% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -5); }
  47.91666667% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -5); }
  48.61111111% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -5); }
  49.30555556% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -5); }
  50.00000000% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -6); }
  50.69444444% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -6); }
  51.38888889% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -6); }
  52.08333333% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -6); }
  52.77777778% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -6); }
  53.47222222% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -6); }
  54.16666667% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -6); }
  54.86111111% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -6); }
  55.55555556% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -6); }
  56.25000000% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -6); }
  56.94444444% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -6); }
  57.63888889% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -6); }
  58.33333333% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -7); }
  59.02777778% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -7); }
  59.72222222% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -7); }
  60.41666667% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -7); }
  61.11111111% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -7); }
  61.80555556% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -7); }
  62.50000000% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -7); }
  63.19444444% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -7); }
  63.88888889% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -7); }
  64.58333333% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -7); }
  65.27777778% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -7); }
  65.97222222% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -7); }
  66.66666667% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -8); }
  67.36111111% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -8); }
  68.05555556% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -8); }
  68.75000000% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -8); }
  69.44444444% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -8); }
  70.13888889% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -8); }
  70.83333333% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -8); }
  71.52777778% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -8); }
  72.22222222% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -8); }
  72.91666667% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -8); }
  73.61111111% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -8); }
  74.30555556% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -8); }
  75.00000000% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -9); }
  75.69444444% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -9); }
  76.38888889% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -9); }
  77.08333333% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -9); }
  77.77777778% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -9); }
  78.47222222% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -9); }
  79.16666667% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -9); }
  79.86111111% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -9); }
  80.55555556% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -9); }
  81.25000000% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -9); }
  81.94444444% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -9); }
  82.63888889% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -9); }
  83.33333333% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -10); }
  84.02777778% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -10); }
  84.72222222% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -10); }
  85.41666667% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -10); }
  86.11111111% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -10); }
  86.80555556% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -10); }
  87.50000000% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -10); }
  88.19444444% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -10); }
  88.88888889% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -10); }
  89.58333333% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -10); }
  90.27777778% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -10); }
  90.97222222% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -10); }
  91.66666667% { background-position: calc(var(--pigeon-size) * -0) calc(var(--pigeon-size) * -11); }
  92.36111111% { background-position: calc(var(--pigeon-size) * -1) calc(var(--pigeon-size) * -11); }
  93.05555556% { background-position: calc(var(--pigeon-size) * -2) calc(var(--pigeon-size) * -11); }
  93.75000000% { background-position: calc(var(--pigeon-size) * -3) calc(var(--pigeon-size) * -11); }
  94.44444444% { background-position: calc(var(--pigeon-size) * -4) calc(var(--pigeon-size) * -11); }
  95.13888889% { background-position: calc(var(--pigeon-size) * -5) calc(var(--pigeon-size) * -11); }
  95.83333333% { background-position: calc(var(--pigeon-size) * -6) calc(var(--pigeon-size) * -11); }
  96.52777778% { background-position: calc(var(--pigeon-size) * -7) calc(var(--pigeon-size) * -11); }
  97.22222222% { background-position: calc(var(--pigeon-size) * -8) calc(var(--pigeon-size) * -11); }
  97.91666667% { background-position: calc(var(--pigeon-size) * -9) calc(var(--pigeon-size) * -11); }
  98.61111111% { background-position: calc(var(--pigeon-size) * -10) calc(var(--pigeon-size) * -11); }
  99.30555556% { background-position: calc(var(--pigeon-size) * -11) calc(var(--pigeon-size) * -11); }
  100% { background-position: 0 0; }
}

.tagline {
  margin: 28px 0 12px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.01em;
}

.download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 4px;
  color: #76716b;
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.01em;
  text-decoration-line: underline;
  text-decoration-color: #c8c3bc;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, text-decoration-color 160ms ease;
}

.pigeon-button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 6px;
}

@media (hover: hover) and (pointer: fine) {
  .pigeon-button:hover {
    transform: translateY(-3px);
  }

  .download:hover,
  .quiet-link:hover {
    color: var(--ink);
    text-decoration-color: var(--ink);
  }
}

.pigeon-button:active {
  transform: scale(0.97);
}

.documentation {
  width: min(680px, calc(100% - 48px));
  margin: 48px auto 112px;
  font-size: 15px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.documentation h1,
.documentation h2,
.documentation h3 {
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.035em;
}

.documentation h1 {
  margin: 0 0 20px;
  font-size: 30px;
}

.documentation h2 {
  margin: 0 0 20px;
  font-size: 20px;
}

.documentation h3 {
  margin: 28px 0 12px;
  font-size: 16px;
}

.documentation p,
.documentation ul,
.documentation ol {
  margin: 0 0 20px;
}

.documentation li + li {
  margin-top: 8px;
}

.documentation ul,
.documentation ol {
  padding-left: 24px;
}

.documentation strong {
  font-weight: 600;
}

.documentation a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-decoration-color: #b8b4ae;
  text-underline-offset: 3px;
}

.documentation a:hover {
  text-decoration-color: currentColor;
}

.documentation .intro {
  color: #76716b;
  font-size: 17px;
}

.doc-index {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 28px 0 40px;
  font-size: 13px;
}

.doc-index a {
  padding-block: 8px;
}

.documentation section {
  padding-top: 32px;
  margin-top: 32px;
  border-top: 1px solid #eae8e5;
  scroll-margin-top: 112px;
}

.documentation code {
  padding: 2px 5px;
  border-radius: 3px;
  background: #f5f4f2;
  font-size: 0.9em;
}

.documentation blockquote {
  margin: 24px 0;
  padding-left: 20px;
  border-left: 2px solid #dedbd6;
  color: #76716b;
}

@media (max-width: 480px) {
  .documentation {
    margin-block: 28px 72px;
  }

  .documentation h1 {
    font-size: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pigeon {
    animation: none;
  }

  .pigeon-button,
  .download,
  .quiet-link {
    transition: none;
  }

  .pigeon-button:hover,
  .pigeon-button:active {
    transform: none;
  }
}