@font-face {
  font-family: "TT Positive";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/fonts/tt-positive-light.woff2") format("woff2");
}

@font-face {
  font-family: "TT Positive";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/tt-positive-regular.woff2") format("woff2");
}

@font-face {
  font-family: "TT Positive";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/tt-positive-bold.woff2") format("woff2");
}

:root {
  --bg: #000;
  --fg: #fff;
  --muted: #949494;
  --acc: #4ac6cc;
  --acc-deep: #1689b9;
  --danger: #e70138;
  --alert: #ff4468;
  --line: #4ac6cc;
  --gold: #ae8500;
  --silver: #909090;
  --bronze: #b36018;
  --sans: "TT Positive", "Helvetica Neue", Arial, sans-serif;
  /* The landing's frame: wide screens see the same rules on both. */
  --frame: 1560px;
  --gutter: 40px;
  --inset: 32px;
  --nav: 440px;
}

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

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
}

body {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 300;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
}

/* The two teal rules that frame every page. They sit behind the content and
   keep their distance from the viewport edges instead of scrolling away. */
.grid-lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: min(var(--frame), 100% - var(--gutter) * 2);
  margin-inline: auto;
  border-inline: 1px solid var(--line);
  pointer-events: none;
}

.frame {
  width: min(var(--frame), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

.wrap {
  width: min(var(--frame), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--inset);
}

.section {
  position: relative;
  z-index: 1;
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  margin: 0;
  color: var(--acc);
  font-size: 20px;
  line-height: 1;
}

.muted {
  color: var(--muted);
}

/* ---------------------------------------------------------------- header */

/* The header repeats the landing's: the same rows, spacing, baseline and
   colours, so moving between the landing and the platform does not jump. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 21px 0 14px;
  background: rgb(0 0 0 / 90%);
  border-bottom: 1px solid var(--line);
}

/* In-app browsers (Telegram on iOS) lay the page out under their own
   transparent top bar, so content scrolled past the sticky header would show
   above it. The apron keeps that strip black; elsewhere it sits above the page. */
.topbar::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 100vh;
  background: var(--bg);
}

.topbar__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  padding-inline: var(--inset);
}

.brand {
  display: flex;
  align-items: center;
  gap: 32px;
  min-width: 0;
}

.brand__fp {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand__fp img {
  display: block;
  width: auto;
  height: 42px;
}

.brand__sep {
  width: 1px;
  height: 31px;
  background: rgb(74 198 204 / 40%);
}

.brand__bluesec {
  display: block;
  text-decoration: none;
}

/* The mockup draws the logo 129 by 35: the landing shows the same file at the same size. */
.brand__mark {
  display: block;
  width: auto;
  height: 35px;
}

/* The landing's frame sets the header copy on a baseline below the logos' centre. */
.topnav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  padding-top: 9px;
  font-size: 20px;
  line-height: 20px;
}

.topnav__links {
  display: flex;
  gap: 20px;
}

.topnav a {
  text-decoration: none;
}

.topnav__links a:hover {
  color: var(--acc);
}

.lang {
  white-space: nowrap;
  line-height: 20px;
}

.lang__option {
  color: var(--acc);
  text-decoration: none;
}

.lang__option.is-active {
  color: var(--fg);
}

.api-state {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.api-state::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--acc);
  /* Кружок сидит по средней линии строчных букв, а не по центру строки. */
  transform: translateY(2px);
}

.api-state.is-error::before {
  background: var(--danger);
}

/* ---------------------------------------------------------------- footer */

.foot {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--line);
}

/* The landing's footer, measure for measure: the brand keeps the design's
   492px, the documents column is never narrower than its longest title. */
.foot__inner {
  display: grid;
  grid-template-columns: 492fr 352fr minmax(max-content, 452fr);
  padding-top: 55px;
  padding-bottom: 55.6px;
  font-size: 18px;
  line-height: 30.2px;
}

