.course-layout__column {
    --z-index-choices-bottom: 4;
    --z-index-choices-middle: 5;
    --z-index-choices-top: 6;
  }

  .course-layout__editors {
    background-color: white;
    position: relative;
  }

  .course-editor__label {
    margin-left: auto;
  }

  .client-choice-visual-challenge-code {
    position: absolute;
    inset: 0;

    padding: 10px 0;
    overflow: auto;
    font-family: "Fira Code", "Consolas", "Monaco", monospace;
    font-size: 14px;
    line-height: 20px;
    color: #1f2933;
    white-space: pre-wrap;
  }

  .client-choice-visual-challenge-mobile-preview {
    display: none;
  }

  @media (max-width: 767px) {
    .client-choice-visual-challenge-mobile-preview {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: calc(var(--z-index-choices-top) + 1);

      display: none;
      margin-top: -200px;
      margin-left: -250px;

      background-color: #ffffff;
      border: 1px solid rgba(47, 35, 185, 0.18);
      border-radius: 8px;
      box-shadow: 0 10px 28px rgba(31, 41, 51, 0.16);

      transform: scale(0.5);
      transform-origin: center;

      overflow: hidden;
    }

    .client-choice-visual-challenge-mobile-preview__frame {
      border: 0;
    }

    .client-choice-visual-challenge-mobile-preview--visible {
      display: block;
    }

  }

  .client-choice-visual-challenge-choices__line {
    display: flex;
  }

  .client-choice-visual-challenge-choices__line-number {
    box-sizing: border-box;
    flex: 0 0 52px;
    padding: 0 14px 0 6px;
    color: #99a1ad;
    text-align: right;
    user-select: none;
  }

  .client-choice-visual-challenge-choices__line-code {
    display: block;
    padding: 0 16px;
  }

  .client-choice-visual-challenge-choices__placeholder {
    position: relative;
    display: inline-block;
    margin: -1px 0;
    padding: 0 3px;
    color: #1d2677;
    background: rgba(72, 82, 194, 0.12);
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(72, 82, 194, 0.22);
  }

  .client-choice-visual-challenge-choices__placeholder:empty::before {
    content: "?";
    color: #ccc;
  }

  .client-choice-visual-challenge-code .token.comment,
  .client-choice-visual-challenge-code .token.prolog,
  .client-choice-visual-challenge-code .token.doctype,
  .client-choice-visual-challenge-code .token.cdata {
    color: #7b8794;
  }

  .client-choice-visual-challenge-code .token.punctuation {
    color: #5d6979;
  }

  .client-choice-visual-challenge-code .token.property,
  .client-choice-visual-challenge-code .token.tag,
  .client-choice-visual-challenge-code .token.boolean,
  .client-choice-visual-challenge-code .token.number,
  .client-choice-visual-challenge-code .token.constant,
  .client-choice-visual-challenge-code .token.symbol {
    color: #2f358f;
  }

  .client-choice-visual-challenge-code .token.selector,
  .client-choice-visual-challenge-code .token.attr-name,
  .client-choice-visual-challenge-code .token.string,
  .client-choice-visual-challenge-code .token.char,
  .client-choice-visual-challenge-code .token.builtin {
    color: #18794e;
  }

  .client-choice-visual-challenge-code .token.operator,
  .client-choice-visual-challenge-code .token.entity,
  .client-choice-visual-challenge-code .token.url,
  .client-choice-visual-challenge-code .token.variable {
    color: #8a5a00;
  }

  .client-choice-visual-challenge-code .token.atrule,
  .client-choice-visual-challenge-code .token.attr-value,
  .client-choice-visual-challenge-code .token.keyword {
    color: #9a3412;
  }

  .client-choice-visual-challenge-code .token.function,
  .client-choice-visual-challenge-code .token.class-name {
    color: #0f6b99;
  }


.challenge-choices {
  --choice-accent-a: #ff9b91;
  --choice-accent-b: #ff7f70;
  --choice-accent-c: #ffbea4;
  --choice-accent-focus: rgba(255, 127, 112, 0.34);
  --choice-accent-border: rgba(255, 127, 112, 0.42);

  position: absolute;
  bottom: 20px;
  left: 30px;
  right: 30px;

  color: #1f2933;
}

.choices-grid {
  position: relative;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;

  padding-top: 220px;
}

