@font-face {
  font-family: "Berkeley Mono";
  src: url("/fonts/berkeley-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  font-family: "Berkeley Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-synthesis: none;
  color: #292b27;
  background: #f9f9f6;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 5vw, 72px);
  font-size: 14px;
  line-height: 1.7;
}
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid #557541; outline-offset: 6px; }
::selection { color: #292b27; background: #dfe8d6; }
.logo { display: inline-block; font-size: 18px; letter-spacing: -0.8px; }
.dot { color: #557541; }
.cursor { color: #557541; margin-left: 2px; }
main { margin-top: 68px; margin-bottom: 96px; }
.comment { margin: 0 0 21px; color: #72766c; font-size: 12px; font-weight: 400; }
.products { list-style: none; padding: 0; margin: 0; counter-reset: product; }
.products li { counter-increment: product; display: flex; align-items: baseline; margin-bottom: 0px; }
.products li::before { content: "0" counter(product); color: #85897f; font-size: 11px; width: 38px; flex-shrink: 0; }
.products a { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 14px; }
.badge { align-self: center; padding: 1px 5px; border: 1px solid #dfe3d9; border-radius: 3px; color: #72766c; background: #f0f2eb; font-family: system-ui, sans-serif; font-size: 10px; line-height: 1.4; white-space: nowrap; }
.arrow { color: #85897f; font-size: 14px; transition: transform 150ms ease, color 150ms ease; }
.products a:hover, footer a:hover { color: #557541; }
.products a:hover .arrow { color: #557541; transform: translate(2px, -2px); }
footer { margin-top: auto; display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; font-size: 11px; }
footer p { margin: 0; color: #72766c; }
.footer-divider { color: #a1a498; }
@media (max-width: 480px) {
  main { margin-top: 56px; }
  footer { flex-direction: column; gap: 7px; }
  .footer-divider { display: none; }
}
@media (prefers-reduced-motion: reduce) { .arrow { transition: none; } }