/* exxam.ru — страница задания: слой поверх base.css + content.css.
   Каркас (шапка, сетка .page/.doc/.rail, .card/.btn/.ex/.step/.ref/.answer/.viewer)
   полностью в base.css и content.css. Здесь только добавления SEO-слоя. */

/* ---------- общие мелочи ---------- */
body.task .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* шапка задания: бейдж и заголовок в одну строку (иначе длинный H1 «сваливает» заголовок под бейдж) */
body.task .task-head .row{flex-wrap:nowrap}
body.task .card > h2{margin:0 0 12px}
body.task .intro p{margin:0 0 10px}
body.task .intro p:last-child{margin-bottom:0}
body.task .intro h3{margin:16px 0 8px;font-size:16px;font-weight:700}
body.task .intro ul,body.task .intro ol{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:6px;color:var(--muted)}
body.task .intro li{line-height:1.6}
body.task .ex.answer-line{margin-top:16px;border-left-color:var(--mint)}
body.task .bar.full i{width:100%}
body.task a.trow{text-decoration:none}
body.task .figrow svg:not(.tree-svg){width:100%;max-width:420px;height:auto;display:block;margin:6px auto}

/* ---------- частые вопросы ---------- */
body.task .faq-card .faq{margin-top:4px}
body.task .faq details{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--panel)}
body.task .faq summary{cursor:pointer;font-weight:700;padding:13px 15px;list-style:none;display:flex;align-items:center;gap:9px}
body.task .faq summary::-webkit-details-marker{display:none}
body.task .faq summary::before{content:"▸";color:var(--violet);transition:transform .15s;flex:none}
body.task .faq details[open] summary::before{transform:rotate(90deg)}
body.task .faq .body{padding:0 16px 15px 41px;color:var(--ink);line-height:1.6}