.choices-grid-item {
  position: relative;
  width: 100px;
  height: 50px;
}

.code-cards-board {
  position: absolute;
  bottom: 12px;
  left: 50%;

  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 12px;

  width: 400px;
  height: 150px;
  margin-left: -200px;
 
  transform: scale(0.20);
  transform-origin: center bottom;
}

.code-cards-board--active {
  position: fixed;
  bottom: 220px;
  z-index: var(--z-index-choices-top);

  transform: scale(1);
}

.code-card {
  display: flex;
  flex-direction: column;
  width: 120px;
  min-height: 126px;

  font-size: 11px;
  line-height: 14px;
  color: #1f2933;

  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 10px 22px rgba(31, 41, 51, 0.08);
  cursor: pointer;
}

/* Поворот и смещение карточек */

.code-cards-board {
  --angle-width: 10deg;
  --_spread-factor: 1;
}

.code-cards-board--active {
  --_spread-factor: 0.5;
}

.code-cards-board--active::after {
  content: "выберите карточку";
  position: absolute;
  bottom: -40px;
  font-size: 12px;
  color: #333;
  text-shadow: 0 0 3px rgba(255,255,255,0.5);
}

.code-card {
/*
  Распределяет карточки по углам веера.
    i₀ = i - 1
    t = i₀ / (N - 1)
    angle = W × (t - 1/2)
    диапазон: −W/2 … +W/2

  i — индекс карточки, 1…N
  i₀ — индекс с нуля, 0…N−1
  N — количество карточек
  W — общая ширина углового диапазона

  Пример: N = 3, W = 60deg, i = 1…3 → angle = −30deg, 0deg, 30deg
 */
  --_card-angle: calc(
    var(--angle-width) *
    ((var(--i) - 1) / (var(--cards-number) - 1) - 0.5)
  );

/*
  Находит центральную позицию ряда.
    half = (N - 1) / 2
*/
  --_half-length: calc((var(--cards-number) - 1) / 2);


/*
  Находит смещение карточки от центра.
    offset = i₀ - half
    offset = (i - 1) - (N - 1) / 2
  Пример: i = 1…5 → offset = −2, −1, 0, 1, 2
*/
  --_card-offset: calc(var(--i) - 1 - var(--_half-length));

  --_abs-card-offset: max(
    var(--_card-offset),
    -1 * var(--_card-offset)
  );
  
  z-index: calc(var(--cards-number) - var(--i));

  transform:
    translate(
      calc(-50px * var(--_spread-factor) * var(--_card-offset)),
      calc(10px * var(--_spread-factor) * var(--_abs-card-offset))
    )
    rotate(
      calc(var(--_card-angle) * var(--_spread-factor))
    );

  transform-origin: top center;
}


.code-card--selected {
  box-shadow:
    0 0 0 2px var(--choice-accent-border),
    0 14px 26px rgba(31, 41, 51, 0.13);
}

/*
Тепрь карточки дивы. Подумать, как вернуть им фокусные состояния

.code-card:focus {
  outline: none;
}

.code-card:focus-visible {
  box-shadow:
    0 0 0 3px var(--choice-accent-focus),
    0 14px 26px rgba(31, 41, 51, 0.13);
}

.code-card--selected:focus-visible {
  box-shadow:
    0 0 0 2px var(--choice-accent-border),
    0 0 0 5px var(--choice-accent-focus),
    0 14px 26px rgba(31, 41, 51, 0.13);
}
*/

/*
  Цвета обычной и выбранной карточки,
  которые используются в шапке карточки
*/

.code-card {
  --header-color-1: #dce1ea;
  --header-color-2: #c6ceda;
  --header-color-3: #edf0f5;
}

.code-card--selected {
  --header-color-1: var(--choice-accent-a);
  --header-color-2: var(--choice-accent-b);
  --header-color-3: var(--choice-accent-c);
}

.code-card-header {
  min-height: 50px;
  padding: 7px 10px;

  background:
    radial-gradient(
      circle at 18% 0%,
      rgba(255, 255, 255, 0)
    ),
    radial-gradient(
      circle at 84% 18%,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0)
    ),
    linear-gradient(
      135deg,
      var(--header-color-1) 0%,
      var(--header-color-2) 52%,
      var(--header-color-3) 100%
    );

  border-radius: 10px 10px 0 0;
  overflow: hidden;
}

