/* Фирменный стиль Очного этапа: чёрный 0D0D0D, белый, синий 0142E8, зелёный 00C06D, оранжевый FF5100, Overused Grotesk */
@font-face { font-family: 'Overused Grotesk'; font-weight: 400; font-display: swap; src: url(/fonts/og-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Overused Grotesk'; font-weight: 500; font-display: swap; src: url(/fonts/og-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Overused Grotesk'; font-weight: 600; font-display: swap; src: url(/fonts/og-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Overused Grotesk'; font-weight: 700; font-display: swap; src: url(/fonts/og-Bold.woff2) format('woff2'); }

:root {
  --black: #0D0D0D;
  --ink-2: #161616;
  --ink-3: #1F1F1F;
  --line: #2C2C2C;
  --mute: #8C8C8C;
  --white: #FFFFFF;
  --blue: #0142E8;
  --green: #00C06D;
  --orange: #FF5100;
  --amber: #FFB800;
  --red: #F0282D;
  --font: 'Overused Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--font); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.br { font-weight: 500; font-size: 12px; letter-spacing: .02em; color: var(--mute); text-transform: lowercase; }
.br::before { content: '[ '; } .br::after { content: ' ]'; }

.tag { display: inline-block; background: var(--white); color: var(--black); font-weight: 700; text-transform: uppercase;
  font-size: 12px; letter-spacing: .02em; padding: 5px 8px 4px; line-height: 1; }
.tag.dark { background: var(--black); color: var(--white); border: 1px solid var(--white); }

.btn { border: 0; border-radius: 0; padding: 16px 18px; font-weight: 700; font-size: 16px; text-transform: lowercase; letter-spacing: -.01em; }
.btn-blue { background: var(--blue); color: #fff; }
.btn-white { background: #fff; color: var(--black); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid #fff; }
.btn:disabled { opacity: .5; cursor: default; }

.lvl-1 { --lvl: var(--green); }
.lvl-2 { --lvl: var(--amber); }
.lvl-3 { --lvl: var(--red); }
.lvl-0 { --lvl: #555; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes busy { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.zone.busy rect { animation: busy 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .pulse, .zone.busy rect { animation: none; } }