@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Symbols+2&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Math&display=swap");

:root {
  --sans: "Noto Sans", "Noto Sans Symbols 2", "Noto Sans Math", system-ui,
    -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, Arial,
    "Segoe UI Symbol", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
    sans-serif;

  --sans-zh: "Noto Sans SC", "Noto Sans Symbols 2", "Noto Sans Math",
    "Noto Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui,
    sans-serif;

  --sans-fa: "Noto Sans Arabic", "Noto Sans Symbols 2", "Noto Sans Math",
    "Noto Sans", system-ui, sans-serif;

  --mono: "Noto Sans Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace, "Noto Sans Symbols 2",
    "Noto Sans Math", "Noto Sans", "Segoe UI Symbol", "Apple Color Emoji",
    "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
}

html,
body {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0.1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-emoji: text;
}

[lang="zh"],
[lang="zh-CN"],
[lang="zh-Hans"],
:lang(zh) {
  font-family: var(--sans-zh);
}

[lang="fa"],
[lang="ar"],
:lang(fa),
:lang(ar) {
  font-family: var(--sans-fa);
}

textarea,
pre,
code,
kbd,
samp {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

pre#output {
  font-family: var(--mono);
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0;
}

button,
input,
select,
.option,
.pill,
.brand-title,
.brand-subtitle,
.header,
.section-title,
.rules-head,
.match-title,
.lang-button,
.lang-option,
.status,
.hint,
.sub,
.eyebrow {
  font-family: var(--sans);
}

[lang="fa"],
:lang(fa) {
  line-height: 1.2;
}