.code-card-status {
  position: relative;

  display: block;
  width: 22px;
  height: 22px;
  margin-left: auto;
  margin-top: 5px;

  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

.code-card--selected .code-card-status {
  background: var(--choice-accent-a);
  box-shadow: 0 0 1px white;
}

.code-card--selected .code-card-status::before {
  content: "";

  position: absolute;
  top: 5px;
  left: 8px;

  width: 7px;
  height: 10px;

  border-right: 2px solid white;
  border-bottom: 2px solid white;
  transform: rotate(45deg);
}

/*
  Code card base structure.

  Public type API lives on .code-type--{type}.
  Other .code-card-* classes are implementation details of the current renderer.
*/

.code-card-body {
  position: relative;

  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  min-height: 80px;
  padding: 20px 25px;
}

.code-card-type {
  position: absolute;
  top: -10px;
  z-index: 1;

  padding: 4px 12px;

  font-size: 11px;
  line-height: 14px;
  color: #8b94a3;

  background: #f3f5f8;
  border-radius: 999px;
}

.code-card-value {
  font-family: "Fira Code", "Consolas", "Monaco", monospace;
  font-size: 11px;
  line-height: 16px;
  color: #1f2933;
  white-space: pre-wrap;
}

/*
  Public card type API.

  .code-type--{type} styles the card header in the default state.
  .code-card--selected .code-type--{type} styles the card header in the selected state.
  Future types can be styled here when no new renderer logic is needed.

  Пример:

  .code-type--code {
    --header-color-1: #dce1ea;
    --header-color-2: #c6ceda;
    --header-color-3: #edf0f5;
  }

  .code-type--color {
    --header-color-1: #dff7ed;
    --header-color-2: #a7e8cf;
    --header-color-3: #edfdf6;
  }

  .code-card--selected .code-type--color {
    --header-color-1: var(--choice-accent-a);
    --header-color-2: var(--choice-accent-b);
    --header-color-3: var(--choice-accent-c);
  }
*/

.code-card-preview {
  position: absolute;
  bottom: -7px;
  left: 50%;

  width: 24px;
  height: 24px;

  border: 3px solid #fff;
  border-radius: 9px;

  box-shadow:
    0 0 0 1px rgba(31, 41, 51, 0.08),
    0 8px 14px rgba(31, 41, 51, 0.16);
  transform: translateX(-50%);
}



.choices-toggle {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;

  font: inherit;
  font-size: 0;
  text-transform: lowercase;

  background: rgba(246, 248, 251, 0.12);
  border: 1px solid rgba(139, 148, 163, 0.2);
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(31, 41, 51, 0.04);

  cursor: pointer;
}

.choices-toggle--open {
  z-index: var(--z-index-choices-top);
  
  font-size: 14px;

  background: rgba(255, 255, 255, 1);
  border-color: rgba(139, 148, 163, 0.36);
  box-shadow:
    inset 0 0 0 2px rgba(139, 148, 163, 0.3),
    0 10px 22px rgba(31, 41, 51, 0.3);
}

.choices-toggle:focus {
  outline: none;
}

.choices-toggle:focus-visible {
  box-shadow:
    0 0 0 3px rgba(139, 148, 163, 0.18),
    0 10px 22px rgba(31, 41, 51, 0.1);
}


.turns-counter {
  position: absolute;
  right: -10px;
  bottom: 0;
  z-index: var(--z-index-choices-top);

  width: 55px;
  height: 45px;
  padding-top: 7px;

  font-size: 18px;
  line-height: 18px;
  font-weight: bold;
  color: rgba(48, 38, 131, 0.5);
  text-align: center;
  background: white;

  border: 3px solid #eee;
  border-radius: 56px 15px 42px 13px;
}

.turns-counter::after {
  content: "xод";

  display: block;

  font-size: 10px;
  line-height: 10px;
  font-weight: normal;
  text-align: center;
  color: #ccc;
}

.client-choice-visual-challenge-choices__placeholder {
  position: relative;

  display: inline-block;
  margin: 1px 0;
  padding: 1px 5px;

  color: #222;
  background-color: #f5f5f5;
  border-radius: 6px;
  box-shadow: inset 0 0 2px rgba(72, 82, 194, 0.22);
}

.client-choice-visual-challenge-choices__placeholder--active {
  z-index: var(--z-index-choices-top);
}

.challenge-choices__overlay {
  display: none;

  position: absolute;
  inset: 0;
  z-index: var(--z-index-choices-middle);

  background: rgba(0,0,0,0.44);
}

.challenge-choices__overlay--open {
  display: block;
}

/*
  Микроанимации
  открытия группы карточек
*/

.choice-animation-overlay--enter,
.choice-animation-placeholder--enter,
.choice-animation-cards--enter {
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-duration: var(--choice-animation-duration, 100ms);
  animation-delay: var(--choice-animation-delay, 0ms);
}

.choice-animation-overlay--enter {
  display: none;

  animation-name: choice-overlay-enter; 
}

.choice-animation-placeholder--enter {
  z-index: 0;
  opacity: 0.5;

  animation-name: choice-placeholder-enter;
}

.choice-animation-cards--enter {
  z-index: 0;
  opacity: 0;
  --_spread-factor: 1;

  animation-timing-function: ease-in;
  animation-name: choice-cards-enter;
}

@keyframes choice-overlay-enter {
  to {
    display: block;
  }
}

@keyframes choice-placeholder-enter {
  to {
    z-index: var(--z-index-choices-top);
    opacity: 1;
  }
}

@property --_spread-factor {
  inherits: true;
  initial-value: 0;
  syntax: "<number>";
}

@keyframes choice-cards-enter {
  50% {
    z-index: var(--z-index-choices-top);
    opacity: 1;
    --_spread-factor: 1.05;
  }
  100% {
    z-index: var(--z-index-choices-top);
    opacity: 1;
    --_spread-factor: 0.5;
  }
}


/*
  Микроанимации
  выбора карточки
*/

.choice-animation-overlay--exit,
.choice-animation-placeholder--exit,
.choice-animation-cards--exit,
.choice-animation-card--selected {
  animation-fill-mode: both;
  animation-timing-function: ease-in-out;
  animation-duration: var(--choice-animation-duration, 100ms);
  animation-delay: var(--choice-animation-delay, 0ms);
}

.choice-animation-overlay--exit {
  display: block;
  opacity: 1;

  animation-name: choice-overlay-exit;
}

.choice-animation-placeholder--exit {
  z-index: var(--z-index-choices-top);
  opacity: 1;

  animation-name: choice-placeholder-exit;
}

.choice-animation-cards--exit {
  --_spread-factor: 0.5;

  position: fixed;
  bottom: 220px;
  z-index: var(--z-index-choices-top);

  transform: scale(1);

  animation-name: choice-cards-exit;
}

.choice-animation-card--selected {
  box-shadow: 0 10px 22px rgba(31, 41, 51, 0.08);

  animation-name: choice-card-selected;
}

@keyframes choice-overlay-exit {
  to {
    opacity: 0;
  }
}

@keyframes choice-placeholder-exit {
  to {
    z-index: 0;
    opacity: 0.5;
  }
}

@keyframes choice-cards-exit {
  to {
    opacity: 0;
  }
}

@keyframes choice-card-selected {
  50% {
    box-shadow:
      0 0 0 2px var(--choice-accent-border),
      0 14px 26px rgba(31, 41, 51, 0.13);
  }
  100% {
    box-shadow:
      0 0 0 2px var(--choice-accent-border),
      0 14px 26px rgba(31, 41, 51, 0.13);
  }
}

@media (min-width: 768px) {
  .choice-animation-overlay--exit,
  .choice-animation-placeholder--exit,
  .choice-animation-cards--exit,
  .choice-animation-card--selected {
    animation-delay: calc(var(--choice-animation-delay) / 4);
  }

  .code-cards-board--active,
  .choice-animation-cards--exit {
    position: absolute;
    bottom: 150px;
  }
  
  .choice-animation-cards--exit {
    animation-duration: 10ms;
  }

  @keyframes choice-cards-exit {
    to {
      position: absolute;
      bottom: 12px;
      z-index: 0;
      transform: scale(0.20);
      opacity: 0.5;
    }
  }
}

/*
  Result screen
*/

.choice-result-screen {
  --choice-result-perfect-color: #ff8e72;
  --choice-result-good-color: #766bb8;
  --choice-result-average-color: #8b94a3;
  --choice-result-score-color: var(--choice-result-perfect-color);

  position: absolute;
  inset: 0;
  z-index: 15;

  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;

  background: rgba(0, 0, 0, 0.2);
}

.choice-result-screen.hidden {
  display: none;
}

.choice-result-screen__panel {
  position: relative;

  width: 330px;
  max-width: 100%;
  padding: 30px 34px;

  color: #15152a;
  text-align: center;

  background: #ffffff;
  border-radius: 10px;
  background: #f8f8f8;
    box-shadow:
      0 0 2px #ccc,
      0 0 0 5px #fff,
       5px 5px 35px #ccc
}

.choice-result-screen__icon {
  width: 58px;
  height: 58px;
  margin: 0 auto;
  margin-bottom: 20px;

  background-image: url(/mfront/img/courses/completed-icon.png);
  background-size: 91px;
  background-position: -17px -13px;
  border-radius: 50%;

  box-shadow: 0 8px 24px rgba(255, 142, 114, 0.22);
}

.choice-result-screen__title {
  margin: 0;
  margin-bottom: 14px;

  font-size: 20px;
  line-height: 26px;
  font-weight: bold;
  color: #15152a;
}

.choice-result-screen__stars {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 7px;
}

.choice-result-screen__star {
  width: 38px;
  height: 38px;

  background: linear-gradient(135deg, #ffe36a 0%, #ffbf2f 100%);
  clip-path: polygon(50% 0, 63% 33%, 98% 35%, 70% 57%, 79% 91%, 50% 72%, 21% 91%, 30% 57%, 2% 35%, 37% 33%);
  filter: drop-shadow(0 6px 5px rgba(255, 169, 29, 0.28));
}

.choice-result-screen__grade {
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;

  margin: 0;
  margin-bottom: 18px;

  font-size: 14px;
  line-height: 20px;
  color: var(--choice-result-score-color);
  text-transform: lowercase;
}

.choice-result-screen__grade::before,
.choice-result-screen__grade::after {
  content: "";

  width: 14px;
  height: 2px;

  background: var(--choice-result-score-color);
  border-radius: 999px;
}


.choice-result-screen__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  margin-bottom: 14px;
  padding: 8px 10px;

  background: #eee;
  border-radius: 8px;
  box-shadow: 0px 1px 2px 1px #ddd;
}

.choice-result-screen__meta-title {
  font-size: 12px;
  line-height: 18px;
  color: #15152a;
}

.choice-result-screen__meta-value {
  min-width: 34px;
  margin: 0;
  padding: 3px 8px;

  font-size: 14px;
  line-height: 18px;
  font-weight: 700;
  color: var(--choice-result-score-color);
  text-align: center;

  background: #ffffff;
  border-radius: 999px;
}

.choice-result-screen__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16/9;

  width: 262px;
  height: 147px;
  margin-bottom: 14px;

  background: #f6f1e9;
  border: 1px solid #ddd7cf;
  border-radius: 8px;
}

