:root {
  --heading-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", "Source Han Sans SC", system-ui, sans-serif;
  --jp-sans: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", "Noto Sans CJK JP", "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

h1, h2, h3, h4 {
  font-family: var(--heading-sans);
  font-weight: 700;
}

.jp-name {
  font-family: var(--jp-sans);
}

.back-to-top {
  color: rgba(24, 33, 43, .76);
  background: rgba(255, 255, 255, .92);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  color: var(--ink);
  background: var(--white);
}

.back-to-top:focus-visible {
  outline-color: var(--brand);
}

.sample-scope {
  display: flex;
  gap: 10px 18px;
  align-items: baseline;
  margin: -34px 0 28px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.sample-scope strong { color: var(--ink); }

@media (max-width: 800px) {
  .topbar {
    min-height: 0;
    padding: 14px 0 10px;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
  }
  .topbar nav {
    display: flex !important;
    width: 100%;
    gap: 16px;
    overflow-x: auto;
    padding: 2px 0 6px;
    white-space: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .topbar nav::-webkit-scrollbar { display: none; }
  .topbar nav a { flex: 0 0 auto; }
  .sample-scope { display: grid; margin-top: -22px; }
}

@media (max-width: 620px) {
  .brand { max-width: calc(100vw - 30px); }
}