@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-cyrillic.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  src: url('/fonts/manrope-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  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;
}

:root {
  color-scheme: dark;
  --ui-bg: #191919;
  --ui-panel-top: #262626;
  --ui-panel: #191919;
  --ui-cell: #5e5e5e;
  --ui-cell-open: #dddddd;
  --ui-accent: #b9a3ff;
  --ui-red: #e54854;
  --ui-gold: #e3b74b;
  --ui-text: #f2f2f2;
  --ui-muted: #949494;
  --ui-stroke: #3e3e3e;
  --ui-radius: 20px;
  font-family: Manrope, system-ui, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

*, *::before, *::after { box-sizing: border-box; }
button, input { font: inherit; }
.num { font-variant-numeric: tabular-nums; }

.avatar {
  position: relative;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: var(--avatar-size, 30px);
  height: var(--avatar-size, 30px);
  overflow: hidden;
  border-radius: 50%;
  color: #191919;
  background: var(--avatar-color, var(--ui-accent));
  box-shadow: inset 0 0 0 1px #ffffff38;
  vertical-align: middle;
}
.avatar__initial { font-size: calc(var(--avatar-size, 30px) * .48); font-weight: 800; line-height: 1; }
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 160ms ease; }
.avatar.has-image img { opacity: 1; }
.avatar.image-failed img { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}