.choice-result-screen__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.choice-result-screen__button {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 10px;

  font: inherit;
  font-size: 14px;
  line-height: 18px;
  color: #ffffff;
  background: #766bb8;

  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.choice-result-screen__button:hover {
  color: #ffffff;
  background-color: #8e84c6;
  text-decoration: none;
}

.choice-result-screen__button:active {
  color: #ffffff;
  background-color: #665ba6;
}

.choice-result-screen__button:focus-visible {
  color: #ffffff;
  background-color: #8e84c6;
  box-shadow: 0 0 0 3px rgba(118, 107, 184, 0.28);
}

.choice-result-screen[data-score="perfect"] {
  --choice-result-score-color: var(--choice-result-perfect-color);
}

.choice-result-screen[data-score="good"] {
  --choice-result-score-color: var(--choice-result-good-color);
}

.choice-result-screen[data-score="average"] {
  --choice-result-score-color: var(--choice-result-average-color);
}

.choice-result-screen[data-score="good"] .choice-result-screen__star:nth-child(3),
.choice-result-screen[data-score="average"] .choice-result-screen__star:nth-child(2),
.choice-result-screen[data-score="average"] .choice-result-screen__star:nth-child(3) {
  opacity: 0.22;
}

@media (max-width: 768px) {
  .choice-result-screen {
    position: fixed;
    padding: 84px 20px 86px;
    overflow-y: auto;
  }

  .choice-result-screen__panel {
    width: 270px;
    padding: 24px;
  }

  .choice-result-screen__preview {
    width: 220px;
    height: 123px;
  }
}