.foot__inner > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.foot__link {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a.foot__link:hover {
  color: var(--acc);
}

/* ------------------------------------------------------------- controls */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 320px;
  max-width: 100%;
  height: 66px;
  padding: 0 24px;
  border: 1px solid var(--acc);
  border-radius: 4px;
  background: rgb(74 198 204 / 20%);
  color: var(--acc);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover {
  background: rgb(74 198 204 / 32%);
}

.btn--muted {
  border-color: var(--muted);
  background: rgb(148 148 148 / 20%);
  color: var(--muted);
}

.btn--muted:hover {
  background: rgb(148 148 148 / 32%);
  color: var(--fg);
}

.field {
  display: block;
}

.field + .field {
  margin-top: 30.2px;
}

.field__label {
  display: block;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.field input {
  display: block;
  width: 100%;
  height: 26.8px;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: none;
  color: var(--fg);
  font-family: inherit;
  font-size: 20px;
  line-height: 24.8px;
}

.field input:focus {
  outline: none;
  border-bottom-color: var(--acc);
}

.is-error .field__label {
  color: var(--danger);
}

.is-error .field input:required {
  border-bottom-color: var(--danger);
}

.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  max-width: 100%;
  height: 42px;
  border: 1px solid var(--danger);
  border-radius: 4px;
  background: rgb(231 1 56 / 20%);
  color: var(--danger);
  font-size: 16px;
  line-height: 1;
  text-align: center;
}

.code {
  margin: 0;
  padding: 24.3px 32px 25.5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgb(74 198 204 / 10%);
  color: var(--fg);
  font-family: inherit;
  font-size: 20px;
  line-height: 36.25px;
  white-space: pre;
  overflow-x: auto;
}

.link {
  color: inherit;
  text-decoration-line: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

.link:hover {
  color: var(--acc);
}

/* ---------------------------------------------------------------- auth */

.auth {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding-block: 100px;
}

/* Карточка держит отступ в 100px как минимум, а остаток высоты экрана
   разбирают авто-поля: на длинном экране форма стоит по центру, на коротком
   ничего не срезается сверху. */
.auth__card {
  width: 320px;
  margin: auto;
}

.auth__title {
  margin: 12px 0 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.auth__form {
  margin-top: 47.2px;
}

.auth__notice {
  margin-bottom: 33px;
}

/* A note above the first field keeps the notice's gap, so the field's label
   does not read as the note's last line. */
.auth__hint {
  margin: 0 0 33px;
  color: var(--muted);
  font-size: 16px;
  line-height: 19px;
}

.auth__form .btn {
  margin-top: 31px;
}

/* The Telegram button opens its form: it keeps the form's distance from the title. */
.auth__form > .btn:first-child {
  margin-top: 0;
}

.auth__terms {
  margin: 31.5px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 19px;
}

.auth__switch {
  margin: 47.3px 0 0;
  font-size: 20px;
  line-height: 1;
}

/* ---------------------------------------------------------- registration */

/* The same form as the landing's, measure for measure: the landing posts its
   copy here, and a participant must not notice which of the two they used. */
.registration {
  flex: 1 0 auto;
  padding-top: 119px;
  padding-bottom: 114px;
}

.registration__title {
  margin: 0;
  font-size: 64px;
  font-weight: 300;
  line-height: 0.9;
}

.reg {
  max-width: 848px;
  margin-top: 61.5px;
}

.reg__notice {
  justify-content: flex-start;
  gap: 12px;
  width: auto;
  height: auto;
  margin-bottom: 40px;
  padding: 14px 18px;
  border-color: color-mix(in srgb, var(--alert) 45%, transparent);
  background: color-mix(in srgb, var(--alert) 8%, transparent);
  color: var(--alert);
  line-height: 20px;
  text-align: left;
}

/* One grid for both columns: the left one fills five rows, the right one four.
   A reason that wraps to a second line grows its row in both columns, so the
   two move down together instead of drifting apart. */
.reg__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  gap: 40px 32px;
}

.reg__column {
  display: contents;
}

.reg__grid + .reg__field,
.reg__field + .reg__field {
  margin-top: 40px;
}

.reg__column .reg__field + .reg__field {
  margin-top: 0;
}

.reg__field {
  position: relative;
  display: block;
}

.reg__field input,
.reg__field select {
  display: block;
  width: 100%;
  height: 43px;
  margin: 0;
  padding: 0 0 23px;
  border: 0;
  border-bottom: 1px solid var(--muted);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: inherit;
  font-size: 18px;
  font-weight: 300;
  line-height: 19px;
  -webkit-appearance: none;
  appearance: none;
}

.reg__field input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.reg__field input:focus,
.reg__field select:focus {
  outline: none;
  border-bottom-color: var(--acc);
}

.reg__field select {
  padding-right: 24px;
  background: url("/assets/img/select-chevron.svg") right 5.5px / 14px 7px no-repeat;
  cursor: pointer;
}

.reg__field select:has(option[value=""]:checked) {
  color: var(--muted);
}

.reg__field option {
  background: var(--bg);
  color: var(--fg);
}

.reg__hint {
  position: absolute;
  top: 49px;
  left: 0;
  font-size: 14px;
  line-height: 16px;
  color: var(--muted);
}

/* An answer that breaks its rule: a red line draws over the field's own, and
   the reason rises into the gap under it, where the nickname hint sits - the
   negative margin gives its height back, so the fields below stay put.
   --alert reads brighter than --danger on black: small text keeps 4.5:1. */
.reg__field::after {
  content: "";
  position: absolute;
  top: 42px;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--alert);
  box-shadow: 0 0 10px color-mix(in srgb, var(--alert) 70%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

.reg__field.is-invalid::after {
  transform: scaleX(1);
  animation: reg-signal 0.32s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.reg__field.is-invalid .reg__hint {
  display: none;
}

.reg__error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 -22px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--alert);
  animation: reg-reason 0.24s ease-out 0.12s both;
}

.reg__consent .reg__error {
  margin: 6px 0 0;
}

.reg__error::before,
.reg__notice::before {
  content: "!";
  flex: none;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 11px;
  text-align: center;
}

.reg__notice::before {
  width: 18px;
  height: 18px;
  margin-top: 0;
  font-size: 11px;
  line-height: 15px;
}

.reg__consent.is-invalid input {
  border-color: var(--alert);
  box-shadow: 0 0 8px color-mix(in srgb, var(--alert) 50%, transparent);
}

/* Focus brings the first wrong field into view clear of the sticky header. */
.reg__field input,
.reg__field select,
.reg__consent input {
  scroll-margin-top: 160px;
}

@keyframes reg-signal {
  from {
    transform: scaleX(0);
  }
}

@keyframes reg-reason {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reg__field.is-invalid::after,
  .reg__error {
    animation: none;
  }
}

.reg__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.reg .reg__submit {
  width: 408px;
  height: 68px;
  margin-top: 40px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.reg__consent {
  display: flex;
  align-items: flex-start;
  gap: 12.5px;
  max-width: 612px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: var(--muted);
  cursor: pointer;
}

/* The consents come before the button: the required one is read before the click. */
.reg__consent:not(.reg__consent + .reg__consent) {
  margin-top: 40px;
}

.reg__consent input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0.8px 0 0;
  border: 1px solid var(--muted);
  border-radius: 4px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.reg__consent input:checked {
  border-color: var(--acc);
  background: var(--acc) url("/assets/img/checkbox-tick.svg") center / 15px 15px no-repeat;
}

.reg__consent input:focus-visible {
  outline: 1px solid var(--acc);
  outline-offset: 2px;
}

/* The user agreement is a link; the marketing consent has no document yet and
   stays underlined text. */
.reg__doc {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

a.reg__doc:hover {
  color: var(--fg);
}

/* The way back for someone who already has an account, seen before the form. */
.registration__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px 24px;
  /* As wide as the form below, so the link ends where the fields end. */
  max-width: 848px;
}

.registration__switch {
  margin: 0;
  font-size: 20px;
  line-height: 1;
}

/* ------------------------------------------------------------ registered */

.registered {
  position: relative;
  flex: 1 0 auto;
  overflow: hidden;
}

.registered__inner {
  position: relative;
  z-index: 1;
  padding-top: 120px;
  padding-bottom: 120px;
}

.registered__title {
  margin: 0;
  font-size: 64px;
  font-weight: 300;
  line-height: 0.9;
}

.registered__title span,
.registered__title b {
  display: block;
}

.registered__title b {
  font-weight: 700;
}

.registered__body {
  display: flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 64px;
}

.registered__qr {
  flex: none;
  display: block;
  width: 200px;
  height: 200px;
}

.registered__qr .qr {
  display: block;
  width: 100%;
  height: 100%;
}

.registered__text {
  max-width: 420px;
  margin-top: 1px;
  font-size: 18px;
  line-height: 22px;
}

.registered__text p {
  margin: 0;
}

.registered__text p + p {
  margin-top: 12px;
}

/* Sign-up through Telegram: the text alone keeps the body's distance from the title. */
.registered__inner > .registered__text {
  margin-top: 64px;
}

.registered__telegram {
  margin-top: 24px;
}

.registered__body--chat {
  margin-top: 40px;
}

.registered__fork {
  position: absolute;
  top: 0;
  right: calc((100% - min(var(--frame), 100% - var(--gutter) * 2)) / 2);
  width: 316px;
  height: 316px;
}

/* -------------------------------------------------------------- sign-in */

.auth__resend {
  margin-top: 24px;
}

.auth__link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--acc);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
}

.auth__link-button:hover {
  color: var(--fg);
}

.auth__switch--minor {
  margin-top: 16px;
  color: var(--muted);
  font-size: 16px;
}

/* --------------------------------------------------------------- pages */

.back {
  display: block;
  width: fit-content;
  margin-top: 32.1px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
  text-decoration: none;
}

.back:hover {
  color: var(--fg);
}

.page-title {
  margin: 0;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}

.empty {
  margin-block: 12.5px 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

/* ------------------------------------------------------------- account */

.account {
  padding-bottom: 100px;
}

.account__title {
  margin-top: 61.1px;
}

.account__facts {
  display: grid;
  grid-template-columns: 198px 260px minmax(0, 1fr);
  margin: 47.8px 0 0;
}

/* After a Telegram sign-up: what happened, and the participants' chat. */
.account__welcome {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 640px;
  margin-top: 32px;
  padding: 20px 24px;
  border: 1px solid rgb(74 198 204 / 40%);
  border-radius: 6px;
  background: rgb(74 198 204 / 7%);
  font-size: 18px;
  line-height: 22px;
}

.account__welcome p {
  margin: 0;
}

.account__welcome p + p {
  margin-top: 8px;
}

.account__welcome-title {
  color: var(--acc);
  font-weight: 700;
}

.account__welcome-qr {
  flex: none;
  display: block;
  width: 96px;
  height: 96px;
}

.account__welcome-qr .qr {
  display: block;
  width: 100%;
  height: 100%;
}

.account__facts dt {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.account__facts dd {
  margin: 11.3px 0 0;
  font-size: 20px;
  line-height: 1;
}

/* The chat link is an action, not a value: it reads at the labels' size and
   keeps the values' baseline because the line stays 20px. */
.account__facts dd .link {
  font-size: 16px;
}

.account__block {
  margin-top: 47.5px;
}

.account__block .code {
  margin-top: 12.7px;
}

.account__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: end;
  gap: 20px;
  margin-top: 13px;
}

.account__row .field input {
  height: 28.8px;
}

.account__keys {
  border-collapse: collapse;
  width: 100%;
  margin-top: 24px;
  font-size: 16px;
}

.account__keys th {
  padding: 0 16px 10px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-weight: 400;
  text-align: left;
}

.account__keys td {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid rgb(74 198 204 / 30%);
  vertical-align: top;
}

.account__keys tr.is-revoked {
  color: var(--muted);
}

.account__keys small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.key-secret {
  display: block;
  margin-top: 12px;
  padding: 16px 20px;
  border: 1px solid var(--acc);
  border-radius: 4px;
  background: rgb(74 198 204 / 10%);
  font-family: inherit;
  font-size: 20px;
  word-break: break-all;
}

.key-revoke {
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.key-revoke:hover {
  color: var(--danger);
}

.account__note {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 17.8px;
}

.account__signout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

/* ------------------------------------------------------------ home hero */

.hero {
  position: relative;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: 181px 99.5px;
}

.hero__title {
  margin: 0;
  max-width: 1100px;
  font-size: 80px;
  font-weight: 300;
  line-height: 80px;
}

.hero__title b {
  font-weight: 700;
}

.hero__lead {
  margin: 47.5px 0 0;
  max-width: 620px;
  font-size: 20px;
  line-height: 24px;
}

.hero__lead + .hero__lead {
  margin-top: 13px;
}

.hero__chevrons {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: min(var(--frame), 100% - var(--gutter) * 2);
  margin-inline: auto;
  pointer-events: none;
}

.hero__chevrons img {
  position: absolute;
  display: block;
}

.hero__chevron--up {
  top: 0;
  left: 67.65%;
  width: 316px;
  height: 316px;
}

.hero__chevron--down {
  right: 0;
  bottom: 0;
  width: 316px;
  height: 315px;
}

/* --------------------------------------------------------- leaderboard */

.board {
  padding-block: 93.6px 100px;
}

.board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.board__refresh {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--acc);
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.board__refresh svg {
  width: 17px;
  height: 17px;
  display: block;
}

.board__note {
  margin-block: 26.9px 0;
  font-size: 20px;
  line-height: 1.2;
}

.table {
  margin-top: 50.5px;
}

/* The design's widths at full size. Below it the two text columns give way:
   they truncate anyway, while the finish time needs its full width on one
   line (a date with seconds runs to 206px) and the rank must hold a medal. */
.table__row {
  display: grid;
  grid-template-columns:
    83px minmax(0, 460fr) minmax(0, 345fr) 115px 115px
    minmax(210px, 163fr);
  align-items: center;
  column-gap: 0;
  padding-inline: var(--inset);
  margin-inline: calc(var(--inset) * -1);
  color: inherit;
  text-decoration: none;
}

.table__head {
  padding-bottom: 21px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.table__head span {
  font-size: 16px;
}

/* A floor, not a height: a row whose cells wrap grows instead of spilling
   into the next one. */
.table__body .table__row {
  min-height: 75px;
  padding-bottom: 12px;
  border-top: 1px solid rgb(74 198 204 / 40%);
}

.table__body .table__row:first-child {
  border-top-color: var(--line);
}

.table__body .table__row:last-child {
  border-bottom: 1px solid var(--line);
}

.table__body .table__row > * {
  align-self: start;
  margin-top: 12px;
}

.table__body .table__row:nth-child(odd) {
  background: rgb(74 198 204 / 10%);
}

.table__body .table__row:hover {
  background: rgb(74 198 204 / 18%);
}

.table__cell {
  min-width: 0;
}

.table__cell b {
  display: block;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table__cell small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table__rank {
  display: flex;
  align-items: center;
  gap: 4px;
  font-feature-settings: "tnum" on, "lnum" on;
  min-width: 0;
  overflow: hidden;
  font-size: 20px;
  line-height: 1.2;
}

.medal {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  padding: 3px 8px 4px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  background: rgb(174 133 0 / 20%);
  color: var(--fg);
  font-size: 14px;
  line-height: 1;
}

.medal--silver {
  border-color: var(--silver);
  background: rgb(144 144 144 / 20%);
}

.medal--bronze {
  border-color: var(--bronze);
  background: rgb(179 96 24 / 20%);
}

.table__score,
.table__success {
  font-feature-settings: "tnum" on, "lnum" on;
  font-size: 20px;
  line-height: 1.2;
}

.table__finished {
  font-size: 20px;
  line-height: 1.2;
  white-space: nowrap;
}

.table__finished small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.2;
}

.pager {
  font-feature-settings: "tnum" on, "lnum" on;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24.7px;
  margin-top: 48.5px;
  font-size: 20px;
  line-height: 1;
}

.pager__step {
  display: grid;
  place-items: center;
  width: 34px;
  height: 31px;
  border: 1px solid var(--acc);
  border-radius: 4px;
  background: rgb(74 198 204 / 20%);
  color: var(--acc);
  text-decoration: none;
}

.pager__step[aria-disabled="true"] {
  opacity: 0.35;
  pointer-events: none;
}

.pager__page {
  color: var(--fg);
  text-decoration: none;
}

.pager__page.is-current {
  color: var(--acc);
}

.pager__gap {
  color: var(--muted);
}

/* -------------------------------------------------------------- run page */

.run-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--nav);
}

.run-head__main {
  padding: 0 var(--inset) 34.7px;
}

.run-head__main .eyebrow {
  margin-top: 101.2px;
}

.run-head__side {
  padding: 151.5px var(--inset) 0;
  border-left: 1px solid var(--line);
}

.run-head__title {
  margin: 21.4px 0 0;
  font-size: 80px;
  font-weight: 700;
  /* Relative, so the title keeps its spacing as the font shrinks on narrow screens. */
  line-height: 1;
  word-break: break-word;
}

.run-head__id {
  display: block;
  margin-top: 25.4px;
  color: var(--fg);
  font-size: 20px;
  line-height: 1;
}

.run-head__label {
  margin: 0;
  font-size: 20px;
  line-height: 1;
}

.run-head__score {
  display: block;
  margin-top: 18.7px;
  background: linear-gradient(90deg, var(--acc), var(--acc-deep));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-size: 80px;
  font-weight: 700;
  line-height: 1;
}

.run-head__tasks {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 22.2px;
  font-size: 20px;
  line-height: 1;
  white-space: nowrap;
}

.run-head__rule {
  flex: 1;
  height: 1px;
  background: var(--muted);
}

.run-meta {
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  padding-block: 29.6px 32.7px;
}

.run-meta div {
  min-width: 0;
}

.run-meta dt {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.run-meta dd {
  margin: 11.3px 0 0;
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tasks__title {
  margin-block: 0;
  padding-block: 100.2px 47.8px;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.tasks__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}

/* Пустой раздел - строка под заголовком, как в макете. Нижний отступ нужен
   только чтобы короткая секция не упиралась в подвал. */
.empty--block {
  padding-bottom: 48px;
}

.tasks__empty {
  padding-bottom: 80px;
}

.tasks__empty .empty {
  padding-inline: var(--inset);
}

.task {
  position: relative;
  min-height: 232px;
  padding: 32px var(--inset) 0;
  border-bottom: 1px solid var(--line);
}

.task:nth-child(odd) {
  border-right: 1px solid var(--line);
}

.task__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.task__label {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.task__head .trial-status {
  font-size: 20px;
  line-height: 1;
}

.trial-status {
  color: var(--acc);
}

.run-head__tasks .trial-status {
  color: var(--fg);
}

.trial-status.is-failed,
.trial-status.is-error,
.trial-status.is-aborted {
  color: var(--danger);
}

.trial-status.is-not_started,
.trial-status.is-truncated {
  color: var(--muted);
}

.table__row.is-failed .table__success {
  color: var(--danger);
}

.task__id {
  margin: 7.3px 0 0;
  font-size: 20px;
  line-height: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.task__metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 32.5px 0 0;
}

.task__metrics dt {
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.task__metrics dd {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 1;
}

.task__foot {
  margin: 31.4px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

/* Знак заходит за правую направляющую, как в макете, и обрезается краем
   секции - иначе он растягивал бы страницу по горизонтали. */
.tasks {
  overflow: hidden;
}

.tasks__mark {
  position: relative;
  border-bottom: 1px solid var(--line);
}

.tasks__mark img {
  position: absolute;
  right: -48px;
  bottom: 0;
  width: 493px;
  height: 209px;
  display: block;
}

/* ------------------------------------------------------------ quickstart */

.quickstart {
  padding-block: 87px 99.5px;
}

.quickstart__title {
  margin: 0;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
}

.quickstart__title b {
  font-weight: 700;
}

.quickstart__source {
  margin: 26.5px 0 0;
  font-size: 20px;
  line-height: 1.2;
}

.quickstart .code {
  margin-top: 63px;
}

.quickstart__note {
  margin: 30px 0 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 1180px) {
  .table__row {
    grid-template-columns: 83px minmax(0, 1.6fr) minmax(0, 1.2fr) 90px 70px minmax(210px, 1fr);
  }

  .run-head__title,
  .run-head__score {
    font-size: 56px;
  }
}

@media (max-width: 900px) {
  .foot__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  :root {
    --nav: auto;
  }

  .reg__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-auto-flow: row;
    row-gap: 40px;
  }

  .registered__body {
    flex-direction: column;
  }

  .registered__fork {
    top: auto;
    bottom: 0;
    width: 141px;
    height: 141px;
  }

  /* As on the landing's phone frame: logos first, the rest on its own row. */
  .topbar {
    padding: 16px 0 14px;
  }

  .topbar__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 13px;
  }

  .brand {
    gap: 16px;
  }

  .topnav {
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 10px;
    padding-top: 0;
    font-size: 16px;
    line-height: 16px;
  }

  .hero__inner {
    padding-block: 80px 60px;
  }

  .hero__title {
    font-size: 34px;
    line-height: 1.15;
  }

  .hero__chevrons {
    display: none;
  }

  .board,
  .quickstart,
  .auth {
    padding-block: 60px;
  }

  .board__head {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .board__refresh {
    white-space: normal;
  }

  .table__row {
    grid-template-columns: 48px minmax(0, 1fr) 80px 44px;
    column-gap: 8px;
  }

  .table__row > :nth-child(3),
  .table__row > :nth-child(6),
  .medal {
    display: none;
  }

  .table__body .table__row {
    height: auto;
    padding-block: 16px;
  }

  .run-head {
    grid-template-columns: minmax(0, 1fr);
  }

  .run-head__side {
    border-left: 0;
    border-top: 1px solid var(--line);
    padding-block: 32px;
  }

  .run-head__title,
  .run-head__score {
    font-size: 40px;
  }

  .run-meta,
  .task__metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 24px;
  }

  /* Two columns leave no room to cut a date or a long name: wrap it whole. */
  .run-meta dd,
  .task__id {
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  .tasks__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .task:nth-child(odd) {
    border-right: 0;
  }

  .tasks__mark {
    display: none;
  }

  .account__facts,
  .account__row,
  .account__signout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .code {
    font-size: 16px;
    line-height: 1.9;
  }
}

/* Полоса этапа над таблицей: какой этап идет и сколько он еще принимает прогоны. */
.stage {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  margin-block: 26.9px 0;
  font-size: 20px;
  line-height: 1;
}

.stage__name {
  color: var(--acc);
  font-weight: 700;
}

.stage__note {
  color: var(--muted);
}

.stage--closed {
  color: var(--danger);
}

/* Кнопка копирования появляется только со скриптом, поэтому выглядит как
   остальные текстовые действия и не занимает места в верстке до этого. */
/* Команды сгруппированы по смыслу: клонирование, установка, запуск. Без этого
   правила блоки склеиваются в одну строку - span по умолчанию строчный, и
   "cd bluesec1-agent" оказывается слитым со следующей командой. */
.code__group {
  display: block;
}

.code__group + .code__group {
  margin-top: 12px;
}

.copy {
  border: 0;
  padding: 0;
  background: none;
  color: var(--acc);
  font-family: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

.copy:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* Выбранный прогон читается по строке: в списке из десятка взгляд ищет строку,
   а не ячейку. */
.account__keys tr.is-nominated {
  background: rgb(74 198 204 / 10%);
}

.nominated {
  color: var(--acc);
}

.account__block .notice {
  margin-block: 24px 12px;
}

/* Вкладки витрин повторяют переключатель языка: тот же способ показать выбор. */
.boards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-block: 26.9px 0;
  font-size: 20px;
  line-height: 1;
}

.boards__tab {
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}

.boards__tab:hover {
  color: var(--acc);
}

.boards__tab.is-active {
  color: var(--acc);
}

.boards__tab:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 4px;
}

/* Отметка о заморозке стоит над таблицей: она меняет смысл каждой строки под
   собой, и прочитать ее нужно до, а не после. */
.board__frozen {
  margin-block: 26.9px 0;
  color: var(--acc);
  font-size: 20px;
  line-height: 1;
}

/* The phone frame of the registration form, as the landing sets it. */
@media (max-width: 700px) {
  /* The landing's phone footer: one column, in the desktop order. */
  .foot__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-top: 32.3px;
    padding-bottom: 35.7px;
    font-size: 14px;
    line-height: 29px;
  }

  .registration,
  .registered__inner {
    padding-top: 59px;
  }

  .registration__title,
  .registered__title {
    font-size: 36px;
  }

  .reg {
    margin-top: 40.5px;
  }

  .reg__grid {
    gap: 32px;
  }

  .reg__grid + .reg__field,
  .reg__field + .reg__field {
    margin-top: 32px;
  }

  .reg__field input,
  .reg__field select {
    height: 35px;
    padding-bottom: 19px;
    font-size: 14px;
    line-height: 15px;
  }

  .reg__field select {
    background-position: right 4.5px;
  }

  .reg__hint {
    top: 39px;
    font-size: 12px;
    line-height: 14px;
  }

  .reg__field::after {
    top: 34px;
  }

  .reg__error {
    gap: 6px;
    margin: 4px 0 -18px;
    font-size: 12px;
    line-height: 14px;
  }

  .reg__error::before {
    width: 12px;
    height: 12px;
    border-width: 1.25px;
    font-size: 8px;
    line-height: 9.5px;
  }

  .reg__notice {
    gap: 10px;
    padding: 11px 14px;
    font-size: 14px;
    line-height: 18px;
  }

  .reg__notice::before {
    width: 16px;
    height: 16px;
    font-size: 10px;
    line-height: 13px;
  }

  .reg .reg__submit {
    width: 100%;
    height: 66px;
    margin-top: 40px;
    font-size: 16px;
    letter-spacing: 0;
  }

  .reg__consent:not(.reg__consent + .reg__consent) {
    margin-top: 41px;
  }

  .reg__consent {
    margin-top: 13px;
  }

  /* The phone frame shows no QR: the link in the copy is the way to the bot. */
  .registered__qr,
  .registered__qr-hint {
    display: none;
  }

  .registered__body,
  .registered__inner > .registered__text {
    margin-top: 41.5px;
  }

  .account__welcome {
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px;
    line-height: 20px;
  }

  .registered__text {
    font-size: 14px;
    line-height: 17px;
  }
}

/* A phone has no room for the account's tables: each row becomes a card, every
   cell labelled by its column, and the buttons grow to a thumb's size. */
@media (max-width: 700px) {
  .account__keys thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .account__keys,
  .account__keys tbody,
  .account__keys tr,
  .account__keys td {
    display: block;
    width: 100%;
  }

  .account__keys tr {
    padding: 12px 0;
    border-bottom: 1px solid rgb(74 198 204 / 30%);
  }

  .account__keys td {
    padding: 4px 0;
    border-bottom: 0;
    overflow-wrap: anywhere;
  }

  .account__keys td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    font-size: 14px;
  }

  .key-revoke,
  .copy {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
  }

  .account__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .account__row .field input {
    height: 40px;
  }
}

/* An error is a page of the site: the visitor keeps the header and a way back. */
.error-page {
  padding-block: 96px 120px;
}

.error-page__code {
  margin: 0;
  color: var(--acc);
  font-size: 20px;
  line-height: 1;
}

.error-page__text {
  max-width: 560px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.3;
}

.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin: 40px 0 0;
}

/* The landing's phone header: small logos with the languages beside them,
   the links and the API state on a row of their own under them. */
@media (max-width: 700px) {
  /* The landing's phone frame: its rules and copy sit this close to the edge. */
  :root {
    --gutter: 12px;
    --inset: 12px;
  }

  .topbar {
    padding: 16px 0 15.5px;
  }

  .topbar__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 13.2px;
    column-gap: 12px;
  }

  .brand {
    gap: 12px;
  }

  .brand__fp img {
    height: 23.2px;
  }

  .brand__sep {
    height: 17px;
  }

  .brand__mark {
    height: 19px;
  }

  .topnav {
    display: contents;
  }

  .lang {
    grid-row: 1;
    grid-column: 2;
    padding-top: 2px;
    font-size: 16px;
    line-height: 16px;
  }

  .topnav__links {
    grid-row: 2;
    grid-column: 1;
    gap: 16px;
    font-size: 16px;
    line-height: 16px;
  }

  .api-state {
    grid-row: 2;
    grid-column: 2;
    font-size: 16px;
    line-height: 16px;
  }
}