/* Aroken — тест-драйв: тренажёр кода (trainer.js). Всё под .tdt — глобальных стилей нет, токены сайта с запасными значениями,
   файл работает и без app.css (стенд trainer-lab.html). Компоновка как у тренажёров Яндекс Практикума / CodePen:
   слева узкая колонка «Задание» (бриф заказчика + шаги), справа редактор и результат поровну, граница тянется (--edcols ставит движок).
   Подсказка шага — прямо в коде: виджет под строкой с активным полем (.tdt-lens). Главная кнопка — в нижней панели редактора.
   Высота — вся, что дала оболочка (панели прокручиваются внутри). Контейнер уже 960 px — вкладки «Задание / Код / Результат».
   От GTA здесь только «МИССИЯ ПРОЙДЕНА»: тёмная полоса поперёк экрана и крупная золотисто-белая надпись. Без неона и свечений.
   Финал: .tdt-in.is-full — превью поверх всего тренажёра (рамку от панели до полного размера анимирует движок), задание и редактор гаснут. */

.tdt {
  --tdt-lime: var(--lime, #C7FF2E);
  --tdt-lime-2: #D7FF45;
  --tdt-lime-3: #E7FF8A;
  --tdt-violet: #B8A3FF;
  --tdt-cobalt: #73D6FF;
  --tdt-coral: var(--coral, #FF6661);
  --tdt-ink: #131417;
  --tdt-font: var(--font, Inter, -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, sans-serif);
  --tdt-mono: var(--mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --tdt-ease: var(--ease, cubic-bezier(.2, .7, .2, 1));
  --tdt-spring: var(--spring, cubic-bezier(.34, 1.3, .5, 1));
  --tdt-side-bg: #101114;
  --tdt-code-bg: #0C0D10;
  --tdt-bar-bg: #111216;
  --tdt-view-bg: #16171B;
  --tdt-line: #1F2126;
  --tdt-line-2: #2A2D33;
  --tdt-muted: #96999F;
  --tdt-muted-2: rgba(255, 255, 255, .7);
  --tdt-gutter: 46px;
  position: relative;
  height: 100%;
  color: #fff;
  font: 400 15px/1.5 var(--tdt-font);
  letter-spacing: -.005em;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}
.tdt *, .tdt *::before, .tdt *::after { box-sizing: border-box; }
.tdt [hidden] { display: none !important; }
.tdt :where(h2, h3, p, ol, ul, dl, dd, figure) { margin: 0; }
.tdt :where(ol, ul) { padding: 0; list-style: none; }
.tdt :where(button) { font: inherit; color: inherit; }
.tdt :where(svg) { display: block; }
.tdt :focus-visible { outline: 2px solid var(--tdt-lime); outline-offset: 2px; }
.tdt code { font: 500 .92em/1 var(--tdt-mono); padding: 2px 5px; border-radius: 5px; background: rgba(255, 255, 255, .08); color: #fff; white-space: nowrap; }
.tdt kbd { display: inline-block; padding: 1px 5px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .18); font: 500 11px/1.4 var(--tdt-mono); color: rgba(255, 255, 255, .78); }
.tdt .tdt-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tdt-note { margin: 0; padding: 24px; border-radius: 16px; background: #111216; color: rgba(255, 255, 255, .7); font: 400 15px/1.5 var(--font, system-ui, sans-serif); }

/* ---------- Сетка: задание | редактор | граница | результат ---------- */
.tdt-in { container: tdt / inline-size; position: relative; height: 100%; display: flex; flex-direction: column; }
.tdt-switch { display: none; }
.tdt-work { flex: 1; min-height: 0; display: grid; grid-template-columns: var(--tdt-side, clamp(300px, 22vw, 380px)) var(--edcols, minmax(0, 1fr) 9px minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }

/* ---------- Кнопки ---------- */
.tdt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 1px solid var(--tdt-line-2); border-radius: 12px; background: none; color: #fff; font-size: 15px; font-weight: 600; letter-spacing: -.01em; cursor: pointer; transition: background .2s, border-color .2s; }
.tdt-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .06); border-color: #3A3E47; }
.tdt-btn:disabled { opacity: .4; cursor: not-allowed; }
.tdt-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0; border: 0; background: none; color: var(--tdt-muted-2); font-size: 14px; font-weight: 500; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 4px; cursor: pointer; }
.tdt-link:hover { color: #fff; text-decoration-color: currentColor; }
/* Главная — лайм, как .btn--primary сайта */
.tdt-cta { display: inline-flex; align-items: center; gap: 12px; height: 44px; padding: 0 7px 0 18px; border: 0; border-radius: 12px; background: linear-gradient(90deg, var(--tdt-lime-2), var(--tdt-lime-3)); color: #000; font-size: 15px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; cursor: pointer; transition: transform .2s var(--tdt-ease), box-shadow .2s var(--tdt-ease); }
.tdt-cta__arr { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: #000; color: var(--tdt-lime-2); transition: transform .3s var(--tdt-spring); }
.tdt-cta:hover:not(:disabled) { box-shadow: 0 6px 20px -6px rgba(215, 255, 69, .45); }
.tdt-cta:hover:not(:disabled) .tdt-cta__arr { transform: translateX(3px); }
.tdt-cta:active:not(:disabled) { transform: translateY(1px); }
.tdt-cta:disabled { opacity: .4; cursor: default; }
.tdt-cta--lg { height: 56px; padding-left: 20px; gap: 14px; font-size: 16px; }
.tdt-cta--lg .tdt-cta__arr { width: 38px; height: 38px; }
.tdt-cta--lg:not(:has(.tdt-cta__arr)) { padding: 0 22px; }

/* ================= Колонка «Задание» ================= */
.tdt-side { position: relative; min-width: 0; overflow-y: auto; padding: 22px 24px 32px; background: var(--tdt-side-bg); border-right: 1px solid var(--tdt-line); scrollbar-width: thin; scrollbar-color: #2A2D33 transparent; }
.tdt-side__kicker { font-size: 13.5px; font-weight: 500; color: var(--tdt-muted); }
.tdt-side__title { margin-top: 6px; font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.tdt-brief { margin-top: 18px; }
.tdt-brief__head { display: flex; align-items: center; gap: 10px; }
.tdt-brief__ava { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--c); color: var(--tdt-ink); font-size: 13px; font-weight: 700; }
.tdt-brief__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tdt-brief__who b { font-size: 14.5px; line-height: 19px; font-weight: 600; }
.tdt-brief__who small { font-size: 12.5px; line-height: 16px; color: var(--tdt-muted); }
.tdt-brief__pay { flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.tdt-brief__pay small { font-size: 12px; color: var(--tdt-muted); }
.tdt-brief__pay b { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tdt-brief__feed { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.tdt-msg { font-size: 14.5px; line-height: 21px; color: rgba(255, 255, 255, .8); text-wrap: pretty; }
.tdt-msg--me { align-self: flex-end; max-width: 88%; padding: 7px 12px; border-radius: 12px 12px 4px 12px; background: rgba(255, 255, 255, .07); color: #fff; }
.tdt-msg__link { color: var(--tdt-cobalt); font-weight: 600; text-decoration: none; }
.tdt-msg__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.tdt-copy { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 4px 4px 4px 10px; border-radius: 10px; background: #0B0C0E; box-shadow: inset 0 0 0 1px var(--tdt-line-2); }
.tdt .tdt-copy__url { flex: 1; min-width: 0; padding: 0; background: none; font: 500 12.5px/18px var(--tdt-mono); color: var(--tdt-cobalt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; user-select: all; }
.tdt-copy__btn { flex: none; min-height: 32px; padding: 0 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .07); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tdt-copy__btn:hover { background: rgba(255, 255, 255, .12); }
.tdt-copy__btn.is-ok { color: var(--tdt-lime); }

.tdt-tasks { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--tdt-line); }
.tdt-tasks__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.tdt-tasks__title { font-size: 13.5px; font-weight: 600; color: var(--tdt-muted); }
.tdt-tasks__count { font-size: 13px; color: var(--tdt-muted); font-variant-numeric: tabular-nums; }
.tdt-tasks__count b { color: #fff; font-weight: 600; }
.tdt-tasks__list { margin-top: 8px; }
.tdt-tasks__group { padding: 12px 0 4px; font-size: 12.5px; font-weight: 500; color: var(--tdt-muted); }
.tdt-task__btn { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 40px; margin: 0 -8px; width: calc(100% + 16px); padding: 8px; border: 0; border-radius: 10px; background: none; text-align: left; font-size: 14.5px; line-height: 20px; color: rgba(255, 255, 255, .8); cursor: pointer; transition: background .15s; }
.tdt-task__btn:hover { background: rgba(255, 255, 255, .04); }
.tdt-task__n { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--tdt-line-2); font: 600 11px/1 var(--tdt-font); color: var(--tdt-muted); font-variant-numeric: tabular-nums; }
.tdt-task__n i { font-style: normal; }
.tdt-task__n svg { display: none; width: 12px; height: 12px; }
.tdt-task__t code { font-size: .88em; }
.tdt-task.is-cur .tdt-task__n { background: var(--tdt-lime); box-shadow: none; color: var(--tdt-ink); }
.tdt-task.is-cur .tdt-task__btn { color: #fff; font-weight: 500; }
.tdt-task.is-active .tdt-task__btn { background: rgba(255, 255, 255, .05); }
.tdt-task.is-done .tdt-task__n { background: rgba(199, 255, 46, .14); box-shadow: none; color: var(--tdt-lime); }
.tdt-task.is-done .tdt-task__n i { display: none; }
.tdt-task.is-done .tdt-task__n svg { display: block; }
.tdt-task.is-done .tdt-task__btn { color: var(--tdt-muted); }

.tdt-case { display: flex; align-items: flex-start; gap: 12px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--tdt-line); }
.tdt-case__ava { flex: none; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.tdt-case__body { display: grid; gap: 3px; min-width: 0; font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .78); }
.tdt-case__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.tdt-case__who b { color: #fff; font-weight: 600; }
.tdt-case__who small { font-size: 12.5px; color: var(--tdt-muted); }
.tdt-case__text { text-wrap: pretty; }
.tdt-case__link { justify-self: start; padding: 2px 0; font-weight: 600; color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.tdt-case__link:hover { text-decoration-color: currentColor; }
.tdt-side__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--tdt-line); font-size: 13.5px; line-height: 19px; color: var(--tdt-muted); }

/* ================= Редактор ================= */
.tdt-ed { container: tdted / inline-size; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--tdt-code-bg); }
.tdt-ed__bar { flex: none; height: 44px; display: flex; align-items: flex-end; gap: 2px; padding: 0 10px; background: var(--tdt-bar-bg); border-bottom: 1px solid var(--tdt-line); overflow-x: auto; scrollbar-width: none; }
.tdt-ed__tabs { display: flex; gap: 2px; }
.tdt-ed__tab { position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 36px; margin-bottom: -1px; padding: 0 14px; border: 0; border-radius: 8px 8px 0 0; background: none; color: var(--tdt-muted); font: 500 13px/1 var(--tdt-mono); cursor: pointer; }
.tdt-ed__tab:hover { color: #fff; }
.tdt-ed__tab[aria-selected="true"], .tdt-ed__tab.is-single { background: var(--tdt-code-bg); color: #fff; box-shadow: inset 0 1px 0 var(--tdt-line-2), inset 1px 0 0 var(--tdt-line), inset -1px 0 0 var(--tdt-line); }
.tdt-ed__tabdot { width: 6px; height: 6px; border-radius: 50%; background: var(--tdt-lime); opacity: 0; transition: opacity .2s; }
.tdt-ed__tab.has-open .tdt-ed__tabdot { opacity: 1; }
.tdt-ed__code { position: relative; flex: 1; min-height: 0; overflow: auto; padding: 14px 0 48px; font: 400 13.5px/23px var(--tdt-mono); color: #E6E8EE; scrollbar-width: thin; scrollbar-color: #2A2D33 transparent; outline: none; }
.tdt-ed__foot { flex: none; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px; background: var(--tdt-bar-bg); border-top: 1px solid var(--tdt-line); }
.tdt-bar { display: flex; gap: 4px; width: min(40%, 200px); }
.tdt-bar i { flex: 1; height: 4px; border-radius: 2px; background: #25282E; transition: background .3s; }
.tdt-bar i.is-cur { background: rgba(199, 255, 46, .35); }
.tdt-bar i.is-done { background: var(--tdt-lime); }
.tdt-ed__count { font-size: 13px; color: var(--tdt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdt-ed__foot .tdt-cta { margin-left: auto; }
.tdt-in.has-done .tdt-ed__foot .tdt-cta { visibility: hidden; }

/* Строки кода: перенос вместо горизонтальной прокрутки — панель узкая, а подсказка живёт между строк */
.tdt-ln { display: flex; min-height: 23px; padding-right: 16px; }
.tdt-ln__n { flex: none; width: var(--tdt-gutter); padding-right: 14px; color: rgba(255, 255, 255, .22); text-align: right; font-variant-numeric: tabular-nums; user-select: none; }
.tdt-ln__c { flex: 1 1 auto; min-width: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.tdt-ln.is-active { background: rgba(255, 255, 255, .035); }
.tdt-ln.is-active .tdt-ln__n { color: var(--tdt-lime); }
.tdt-t--p { color: rgba(226, 229, 236, .45); }
.tdt-t--k { color: var(--tdt-violet); }
.tdt-t--a { color: #E7FF8A; }
.tdt-t--s { color: rgba(115, 214, 255, .92); }
.tdt-t--c { color: rgba(186, 191, 201, .5); }
.tdt-t--sel { color: #E7FF8A; }
.tdt-t--prop { color: var(--tdt-cobalt); }
.tdt-t--v { color: #FF9B94; }
.tdt-fold__btn { display: flex; width: 100%; min-height: 23px; padding: 0 16px 0 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.tdt-fold__lbl { white-space: pre-wrap; color: rgba(186, 191, 201, .6); }
.tdt-fold__pill { display: inline-flex; align-items: center; gap: 6px; padding: 0 8px 0 5px; border-radius: 6px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); font-family: var(--tdt-font); font-size: 12.5px; line-height: 21px; transition: background .2s, color .2s; }
.tdt-fold__pill small { font-size: 11.5px; color: rgba(255, 255, 255, .38); }
.tdt-fold__ico svg { width: 12px; height: 12px; transition: transform .2s; }
.tdt-fold__btn:hover .tdt-fold__pill { background: rgba(255, 255, 255, .09); color: #fff; }
.tdt-fold.is-open > .tdt-fold__btn .tdt-fold__ico svg { transform: rotate(90deg); }

/* Поля прямо в коде */
.tdt-slot { position: relative; display: inline-flex; align-items: baseline; white-space: nowrap; }
.tdt-slot__in { width: 6ch; max-width: min(60ch, 100%); height: 23px; margin: 0 1px; padding: 0 4px; border: 0; border-radius: 5px; background: rgba(199, 255, 46, .07); box-shadow: inset 0 -1.5px 0 rgba(199, 255, 46, .5); color: inherit; font: inherit; line-height: 23px; letter-spacing: 0; caret-color: var(--tdt-lime); outline: none; transition: box-shadow .2s, background .2s; }
.tdt-slot__in::placeholder { color: rgba(255, 255, 255, .32); opacity: 1; }
.tdt-slot.is-active .tdt-slot__in { background: rgba(199, 255, 46, .12); box-shadow: 0 0 0 1.5px var(--tdt-lime); }
.tdt-slot__in:focus-visible { box-shadow: 0 0 0 2px var(--tdt-lime); }
.tdt-slot.is-ok .tdt-slot__in { background: rgba(199, 255, 46, .05); box-shadow: inset 0 -1.5px 0 rgba(199, 255, 46, .3); }
.tdt-slot.is-ok.is-active .tdt-slot__in { box-shadow: 0 0 0 1.5px rgba(199, 255, 46, .75); }
.tdt-slot.is-bad .tdt-slot__in { box-shadow: 0 0 0 1.5px var(--tdt-coral); animation: tdt-shake .32s; }
.tdt-slot__n { align-self: center; display: inline-grid; place-items: center; width: 16px; height: 16px; margin: 0 2px 0 3px; border-radius: 50%; background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .8); font: 700 10px/1 var(--tdt-font); }
.tdt-slot__n i { font-style: normal; }
.tdt-slot__n svg { display: none; width: 11px; height: 11px; }
.tdt-slot.is-active .tdt-slot__n, .tdt-slot.is-ok .tdt-slot__n { background: var(--tdt-lime); color: var(--tdt-ink); }
.tdt-slot.is-ok .tdt-slot__n i { display: none; }
.tdt-slot.is-ok .tdt-slot__n svg { display: block; }
.tdt-slot.is-pop .tdt-slot__n { animation: tdt-pop .5s var(--tdt-spring); }
.tdt-mirror { display: inline-block; min-width: 1ch; border-bottom: 1px dotted rgba(184, 163, 255, .45); }
.tdt-free { display: inline-flex; }
.tdt-free__in { width: 6ch; max-width: min(60ch, 100%); height: 23px; padding: 0 2px; margin: 0 -2px; border: 0; border-radius: 4px; background: none; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .2); color: inherit; font: inherit; line-height: 23px; letter-spacing: 0; caret-color: var(--tdt-lime); outline: none; }
.tdt-free__in:hover { background: rgba(255, 255, 255, .05); }
.tdt-free__in:focus { background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .5); }

/* Подсказка шага — виджет между строк кода */
.tdt-lens { position: relative; margin: 6px 16px 10px var(--tdt-gutter); padding: 12px 14px; border-radius: 10px; background: #17191D; box-shadow: inset 0 0 0 1px var(--tdt-line-2), inset 2px 0 0 var(--tdt-lime); font: 400 14px/20px var(--tdt-font); letter-spacing: -.005em; color: #fff; white-space: normal; outline: none; animation: tdt-lens .25s var(--tdt-ease); }
.tdt-lens::before { content: ""; position: absolute; left: 18px; top: -5px; width: 9px; height: 9px; background: #17191D; box-shadow: -1px -1px 0 var(--tdt-line-2); transform: rotate(45deg); }
.tdt-lens__head { display: flex; align-items: flex-start; gap: 10px; }
.tdt-lens__n { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--tdt-lime); color: var(--tdt-ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tdt-lens__n svg { width: 12px; height: 12px; }
.tdt-lens__task { font-weight: 600; text-wrap: pretty; }
.tdt-lens__task small { display: block; margin-top: 1px; font-size: 12.5px; font-weight: 400; color: var(--tdt-muted); }
.tdt-lens__hint { margin: 8px 0 0 30px; color: var(--tdt-muted-2); text-wrap: pretty; }
.tdt-lens__hint:empty { display: none; }
.tdt-lens__tips { margin: 6px 0 0 30px; display: grid; gap: 4px; color: #fff; }
.tdt-lens__tips:empty { display: none; }
.tdt-lens__tips b { font-weight: 600; color: var(--tdt-cobalt); }
.tdt-lens__state { margin: 8px 0 0 30px; font-weight: 500; }
.tdt-lens__state[data-kind="ok"] { color: var(--tdt-lime); }
.tdt-lens__state[data-kind="bad"] { color: #FF9B94; }
.tdt-lens__state[data-kind="info"] { color: var(--tdt-cobalt); }
.tdt-lens__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0 30px; }
.tdt-lbtn { height: 30px; padding: 0 12px; border: 1px solid var(--tdt-line-2); border-radius: 8px; background: none; color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s; }
.tdt-lbtn:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.tdt-lbtn:disabled { opacity: .38; cursor: default; }
.tdt-lens__kbd { margin-left: auto; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--tdt-muted); }
.tdt-lens__kbd kbd + kbd { margin-left: 6px; }
.tdt-lens[data-mode="check"] .tdt-lens__acts, .tdt-lens[data-mode="done"] .tdt-lens__acts { display: none; }
.tdt-keys { display: none; gap: 6px; margin: 10px -14px 0 16px; padding-right: 14px; overflow-x: auto; scrollbar-width: none; }
.tdt-keys::-webkit-scrollbar { display: none; }
.tdt-lens[data-mode="check"] .tdt-keys, .tdt-lens[data-mode="done"] .tdt-keys { display: none; }
.tdt-key { flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--tdt-line-2); border-radius: 10px; background: #1C1E24; color: #fff; font: 500 15px/1 var(--tdt-mono); cursor: pointer; }
.tdt-key:active { background: #2A2D35; }
.tdt-key--word { font-size: 14px; }
.tdt-key__sw { width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }

/* ---------- Граница редактора и результата ---------- */
.tdt-split { position: relative; background: var(--tdt-code-bg); cursor: col-resize; touch-action: none; outline: none; }
.tdt-split::before { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--tdt-line-2); transition: background .15s; }
.tdt-split::after { content: ""; position: absolute; left: 2px; top: 50%; width: 5px; height: 36px; margin-top: -18px; border-radius: 3px; background: #2A2D33; transition: background .15s; }
.tdt-split:hover::before, .tdt-split:focus-visible::before, .tdt.is-dragging .tdt-split::before { background: rgba(199, 255, 46, .6); }
.tdt-split:hover::after, .tdt-split:focus-visible::after, .tdt.is-dragging .tdt-split::after { background: var(--tdt-lime); }
.tdt.is-dragging, .tdt.is-dragging * { cursor: col-resize !important; user-select: none; }
.tdt.is-dragging iframe { pointer-events: none; }

/* ================= Результат ================= */
.tdt-view { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--tdt-view-bg); }
.tdt-view__bar { flex: none; height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; background: var(--tdt-bar-bg); border-bottom: 1px solid var(--tdt-line); }
.tdt-view__url { flex: 1; min-width: 0; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border-radius: 8px; background: #0B0C0E; color: var(--tdt-muted-2); font-size: 13px; }
.tdt-view__url svg { flex: none; width: 12px; height: 12px; color: var(--tdt-muted); }
.tdt-view__url span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tdt-seg { flex: none; display: flex; gap: 2px; padding: 2px; border-radius: 9px; background: #0B0C0E; }
.tdt-seg__btn { width: 36px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 7px; background: none; color: var(--tdt-muted); cursor: pointer; }
.tdt-seg__btn svg { width: 16px; height: 16px; }
.tdt-seg__btn:hover { color: #fff; }
.tdt-seg__btn[aria-pressed="true"] { background: #25282E; color: #fff; }
.tdt-view__stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.tdt-view__stage.is-phone { display: grid; place-items: center; background: #1C1E23; }
.tdt-view__screen { position: relative; overflow: hidden; background: #fff; }
.tdt-view__stage.is-bezel .tdt-view__screen { border-radius: 26px; box-shadow: 0 0 0 7px #2A2D33, 0 26px 40px -18px rgba(0, 0, 0, .6); }
.tdt-frame { position: absolute; left: 0; top: 0; border: 0; background: #fff; transform-origin: 0 0; transition: opacity .15s; }
.tdt-frame.is-next { opacity: 0; pointer-events: none; }
.tdt-view__foot { flex: none; min-height: 60px; display: flex; align-items: center; padding: 8px 16px; background: var(--tdt-bar-bg); border-top: 1px solid var(--tdt-line); font-size: 13.5px; line-height: 19px; color: var(--tdt-muted-2); text-wrap: pretty; }
.tdt-view__foot.is-err { color: #FF9B94; }
.tdt-view.is-pulse .tdt-view__stage::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; box-shadow: inset 0 0 0 3px var(--tdt-lime); animation: tdt-pulse 1.1s var(--tdt-ease) forwards; }
.tdt-view__back { flex: none; min-height: 30px; height: 30px; padding: 0 12px; border-radius: 8px; font-size: 13px; }
.tdt-view__back-s { display: none; }
.tdt-toast { position: absolute; left: 50%; top: 14px; z-index: 7; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: rgba(19, 20, 23, .95); color: #fff; font-size: 14px; line-height: 19px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .2s, transform .2s, visibility 0s .2s; pointer-events: none; }
.tdt-toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity .25s, transform .3s var(--tdt-ease), visibility 0s; }

/* ================= Финал: сайт на весь тренажёр (полный просмотр) ================= */
.tdt-in.is-full .tdt-view { position: absolute; inset: 0; z-index: 20; }
.tdt-in.is-full:not(.is-closing) .tdt-view__foot { display: none; }
.tdt-in.is-full:not(.is-closing) :is(.tdt-side, .tdt-ed, .tdt-split, .tdt-switch) { opacity: 0; visibility: hidden; transition: opacity .4s ease, visibility 0s .4s; }
.tdt-in.is-closing :is(.tdt-side, .tdt-ed, .tdt-split) { transition: opacity .4s ease .12s; }

/* ================= «МИССИЯ ПРОЙДЕНА» — как в игре: тёмная полоса поперёк экрана, крупная золотисто-белая надпись ================= */
/* Проявляется плавно (~0,5 с): затемнение, полоса раскрывается от середины, надпись поднимается и собирается; сайт играет под ней */
.tdt-done { position: absolute; inset: 0; z-index: 30; display: grid; align-items: center; background: rgba(6, 6, 7, .34); opacity: 0; transition: opacity .5s ease; }
.tdt-done.is-in { opacity: 1; }
.tdt-done__band { position: relative; padding: 44px 24px 40px; background: rgba(0, 0, 0, .8); border-block: 1px solid rgba(255, 226, 150, .14); text-align: center; outline: none; }
.tdt-done.is-in .tdt-done__band { animation: tdt-band .5s var(--tdt-ease) both; }
.tdt-done__title { font: 900 clamp(40px, 7.2cqi, 104px)/.95 var(--tdt-font); letter-spacing: -.01em; text-transform: uppercase; background: linear-gradient(180deg, #FFF8E2 8%, #FFE39A 55%, #E8B84A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tdt-done.is-in .tdt-done__title { animation: tdt-title .6s var(--tdt-ease) .08s both; }
.tdt-done.is-in .tdt-done__band > :not(.tdt-done__title) { animation: tdt-rise .45s var(--tdt-ease) .22s both; }
.tdt-done__msg { max-width: 640px; margin: 16px auto 0; font-size: 17px; line-height: 25px; color: #fff; text-wrap: balance; }
.tdt-done__msg span { color: var(--tdt-muted); }
.tdt-done__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; margin-top: 14px; font-size: 14px; color: var(--tdt-muted); }
.tdt-done__stats b { margin-left: 4px; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.tdt-done__next { max-width: 620px; margin: 18px auto 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 15.5px; line-height: 23px; color: var(--tdt-muted-2); text-wrap: balance; }
.tdt-done__pay { margin-top: 10px; font-size: 14px; color: var(--tdt-muted); }
.tdt-done__pay a { color: #fff; }
.tdt-done__acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 24px; }
.tdt-done__acts .tdt-btn { min-height: 56px; padding: 0 20px; }

/* ---------- Док над клавиатурой телефона ---------- */
.tdt-dock { position: fixed; left: 0; right: 0; bottom: var(--tdt-kb, 0px); z-index: 90; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(17, 18, 22, .98); border-top: 1px solid var(--tdt-line-2); }
.tdt-dock__state { display: -webkit-box; margin: 0 2px 6px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .72); }
.tdt-dock__state code { font-size: 12px; }
.tdt-dock__state:empty { display: none; }
.tdt-dock__state[data-kind="ok"] { color: var(--tdt-lime); }
.tdt-dock__state[data-kind="bad"] { color: #FF9B94; }
.tdt-dock__state[data-kind="info"] { color: var(--tdt-cobalt); }
.tdt-dock__row { display: flex; align-items: center; gap: 6px; }
.tdt-dock__hint { flex: none; min-height: 44px; }
.tdt-dock__keys { display: flex; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tdt-dock__keys::-webkit-scrollbar { display: none; }

/* ================= Узко: вкладки «Задание / Код / Результат» ================= */
@container tdt (max-width: 959px) {
  .tdt-switch { flex: none; display: flex; gap: 4px; padding: 6px 8px; background: var(--tdt-bar-bg); border-bottom: 1px solid var(--tdt-line); }
  .tdt-switch__btn { position: relative; flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: none; color: var(--tdt-muted); font-size: 15px; font-weight: 600; cursor: pointer; }
  .tdt-switch__btn[aria-selected="true"] { background: #25282E; color: #fff; }
  .tdt-switch__dot { position: absolute; top: 10px; right: calc(50% - 52px); width: 7px; height: 7px; border-radius: 50%; background: var(--tdt-lime); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .3s var(--tdt-spring); }
  .tdt-switch__btn.has-news .tdt-switch__dot { opacity: 1; transform: none; }
  .tdt-work { grid-template-columns: minmax(0, 1fr); }
  .tdt-split { display: none; }
  .tdt-in[data-view="task"] :is(.tdt-ed, .tdt-view), .tdt-in[data-view="code"] :is(.tdt-side, .tdt-view), .tdt-in[data-view="result"] :is(.tdt-side, .tdt-ed) { display: none; }
  .tdt-side { border-right: 0; padding: 20px 20px 32px; }
  .tdt-done__band { padding: 32px 20px 28px; }
  .tdt-done__acts .tdt-cta, .tdt-done__acts .tdt-btn { width: 100%; max-width: 420px; justify-content: space-between; }
  .tdt-done__acts .tdt-btn { justify-content: center; }
}
@container tdt (max-width: 559px) {
  .tdt { --tdt-gutter: 32px; }
  .tdt-ed__code { font-size: 13px; line-height: 22px; padding-top: 10px; }
  .tdt-ln { padding-right: 10px; }
  .tdt-ln__n { padding-right: 8px; }
  .tdt-lens { margin: 6px 8px 10px 8px; }
  .tdt-fold__pill { display: inline; padding: 1px 8px 1px 5px; line-height: 20px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .tdt-fold__ico { display: inline-block; vertical-align: -1px; margin-right: 4px; }
  .tdt-fold__pill small { margin-left: 6px; white-space: nowrap; }
  .tdt-lens::before { left: calc(var(--tdt-gutter) + 4px); }
  .tdt-lens__hint, .tdt-lens__tips, .tdt-lens__state, .tdt-lens__acts { margin-left: 0; }
  .tdt-lens__kbd { display: none; }
  .tdt-lbtn { height: 44px; padding: 0 14px; font-size: 14px; }
  .tdt-bar { width: 88px; }
  .tdt-ed__foot { gap: 10px; padding-left: 12px; }
  .tdt-cta { height: 48px; }
  .tdt-view__foot { min-height: 52px; font-size: 13px; }
  .tdt-seg__btn { width: 44px; height: 36px; }
  .tdt-view__bar { height: 48px; }
  .tdt-view__back-l { display: none; }
  .tdt-view__back-s { display: inline; }
  .tdt-done__msg { font-size: 15.5px; line-height: 23px; }
}

/* Узкий редактор (1024 и граница, сдвинутая влево): свёртки — строкой, клавиши-подсказки прячем */
@container tdted (max-width: 479px) {
  .tdt-fold__pill { display: inline; padding: 1px 8px 1px 5px; line-height: 20px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .tdt-fold__ico { display: inline-block; vertical-align: -1px; margin-right: 4px; }
  .tdt-fold__pill small { margin-left: 6px; white-space: nowrap; }
  .tdt-lens { margin-right: 10px; }
  .tdt-lens__kbd { display: none; }
  .tdt-lens__hint, .tdt-lens__tips, .tdt-lens__state, .tdt-lens__acts { margin-left: 0; }
}

/* Телефон и касание: поля 16 px (без зума iOS), кнопки 44 px, быстрые вставки под подсказкой.
   Поле в строке кода — 30 px высотой, а зона нажатия расширена до 46 px (::after; тап по строке тоже ставит курсор в ближайшее поле) */
@media (pointer: coarse), (max-width: 767px) {
  .tdt-slot__in, .tdt-free__in { height: 30px; font-size: 16px; line-height: 30px; }
  .tdt-slot::after, .tdt-free::after { content: ""; position: absolute; left: -8px; right: -8px; top: -8px; bottom: -8px; }
  .tdt-free { position: relative; }
  .tdt-ed__tab { height: 44px; }
  .tdt-ed__bar { height: 52px; }
  .tdt-lens__kbd { display: none; }
  .tdt-keys { display: flex; }
  .tdt-copy__btn, .tdt-task__btn { min-height: 44px; }
  .tdt-case__link { padding: 12px 0; margin: -8px 0 -10px; }
  .tdt-msg__link { display: inline-block; padding: 12px 0; margin: -12px 0; }
  .tdt-link { min-height: 44px; }
  .tdt-seg__btn { height: 44px; } /* «Компьютер / Телефон» у превью — палец, не мышь */
  .tdt-view__back { height: 44px; min-height: 44px; }
  .tdt-done__pay a { padding: 12px 0; margin: -12px 0; } /* «скрин реальной оплаты» — зона нажатия 44 без сдвига строки */
}

@keyframes tdt-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@keyframes tdt-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: none; } }
@keyframes tdt-pulse { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tdt-lens { from { opacity: 0; transform: translateY(-4px); } }
@keyframes tdt-band { from { clip-path: inset(50% 0); } to { clip-path: inset(0); } }
@keyframes tdt-title { from { opacity: 0; transform: translateY(16px); letter-spacing: .08em; } }
@keyframes tdt-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .tdt *, .tdt *::before, .tdt *::after { animation: none !important; transition: none !important; }
}