/* ---------- смежные задания ---------- */
body.task .related-list{display:flex;flex-direction:column;gap:10px;margin:12px 0 0;padding:0;list-style:none}
body.task .related-list a{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
body.task .related-list a:hover{border-color:var(--violet);background:var(--panel-2)}
body.task .related-list .num{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;background:var(--violet-soft);color:var(--violet)}
body.task .related-list .tt{font-weight:600}

@media (max-width:680px){
  body.task .faq .body{padding-left:16px}
}

/* ---------- практикум задания 4 ---------- */
body.task .doc-page{position:relative;z-index:2;max-width:968px;margin:0 auto;padding:22px 24px 60px}
body.task .fano .tree-svg{max-width:100%}
body.task .fano-treewrap{overflow-x:auto;padding-bottom:4px}
@media (max-width:640px){
  body.task .doc-page{padding:18px 16px 52px}
  body.task .fano-treewrap .tree-svg{min-width:640px}
}

/* ---------- песочница Python (решение программой, Pyodide + CodeMirror) ---------- */
body.task .py-solution{margin-top:20px}
body.task .pyrunner{padding:16px 18px;border:1.5px solid var(--line-strong);border-radius:14px;background:var(--panel)}
body.task .pyrunner .py-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.task .pyrunner .py-head h2{margin:0;font-size:18px}
body.task .pyrunner .py-badge{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:999px;padding:4px 10px}
body.task .pyrunner .py-intro{margin:8px 0 14px;font-size:14.5px;line-height:1.65;color:var(--lead-ink);max-width:74ch}
body.task .pyrunner .py-files{margin:0 0 14px;font-size:14px;line-height:1.6;color:var(--ink);background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:9px 12px;max-width:74ch}
body.task .pyrunner kbd{background:var(--violet-soft);border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;padding:1px 6px;font-family:inherit;font-size:11px}

/* действия */
body.task .pyrunner .py-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
body.task .pyrunner .py-status{font-size:13px;color:var(--muted);font-weight:600}

/* блок интерпретатора: редактор сверху, вывод снизу, перетаскиваемый разделитель;
   весь блок можно тянуть за угол (resize: vertical). */
body.task .py-split{display:flex;flex-direction:column;height:560px;min-height:240px;resize:vertical;overflow:hidden;
  border:1.5px solid var(--line-strong);border-radius:12px;background:var(--panel)}
body.task .py-split:focus-within{border-color:var(--accent)}
body.task .py-pane{min-height:0;display:flex;flex-direction:column;overflow:hidden}
body.task .py-top{height:var(--py-top,300px);flex:none}
body.task .py-bottom{flex:1;min-height:0}

/* редактор */
body.task .py-editor{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
body.task .py-editor-fallback{display:block;flex:1;width:100%;min-height:0;border:none;outline:none;resize:none;padding:14px 16px;background:transparent;color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.6}
body.task .py-editor .cm-editor{height:100%;background:var(--panel);color:var(--ink);font-size:15px}
body.task .py-editor .cm-editor.cm-focused{outline:none}
body.task .py-editor .cm-scroller{font-family:var(--mono);line-height:1.6;overflow:auto}
body.task .py-editor .cm-gutters{background:var(--panel-2);border-right:1px solid var(--line);color:var(--muted)}
body.task .py-editor .cm-activeLine,body.task .py-editor .cm-activeLineGutter{background:color-mix(in srgb,var(--accent) 7%,transparent)}

/* разделитель */
body.task .py-divider{height:12px;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--panel-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  cursor:row-resize;touch-action:none;user-select:none}
body.task .py-divider:hover,body.task .py-divider.dragging{background:var(--accent-soft)}
body.task .py-divider:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
body.task .py-grip{width:40px;height:4px;border-radius:2px;background:var(--line-strong)}
body.task .py-divider:hover .py-grip,body.task .py-divider.dragging .py-grip{background:var(--accent)}

/* вывод */
body.task .py-console{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;background:var(--panel)}
body.task .py-console-head{display:flex;align-items:center;gap:10px;flex:none;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding:8px 14px;border-bottom:1px solid var(--line)}
body.task .py-console-title{flex:1}
body.task .py-clear{cursor:pointer;font-family:inherit;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:8px;padding:4px 10px}
body.task .py-clear:hover{color:var(--accent);border-color:var(--accent)}
body.task .py-trimmed{flex:none;padding:6px 14px;font-size:12px;color:var(--muted);background:var(--panel-2);border-bottom:1px solid var(--line)}
body.task .py-empty{flex:1;padding:14px 16px;color:var(--muted);font-size:13.5px}
body.task .py-empty .mono{font-family:var(--mono)}
body.task .py-loading{display:flex;align-items:center;gap:9px;color:var(--accent);font-weight:600}
body.task .py-dot{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:py-pulse 1s ease-in-out infinite}
@keyframes py-pulse{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
body.task .py-out{flex:1;min-height:0;overflow:auto;margin:0;padding:12px 16px;font-family:var(--mono);font-size:13.5px;line-height:1.6;white-space:pre-wrap;word-break:break-word}
body.task .py-line{display:block}
body.task .py-line.err{color:var(--bad)}
body.task .py-line.hint{color:var(--accent);font-weight:600}
body.task .py-line.sys{color:var(--muted);font-style:italic}
body.task .py-jump{position:absolute;right:14px;bottom:12px;cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--panel);background:var(--accent);border:none;border-radius:999px;padding:7px 14px;box-shadow:var(--shadow-sm)}
body.task .py-jump:hover{filter:brightness(1.05)}

@media (max-width:640px){
  body.task .py-split{height:480px}
}

/* ---------- «полный экран» интерактивных сред (Черепаха, Python) ---------- */
body.task .is-fullscreen{position:fixed;inset:0;z-index:200;margin:0;border-radius:0;background:var(--bg);
  display:flex;flex-direction:column;overflow:hidden;padding:14px clamp(14px,2.5vw,36px) 18px}
body.task .is-fullscreen .tr-intro,body.task .is-fullscreen .py-intro{display:none}
body.task .py-expand,body.task .tr-expand{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;flex:none;margin-left:auto;padding:0;color:var(--muted);background:var(--panel-2);
  border:1.5px solid var(--line-strong);border-radius:9px}
body.task .py-expand:hover,body.task .tr-expand:hover{color:var(--accent);border-color:var(--accent)}
body.task .py-expand svg,body.task .tr-expand svg{width:18px;height:18px}
body.task .pyrunner.is-fullscreen .py-split{flex:1;height:auto !important;min-height:0;resize:none}

/* ---------- интерпретатор Черепахи (решение задания 6) ---------- */
body.task .sol-tools{margin-top:20px}
body.task .sol-lang{display:inline-flex;gap:4px;padding:4px;border:1.5px solid var(--line-strong);border-radius:999px;background:var(--panel-2);margin-bottom:14px}
body.task .lang-btn{cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);background:transparent;border:none;border-radius:999px;padding:7px 16px}
body.task .lang-btn:hover{color:var(--ink)}
body.task .lang-btn.on{color:#fff;background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}

body.task .turtle-runner{padding:16px 18px;border:1.5px solid var(--line-strong);border-radius:0;background:var(--panel)}
body.task .turtle-runner .btn{border-radius:0}
body.task .turtle-runner.is-fullscreen{gap:8px}
body.task .tr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
body.task .tr-head h2{margin:0;font-size:18px}
body.task .tr-badge{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);background:var(--accent-soft);border-radius:0;padding:4px 10px}
body.task .tr-intro{margin:8px 0 12px;font-size:14.5px;line-height:1.65;color:var(--lead-ink);max-width:74ch}
body.task .tr-intro .mono{color:var(--accent);font-weight:600}

body.task .tr-modes{display:inline-flex;gap:4px;padding:4px;border:1.5px solid var(--line-strong);border-radius:0;background:var(--panel-2);margin:0 0 12px}
body.task .tr-mode{cursor:pointer;font-family:inherit;font-size:14px;font-weight:700;color:var(--muted);background:transparent;border:none;border-radius:0;padding:7px 16px}
body.task .tr-mode:hover{color:var(--ink)}
body.task .tr-mode.on{color:#fff;background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}
body.task .turtle-runner .tr-expand{border-radius:0}

/* блок управления — над полем, чтобы код был сразу под отрисовкой */
body.task .tr-controls{display:flex;flex-direction:column;gap:8px;margin:0 0 12px}
body.task .tr-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.task .tr-play{display:flex;gap:8px;flex-wrap:wrap}
body.task .tr-speed{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--lead-ink);white-space:nowrap}
body.task .tr-speed-cap{font-weight:600}
body.task .tr-speed-edge{font-size:12px;color:var(--muted)}
body.task .tr-speed input[type=range]{width:120px;accent-color:var(--accent)}
body.task .tr-toggle{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--lead-ink);cursor:pointer}
body.task .tr-toggle input{width:16px;height:16px;accent-color:var(--accent)}
body.task .tr-result{display:flex;align-items:baseline;gap:8px;margin-left:auto;min-height:28px}
body.task .tr-result-num{font-size:28px;font-weight:800;color:var(--mint);font-family:var(--mono);line-height:1}
body.task .tr-result-lbl{font-size:14px;color:var(--lead-ink)}
body.task .tr-legend{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);margin:0}
body.task .tr-key{display:inline-block;width:12px;height:12px;border-radius:0}
body.task .tr-key.start{background:var(--coral);border-radius:50%}
body.task .tr-key.path{background:var(--accent)}
body.task .tr-key.counted{background:var(--mint);border-radius:50%}
body.task .tr-key.target{background:var(--ink);border-radius:50%}
body.task .tr-key.target.done{background:var(--mint)}

