@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/onest-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Onest";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/fonts/onest-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Onest Fallback";
  src: local("Arial"), local("ArialMT"), local("Roboto"), local("Helvetica Neue");
  size-adjust: 103.13%;
  ascent-override: 94.06%;
  descent-override: 29.58%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/fonts/unbounded-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Unbounded";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("/fonts/unbounded-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; hanging-punctuation: first; }

body {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--t-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset, legend { margin: 0; }
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

h1, h2, h3 { text-wrap: balance; }
p, li, dd { text-wrap: pretty; hyphens: manual; }

h1, .t-h1 { font: var(--t-h1); letter-spacing: -0.01em; }
.t-h1-landing { font: var(--t-h1-landing); letter-spacing: -0.01em; }
h2, .t-h2 { font: var(--t-h2); }
h3, .t-h3 { font: var(--t-h3); }
.t-lead { font: var(--t-lead); }
.t-body { font: var(--t-body); }
.t-small { font: var(--t-small); }
.t-meta { font: var(--t-meta); letter-spacing: 0.04em; text-transform: uppercase; }
.t-display { font: var(--t-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.t-display-s { font: var(--t-display-s); font-variant-numeric: tabular-nums; }
.t-muted { color: var(--c-muted); }
.t-num { font-variant-numeric: tabular-nums; }
.t-nowrap { white-space: nowrap; }

a { color: var(--c-accent2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) {
  a:not([class]):hover, a.link-tap:hover { color: var(--c-accent2-hover); }
}
.link-tap { display: inline-flex; align-items: center; align-self: flex-start; min-height: 48px; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }

::selection { background: var(--c-accent-tint); color: var(--c-text); }

.vh {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: var(--s-2);
  left: var(--s-2);
  z-index: calc(var(--z-toast) + 1);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-m);
  background: var(--c-inverse);
  color: var(--c-on-inverse);
  font: var(--t-button);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

.page { flex: 1 0 auto; width: 100%; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.col-game {
  width: 100%;
  max-width: calc(var(--col-game) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.col-read {
  width: 100%;
  max-width: calc(var(--col-read) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack { display: flex; flex-direction: column; gap: var(--s-6); }
.stack-s { display: flex; flex-direction: column; gap: var(--s-2); }
.stack-m { display: flex; flex-direction: column; gap: var(--s-3); }

.section { padding-block: var(--s-12); }
.section + .section { padding-top: 0; }

@media (min-width: 1024px) {
  .section { padding-block: var(--s-16); }
  .col-game--game { margin-top: var(--s-12); }
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }