html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background: var(--bg, #fafbfc);
  color: var(--text, var(--ink, #10151d));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

:where(img, video, canvas, svg) {
  max-width: 100%;
}

:where(input, select, textarea, button) {
  max-width: 100%;
}

:where(p, li, td, th) {
  overflow-wrap: anywhere;
}

:where(h1, h2, h3, h4) {
  color: var(--text, var(--ink, #10151d));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  line-height: 1.25;
  letter-spacing: -.015em;
}

:where(button, input, select, textarea) {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  font-size: max(14px, 1em);
}

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent, #4657d8);
  outline-offset: 2px;
}

::selection {
  background: color-mix(in srgb, var(--accent, #4657d8) 22%, transparent);
}

.site-foot {
  margin-top: 5rem;
  padding: 20px 48px;
  border-top: 1px solid var(--border, #e6e9ee);
  background: var(--bg, #fafbfc);
  color: var(--text-dim, #8a92a0);
  font: 400 12px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  text-align: center;
}

.site-foot span {
  color: #667085;
  font-style: normal;
}

html[data-theme="dark"] .site-foot span { color: #b0bac7; }

@media (max-width: 680px) {
  .site-foot { padding-inline: 24px; }
  :where(input, select, textarea) { min-width: 0; }
}