/* поле отрисовки — заполняет доступную площадь; камера управляется вручную */
body.task .tr-figure{position:relative;height:clamp(320px,50vh,560px);overflow:visible;border:1.5px solid var(--line-strong);border-radius:0;background:var(--panel);padding:0}
body.task .tr-figure.grabbable{cursor:grab;touch-action:none}
body.task .tr-figure.panning{cursor:grabbing}
body.task .tr-figure svg{display:block;width:100%;height:100%}
body.task .turtle-runner.is-fullscreen .tr-figure{height:auto;flex:1;min-height:0}
body.task .tr-view{position:absolute;top:8px;right:8px;z-index:2;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
body.task .tr-scale{position:absolute;left:8px;bottom:8px;z-index:2;font-size:12.5px;font-weight:600;color:var(--muted);background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line-strong);border-radius:0;padding:5px 9px;pointer-events:none}
body.task .tr-vbtn{cursor:pointer;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:color-mix(in srgb,var(--panel) 88%,transparent);border:1px solid var(--line-strong);border-radius:0;padding:5px 9px}
body.task .tr-vbtn:hover{color:var(--accent);border-color:var(--accent)}
body.task .tr-vbtn.on{color:#fff;background:var(--accent);border-color:var(--accent)}
body.task .tr-help{position:relative;display:inline-flex}
body.task .tr-help-btn{font-weight:800;min-width:32px;text-align:center}
body.task .tr-help-pop{position:absolute;top:calc(100% + 8px);right:0;z-index:5;display:none;width:min(440px,86vw);max-height:60vh;overflow:auto;overscroll-behavior:contain;text-align:left;background:var(--panel);border:1.5px solid var(--line-strong);border-radius:0;padding:14px 16px;box-shadow:var(--shadow)}
body.task .tr-help.open .tr-help-pop{display:block}
body.task .tr-help-lead{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--lead-ink)}
body.task .tr-help-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px}
body.task .tr-help-list li{font-size:13.5px;line-height:1.5;color:var(--lead-ink)}
body.task .tr-help-list .mono{color:var(--accent);font-weight:700;white-space:nowrap}
body.task .tr-help-note{margin:8px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
body.task .tr-help-sub{margin:14px 0 6px;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.task .tr-help-ex{margin:0;padding:10px 12px;background:var(--panel-2);border:1px solid var(--line);border-radius:0;font-size:13px;line-height:1.5;overflow-x:auto;white-space:pre}
body.task .tr-bg{fill:var(--panel)}
body.task .tr-axis{stroke:color-mix(in srgb,var(--ink) 9%,transparent);stroke-width:1.2px}
body.task .tr-dot{fill:#3b344f}
[data-theme="light"] body.task .tr-dot{fill:#e5e5e5}
@media (prefers-color-scheme: light){
  :root:not([data-theme]) body.task .tr-dot{fill:#e5e5e5}
}
body.task .tr-path{stroke:var(--accent);stroke-linejoin:round;stroke-linecap:round;stroke-width:2.2px}
body.task .tr-counted{fill:var(--mint)}
body.task .tr-start{fill:var(--coral)}

/* точки-цели практикума */
body.task .tr-target-ring{fill:color-mix(in srgb,var(--panel) 72%,transparent);stroke:var(--ink);stroke-width:1.6px;stroke-dasharray:3 2}
body.task .tr-target.done .tr-target-ring{stroke:var(--mint);stroke-dasharray:none}
body.task .tr-target-dot{stroke:var(--panel);stroke-width:1.4px;vector-effect:non-scaling-stroke}
body.task .tr-target-check{fill:none;stroke:#fff;stroke-width:2.4px;stroke-linecap:round;stroke-linejoin:round}
body.task .tr-target-label{fill:var(--ink);font-family:var(--mono);font-weight:800}
body.task .tr-target-coord{fill:var(--muted);font-family:var(--mono)}
body.task .tr-turtle-body{fill:var(--accent);opacity:.45;stroke:var(--panel);stroke-width:1px;vector-effect:non-scaling-stroke}
body.task .tr-wing{opacity:.8}
body.task .tr-turtle-head{fill:var(--accent);stroke:var(--panel);stroke-width:1px;vector-effect:non-scaling-stroke}
body.task .tr-turtle-arrow{fill:none;stroke:#ff2d2d;stroke-width:1.8px;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

/* попап с командой у черепашки */
body.task .tr-cmd-pop-bg{fill:var(--panel);stroke:var(--line-strong);stroke-width:1px}
body.task .tr-cmd-pop-tx{fill:var(--ink);font-family:var(--mono);font-weight:700}

/* код программы и шаги — сразу под полем */
body.task .tr-editor,body.task .tr-steps{display:flex;flex-direction:column;gap:10px;margin-top:10px}
body.task .tr-editor-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
body.task .tr-editor-tools{display:inline-flex;align-items:center;gap:10px}
body.task .tr-transport{display:inline-flex;align-items:center;gap:6px}
body.task .tr-tbtn{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;color:var(--ink);background:var(--panel-2);border:1px solid var(--line-strong);border-radius:0}
body.task .tr-tbtn:hover{color:var(--accent);border-color:var(--accent)}
body.task .tr-tbtn:disabled{opacity:.4;cursor:default}
body.task .tr-tbtn svg{width:18px;height:18px}
body.task .tr-reset-link{cursor:pointer;font:inherit;font-size:12.5px;color:var(--muted);background:none;border:none;padding:0;text-decoration:underline}
body.task .tr-reset-link:hover{color:var(--accent)}
body.task .tr-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.task .tr-code{width:100%;height:200px;overflow:hidden;border:1.5px solid var(--line-strong);border-radius:0;background:var(--panel-2)}
body.task .tr-code:focus-within{border-color:var(--accent)}
body.task .tr-code-input{display:block;width:100%;height:100%;border:none;outline:none;resize:none;background:transparent;color:var(--ink);font-family:var(--mono);font-size:14px;line-height:1.6;padding:12px 14px}
body.task .tr-code .cm-editor{height:100%;background:var(--panel-2);color:var(--ink);font-size:14px}
body.task .tr-code .cm-editor.cm-focused{outline:none}
body.task .tr-code .cm-scroller{font-family:var(--mono);line-height:1.6}
body.task .tr-code .cm-gutters{background:var(--panel);border-right:1px solid var(--line);color:var(--muted)}
body.task .cm-turtle-active{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--violet-border)}
body.task .turtle-runner.is-fullscreen .tr-code{height:160px}
body.task .tr-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
body.task .tr-hint{font-size:12.5px;color:var(--muted);margin:0}
body.task .tr-stepbar{display:flex;gap:10px;flex-wrap:wrap}
body.task .tr-stepinput{flex:1;min-width:180px;font-family:var(--mono);font-size:14px;padding:11px 14px;border:1.5px solid var(--line-strong);border-radius:0;background:var(--panel-2);color:var(--ink);outline:none}
body.task .tr-stepinput:focus{border-color:var(--accent)}
body.task .tr-journal{display:flex;flex-wrap:wrap;gap:6px}
body.task .tr-chip{font-family:var(--mono);font-size:12.5px;color:var(--ink);background:var(--violet-soft);border:1px solid var(--line);border-radius:0;padding:4px 9px}
body.task .tr-chip b{color:var(--muted);font-weight:700}
body.task .tr-error{color:var(--coral);background:var(--bad-soft);border-radius:0;padding:10px 12px;font-size:14px;margin:12px 0 0}

/* ---------- панель «Условие задачи»: исходные данные рядом с вопросом ---------- */
body.task .ref{max-height:calc(100vh - 104px);overflow:auto}
body.task .ref-cond{font-size:14.5px;line-height:1.65;color:var(--lead-ink)}
body.task .ref-cond p{margin:0 0 10px}
body.task .ref-cond p:last-child{margin-bottom:0}
body.task .ref-cond .cond-ex{margin:10px 0}
/* короткое «дано» в рейле (без общего текста условия) */
body.task .ref-given{font-size:14.5px;line-height:1.6;color:var(--lead-ink)}
body.task .ref-given p{margin:0 0 8px}
body.task .ref-given p:last-child{margin-bottom:0}
body.task .ref-given b{color:var(--ink)}

/* ---------- песочница: плашка «Дано» (не закреплена) и ошибка редактора ---------- */
body.task .sb-given{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--violet-soft);border:1px solid var(--line)}
body.task .sb-given-cap{font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
body.task .sb-given-list{display:flex;flex-wrap:wrap;gap:6px 18px}
body.task .sb-given-item{font-size:14px;color:var(--lead-ink)}
body.task .sb-given-item b{font-weight:700;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.03em;margin-right:4px}
body.task .sb-given-val .mono{font-family:var(--mono);font-weight:700;color:var(--accent)}
body.task .sb-given-q{flex-basis:100%}
body.task .sb-given-q .sb-given-val{font-weight:600;color:var(--ink)}
body.task .py-cm-error{padding:22px 18px;text-align:center;color:var(--lead-ink)}
body.task .py-cm-error p{margin:0 0 12px;font-size:14.5px;line-height:1.6}

/* ---------- песочница-сначала: лид и код-решение ---------- */
body.task .sandbox-lead{margin:0 0 14px;font-size:14.5px;line-height:1.65;color:var(--lead-ink);max-width:74ch}
body.task .sol-code{margin-top:16px}
body.task .sol-code-lead{margin:0 0 8px;font-weight:700;color:var(--ink)}
body.task .sol-code pre{margin:0 0 12px;padding:14px 16px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;font-size:15px;line-height:1.6;overflow-x:auto;white-space:pre}

@media (max-width:760px){
  body.task .tr-result{margin-left:0;width:100%}
  body.task .is-fullscreen{padding:10px 12px 14px}
}

/* ---------- туториал «Решение» по шагам (задания 3, 9) ---------- */
.t3-guide{display:flex;flex-direction:column;gap:24px;margin-top:10px}
.t3-gstep{display:flex;gap:14px;align-items:flex-start}
.t3-gnum{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--mono);font-weight:700;font-size:14px;background:var(--violet-soft);color:var(--violet)}
.t3-gbody{min-width:0}
.t3-gbody h3{margin:4px 0 8px;font-size:16px;font-weight:700;color:var(--ink)}
.t3-gbody .body p{margin:0 0 10px;line-height:1.7;color:var(--ink)}
.t3-gbody .body p:last-child{margin-bottom:0}
.t3-gbody .body .muted{color:var(--muted);font-size:14px}
.t3-gbody .figrow{margin-top:12px}

@media (max-width:520px){
  .t3-gstep{gap:10px}
  .t3-gnum{width:26px;height:26px;font-size:13px}
}

/* Пошаговый разбор Python (отладчик песочницы): переменные, транспорт, строка кода.
   Классы без префикса body.task, чтобы работали и в билетах, и в практикумах. */
.pytrace{margin-top:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);overflow:hidden}
.pytrace-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.pytrace-title{font-weight:700;color:var(--ink)}
.pytrace-err{padding:10px 12px;font-family:var(--mono);font-size:13px;white-space:pre-wrap;color:var(--coral)}
.pytrace-body{padding:12px}
.pytrace-line{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:10px;font-family:var(--mono);font-size:12.5px;color:var(--muted)}
.pytrace-line .pt-chg{color:var(--accent)}
.pt-vars{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.pt-var{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--accent);background:var(--violet-soft);border:1px solid var(--violet-border);border-radius:999px;padding:4px 10px;transition:background .15s ease,color .15s ease,border-color .15s ease;word-break:break-word}
.pt-var.chg{background:var(--chg-bg);border-color:var(--chg-bg);color:var(--chg-ink)}
.pt-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pt-ctrl .btn.sm{padding:4px 10px;line-height:1}
.pt-counter{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-left:auto}
.pt-note{width:100%;margin:8px 0 0;font-size:12.5px;color:var(--muted)}
.cm-trace-line{background:color-mix(in srgb,var(--violet) 24%,transparent);box-shadow:inset 3px 0 0 var(--violet)}