/* exxam.ru — практикум: страничный слой поверх base.css + content.css.
   Всё ограничено body.practice. Общие компоненты (.card/.btn/.chip/.ex/.task-head,
   графы, таблицы расстояний) — из base.css/content.css. */

/* ---------- настройки ---------- */
body.practice .settings{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:flex-end}
body.practice .set{display:grid;gap:7px}
body.practice .set .cap{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.practice .seg{display:inline-flex;background:var(--violet-soft);border-radius:11px;padding:3px;gap:2px}
body.practice .seg button{border:none;background:transparent;border-radius:8px;padding:7px 14px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;font-family:inherit}
body.practice .seg button.on{background:var(--panel);color:var(--accent);box-shadow:var(--shadow-sm)}
body.practice .actions{display:flex;gap:10px;margin-left:auto}

/* ---------- формула ---------- */
body.practice .formula{margin-top:16px;padding:16px 18px;border-radius:14px;background:var(--panel-2);border:1px dashed var(--line-strong);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.practice .formula .f{font-family:var(--mono);font-size:clamp(17px,2.4vw,22px);font-weight:600;color:var(--ink)}
body.practice .formula .vars{margin-left:auto;font-size:14.5px;color:var(--muted);font-weight:600}
body.practice .skor{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:13.5px;font-weight:650;min-height:34px;flex-wrap:wrap}
body.practice .skor .pill{display:inline-flex;align-items:center;gap:7px;border-radius:999px;padding:6px 13px;background:var(--accent-soft);color:var(--muted);font-family:var(--mono)}
body.practice .skor.ok .pill{background:var(--ok-soft);color:var(--ok)}
body.practice .skor.bad .pill{background:var(--bad-soft);color:var(--bad)}

/* ---------- таблица истинности ---------- */
body.practice table.tt{border-collapse:separate;border-spacing:0;width:100%;table-layout:fixed;font-variant-numeric:tabular-nums}
body.practice table.tt th,body.practice table.tt td{padding:0;text-align:center}
body.practice table.tt thead th{font-size:16px;font-weight:800;color:var(--muted);padding:10px 6px;border-bottom:1px solid var(--line-strong)}
body.practice table.tt thead th.rn,body.practice table.tt td.rn{width:64px}
body.practice table.tt th:last-child,body.practice table.tt td.f{width:26%}
body.practice table.tt td.rn{font-family:var(--mono);font-size:12px;color:var(--muted);border-right:1px solid var(--line);background:var(--panel-2)}
body.practice table.tt td.v{font-family:var(--mono);font-size:17px;color:var(--ink);border-right:1px solid var(--line)}
body.practice table.tt tbody tr:nth-child(even) td.v,body.practice table.tt tbody tr:nth-child(even) td.rn{background:var(--panel-2)}
body.practice table.tt tbody tr:hover td{background:var(--panel-2)}
body.practice table.tt td.f{padding:6px 10px}
body.practice .cell{width:100%;max-width:150px;height:42px;border:1.5px solid var(--line-strong);border-radius:10px;background:var(--panel);font-family:var(--mono);font-size:18px;font-weight:700;color:var(--muted);cursor:pointer;transition:.12s;display:inline-grid;place-items:center}
body.practice .cell:hover{border-color:var(--accent-2);background:var(--panel-2)}
body.practice .cell[data-val="0"],body.practice .cell[data-val="1"]{color:var(--accent);border-color:var(--accent-2);background:var(--accent-soft)}
body.practice .cell.ok{background:var(--ok-soft)!important;border-color:var(--ok)!important;color:var(--ok)!important}
body.practice .cell.bad{background:var(--bad-soft)!important;border-color:var(--bad)!important;color:var(--bad)!important}
body.practice .cell.empty{background:color-mix(in srgb,var(--edge-num) 14%,transparent)!important;border-color:var(--edge-num)!important;color:var(--edge-num)!important}
body.practice .cell:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- шпаргалки ---------- */
body.practice table.ops{width:max-content;min-width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;white-space:nowrap;margin:8px 0 6px}
body.practice .acc .body{overflow-x:auto}
body.practice table.ops th,body.practice table.ops td{border:1px solid var(--line-strong);padding:6px 2px;text-align:center}
body.practice table.ops th{background:var(--violet-soft);color:var(--muted);cursor:help;font-weight:800}
body.practice table.ops th:hover{background:var(--accent);color:var(--panel)}
body.practice table.ops tr.hot td{background:var(--bad-soft);color:var(--bad);font-weight:800}
body.practice .order{list-style:none;margin:8px 0;padding:0;counter-reset:o}
body.practice .order li{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px dashed var(--line);font-size:14.5px}
body.practice .order li:last-child{border-bottom:none}
body.practice .order .o{counter-increment:o;width:24px;height:24px;flex:none;border-radius:8px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:800;font-size:12px}
body.practice .order .o::before{content:counter(o)}
body.practice .order .sg{font-family:var(--mono);font-weight:800;font-size:17px;width:24px;text-align:center;color:var(--accent)}
body.practice .rul{margin:10px 0;padding:10px 13px;background:var(--violet-soft);border-radius:10px;font-family:var(--mono);font-size:13.5px;line-height:1.6}

/* ---------- поп-ап оператора ---------- */
body.practice .pop{position:fixed;z-index:200;max-width:330px;width:max-content;background:var(--panel);border:1px solid var(--line-strong);border-radius:14px;
  box-shadow:var(--shadow);padding:14px 15px;font-size:13px;color:var(--ink);opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .12s,transform .12s}
body.practice .pop.show{opacity:1;transform:none;pointer-events:auto}
body.practice .pop h4{margin:0 0 6px;font-size:14.5px;display:flex;align-items:center;gap:8px}
body.practice .pop h4 .sign{font-family:var(--mono);background:var(--accent-soft);color:var(--accent);border-radius:8px;padding:2px 8px;font-size:15px}
body.practice .pop p{margin:6px 0}
body.practice .pop table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px;margin:7px 0}
body.practice .pop th,body.practice .pop td{border:1px solid var(--line);padding:3px;text-align:center}
body.practice .pop th{background:var(--violet-soft);color:var(--muted)}
body.practice .pop .note{margin-top:7px;padding:7px 9px;background:var(--panel-2);border-radius:9px;font-size:12px}
body.practice .pop .warn{background:var(--bad-soft)}

/* ---------- граф + таблица: слева граф, справа таблица ---------- */
body.practice .gwork{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
body.practice .gwork .graph-wrap{margin-top:0}

/* ---------- граф дорог ---------- */
body.practice .graph-wrap{margin-top:16px;border:1px solid var(--line);border-radius:16px;background:radial-gradient(circle at 50% 45%,var(--board-a),var(--board-b));padding:6px}
body.practice .graph-wrap svg{display:block;width:100%;height:auto}

/* ---------- демонстратор «граф ↔ таблица» (практикум 1) ---------- */
body.practice .gsdemo .gs-lead{margin:0 0 14px;color:var(--muted);line-height:1.55;max-width:88ch}
body.practice .gsdemo .gs-why-lead{margin:0 0 6px;font-weight:700;color:var(--ink)}
body.practice .gsdemo .gs-why{margin:0 0 16px;padding-left:22px;display:flex;flex-direction:column;gap:6px;color:var(--muted);line-height:1.5;max-width:88ch}
body.practice .gsdemo .gs-why li::marker{color:var(--accent)}
body.practice .gsdemo .gs-why b{color:var(--ink)}
body.practice .gsdemo .gs-howto{margin:0 0 16px;color:var(--muted);line-height:1.55;max-width:88ch}
body.practice .gsdemo .gs-howto b{color:var(--ink)}
body.practice .gsdemo .gvnode{cursor:pointer;outline:none}
body.practice .gsdemo .gsdemo-mx [tabindex]:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* закреплённый цвет вершины: vc-0…vc-5 задают --vc из --v0…--v5 */
body.practice .gsdemo .vc-0{--vc:var(--v0)}
body.practice .gsdemo .vc-1{--vc:var(--v1)}
body.practice .gsdemo .vc-2{--vc:var(--v2)}
body.practice .gsdemo .vc-3{--vc:var(--v3)}
body.practice .gsdemo .vc-4{--vc:var(--v4)}
body.practice .gsdemo .vc-5{--vc:var(--v5)}

/* вершины, лучи и затухание */
body.practice .gsdemo .gvnode,body.practice .gsdemo .ge,body.practice .gsdemo .ray,body.practice .gsdemo .gw{transition:opacity .14s}
body.practice .gsdemo .gv{transition:fill .14s,stroke .14s,stroke-width .14s}
body.practice .gsdemo .gv-halo{fill:none;stroke:none;opacity:0;transition:opacity .14s,stroke .14s}
body.practice .gsdemo .gvnode.dim,body.practice .gsdemo .ge.dim,body.practice .gsdemo .gw.dim{opacity:.1}
body.practice .gsdemo .ray{fill:none;stroke-width:3.4;stroke-linecap:round}
body.practice .gsdemo .src .gv{fill:var(--vc);stroke:color-mix(in srgb,var(--vc) 58%,#fff);stroke-width:3.2}
body.practice .gsdemo .src .gv-core{fill:#fff}
body.practice .gsdemo .src .gl{fill:var(--vc);font-weight:800}
body.practice .gsdemo .src .gv-halo{stroke:var(--vc);opacity:.6}
body.practice .gsdemo .gvnode.src{filter:drop-shadow(0 0 7px color-mix(in srgb,var(--vc) 75%,transparent))}
body.practice .gsdemo .gv-sel{fill:none;stroke:none;stroke-width:2.6;transition:stroke .14s}
body.practice .gsdemo .gvnode.sel .gv-sel{stroke:rgba(255,214,10,.92)}
body.practice .gsdemo .gw.ray{fill:var(--vc);font-weight:800}
body.practice .gsdemo .stop-v0{stop-color:var(--v0)}
body.practice .gsdemo .stop-v1{stop-color:var(--v1)}
body.practice .gsdemo .stop-v2{stop-color:var(--v2)}
body.practice .gsdemo .stop-v3{stop-color:var(--v3)}
body.practice .gsdemo .stop-v4{stop-color:var(--v4)}
body.practice .gsdemo .stop-v5{stop-color:var(--v5)}
body.practice .gsdemo .stop-clear{stop-color:var(--v0);stop-opacity:0}

/* таблица: буквы шапки цветом вершины */
body.practice .gsdemo-mx th,body.practice .gsdemo-mx td{padding:4px}
body.practice .gsdemo-mx th[role="button"],body.practice .gsdemo-mx td.rn[role="button"]{cursor:pointer}
body.practice .gsdemo-mx [data-i]{cursor:pointer}
body.practice .gsdemo-mx .mval{transition:border-color .14s,color .14s}
body.practice .gsdemo-mx [data-i] .mval:hover{border-color:var(--accent-2)}
body.practice .gsdemo-mx th.head,body.practice .gsdemo-mx td.rn.head{background:var(--vc);color:#fff;font-weight:800}

/* контур и лёгкая заливка активной линии вершины */
body.practice .gsdemo-mx .ln-row,body.practice .gsdemo-mx .ln-col{
  --ct:transparent;--cb:transparent;--cl:transparent;--cr:transparent;
  box-shadow:inset 0 2px 0 0 var(--ct),inset 0 -2px 0 0 var(--cb),inset 2px 0 0 0 var(--cl),inset -2px 0 0 0 var(--cr);
}
body.practice .gsdemo-mx .ln-row{--ct:var(--rc);--cb:var(--rc)}
body.practice .gsdemo-mx .ln-col{--cl:var(--cc);--cr:var(--cc)}
body.practice .gsdemo-mx .ln-row-0{--rc:var(--v0)}
body.practice .gsdemo-mx .ln-row-1{--rc:var(--v1)}
body.practice .gsdemo-mx .ln-row-2{--rc:var(--v2)}
body.practice .gsdemo-mx .ln-row-3{--rc:var(--v3)}
body.practice .gsdemo-mx .ln-row-4{--rc:var(--v4)}
body.practice .gsdemo-mx .ln-row-5{--rc:var(--v5)}
body.practice .gsdemo-mx .ln-col-0{--cc:var(--v0)}
body.practice .gsdemo-mx .ln-col-1{--cc:var(--v1)}
body.practice .gsdemo-mx .ln-col-2{--cc:var(--v2)}
body.practice .gsdemo-mx .ln-col-3{--cc:var(--v3)}
body.practice .gsdemo-mx .ln-col-4{--cc:var(--v4)}
body.practice .gsdemo-mx .ln-col-5{--cc:var(--v5)}
body.practice .gsdemo-mx .ln-row:not(.head){background:color-mix(in srgb,var(--rc) 9%,transparent)}
body.practice .gsdemo-mx .ln-col:not(.head){background:color-mix(in srgb,var(--cc) 9%,transparent)}
body.practice .gsdemo-mx .ln-row .mval{background:color-mix(in srgb,var(--rc) 13%,var(--panel))}
body.practice .gsdemo-mx .ln-col .mval{background:color-mix(in srgb,var(--cc) 13%,var(--panel))}

/* жёлтый маркер выбранной (кликнутой) вершины: активная линия */
body.practice .gsdemo-mx .sel{position:relative}
body.practice .gsdemo-mx .sel::after{content:"";position:absolute;inset:0;background:rgba(255,214,10,.28);pointer-events:none}

body.practice .gs-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
body.practice .gs-actions .btn:disabled{opacity:.5;cursor:default}
body.practice .gs-status{font-size:13.5px;color:var(--muted)}


/* ---------- мост «практика → задание» ---------- */
body.practice .bridge{border-color:var(--accent-2);background:linear-gradient(135deg,var(--panel),var(--panel-2))}
body.practice .bridge .pad{display:flex;align-items:center;gap:15px;flex-wrap:wrap}
body.practice .bridge .b-ic{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;background:var(--accent);color:var(--panel);font-size:21px;font-weight:800;box-shadow:0 12px 22px -12px rgba(125,99,150,.9)}
body.practice .bridge b{font-size:15.5px;display:block}
body.practice .bridge .muted{font-size:13px;margin-top:2px}

@media (max-width:760px){
  body.practice .gwork{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  body.practice .actions{width:100%;margin-left:0}
  body.practice .actions .btn{flex:1}
}

/* ---------- практикум-тема: стопка карточек и поле ответа ---------- */
body.practice .practice-stack{display:flex;flex-direction:column;gap:18px}
body.practice .bintrain-input{flex:1;min-width:170px;margin-left:auto;font-family:var(--mono);font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--accent);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 14px}
body.practice .bintrain-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice .bintrain-input::placeholder{color:var(--muted);font-weight:600;font-size:15px}

/* ---------- теория практикума: типографика и ритм ---------- */
body.practice .theory .theory-block+.theory-block{margin-top:22px}
body.practice .theory h3{margin:0 0 8px;font-size:16px;font-weight:700;color:var(--ink)}
body.practice .theory .theory-body{color:var(--lead-ink)}
body.practice .theory .theory-body p{margin:0 0 12px;font-size:16px;line-height:1.72}
body.practice .theory .theory-body p:last-child{margin-bottom:0}
body.practice .theory .theory-body ul,
body.practice .theory .theory-body ol{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
body.practice .theory .theory-body li{line-height:1.6}
body.practice .theory .theory-body b,
body.practice .theory .theory-body strong{color:var(--ink)}

/* ---------- практикум задания 5: алгоритм строит новое число ---------- */
body.practice .algo-rule{margin-top:14px;padding:14px 18px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line)}
body.practice .algo-rule .steps{margin-top:0}
body.practice .algo-rule .subconds{margin:6px 0 6px 8px}
body.practice .algo-rule + .fano-task{margin-top:26px}
body.practice .algo-input{flex:1;min-width:170px;margin-left:auto;font-family:var(--mono);font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--accent);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 14px}
body.practice .algo-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice .algo-input::placeholder{color:var(--muted);font-weight:600;font-size:15px}
body.practice .algo-steps{margin-top:16px;display:flex;flex-direction:column;gap:12px}
body.practice .algo-step{display:grid;gap:6px}
body.practice .algo-step .cap{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.practice .algo-steps .algo-input{width:100%;margin-left:0;flex:none}
body.practice .algo-input.ok{border-color:var(--ok);background:var(--ok-soft)}
body.practice .algo-input.bad{border-color:var(--bad);background:var(--bad-soft)}
body.practice .algo-sol{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--ok-soft);border:1px solid var(--line)}
body.practice .algo-sol p{margin:0 0 9px;font-size:14.5px;line-height:1.65}
body.practice .algo-sol p:last-child{margin-bottom:0}
body.practice .algo-sol .mono{font-family:var(--mono);font-weight:700;color:var(--accent)}

/* ---------- практикум задания 5: двоичный калькулятор и шаги перевода ---------- */
body.practice .algo-calc{margin:16px 0 4px}
body.practice .algo-calc .card.display{padding:18px;text-align:center}
body.practice .algo-calc .dec{font-size:44px;font-weight:800;color:var(--accent);letter-spacing:1px}
body.practice .algo-calc .dec .unit{font-size:16px;color:var(--muted);font-weight:600}
body.practice .algo-calc .bin-str{font-family:var(--mono);font-size:19px;color:var(--ink);margin-top:2px;letter-spacing:2px}
body.practice .algo-calc .bits{display:flex;gap:6px;justify-content:center;margin:18px 0 6px;flex-wrap:wrap}
body.practice .algo-calc .bitw{display:flex;flex-direction:column;align-items:center;gap:4px}
body.practice .algo-calc .bit{width:54px;height:54px;padding:0;border-radius:10px;border:2px solid var(--off);
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);
  font-size:24px;font-weight:800;color:var(--dim);background:var(--panel);
  cursor:pointer;user-select:none;transition:all .12s}
body.practice .algo-calc .bit.on{background:var(--on-bg);border-color:var(--on);color:var(--on);box-shadow:0 0 0 3px rgba(125,99,150,.14)}
body.practice .algo-calc .bit:hover{transform:translateY(-1px)}
body.practice .algo-calc .bitlab{font-family:var(--mono);font-size:11px;color:var(--muted)}
body.practice .algo-calc .controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:14px}
body.practice .algo-calc .controls button{cursor:pointer;font-family:inherit;border-radius:10px;border:1px solid var(--line);
  background:var(--panel);color:var(--ink);font-size:15px;font-weight:700;padding:10px 18px}
body.practice .algo-calc .controls button:hover{background:var(--bg)}
body.practice .algo-calc .controls button.minus,body.practice .algo-calc .controls button.plus{min-width:70px;background:var(--accent);border-color:var(--accent);color:var(--panel);font-size:20px}
body.practice .algo-calc .controls button:disabled{opacity:.35;cursor:not-allowed}
body.practice .algo-calc .legend{display:flex;gap:16px;justify-content:center;margin-top:12px;flex-wrap:wrap}
body.practice .algo-calc .legend span{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
body.practice .algo-calc .sw{display:inline-block;width:16px;height:16px;border-radius:5px}
body.practice .algo-calc .sw.sw-on{background:var(--on-bg);border:2px solid var(--on)}
body.practice .algo-calc .sw.sw-off{background:#fff;border:2px solid var(--off)}
body.practice .algo-calc .sw.sw-click{background:#f7eef2;border:1px solid #eddde4}
body.practice .algo-calc .hint{text-align:center;color:var(--muted);font-size:12.5px;margin-top:12px}
body.practice .algo-calc 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.practice .algo-calc-steps{margin-top:20px;max-width:72ch}
body.practice .algo-calc-steps h3{margin:18px 0 0;font-size:16px;font-weight:700;color:var(--ink)}
body.practice .algo-calc-steps p{margin:0;color:var(--lead-ink)}
body.practice .algo-calc-steps ol{margin:6px 0 0;padding-left:24px;display:flex;flex-direction:column;gap:8px}
body.practice .algo-calc-steps li{line-height:1.65;font-size:14.5px;color:var(--lead-ink)}
body.practice .algo-calc-steps .mono{font-family:var(--mono);font-weight:600;color:var(--ink)}

/* перевод делением на 2: столбик делений и итоговая двоичная запись */
body.practice .algo-calc-steps .divide-fig{display:inline-block;margin:10px 0 0;max-width:100%}
body.practice .algo-calc-steps .divide-chain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
body.practice .algo-calc-steps .divide-chain li{display:flex;align-items:baseline;font-family:var(--mono);font-size:15px;line-height:1.5;color:var(--ink)}
body.practice .algo-calc-steps .divide-chain .eq{display:inline-block;min-width:11ch;text-align:right;white-space:nowrap}
body.practice .algo-calc-steps .divide-chain .rem{margin-left:18px;color:var(--muted);white-space:nowrap}
body.practice .algo-calc-steps .divide-out{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--line);font-family:var(--mono);font-size:17px;font-weight:700;color:var(--accent);text-align:right;white-space:nowrap}

@media (max-width:640px){
  body.practice .algo-calc-steps .divide-chain li{font-size:14px}
  body.practice .algo-calc-steps .divide-chain .eq{min-width:10ch}
  body.practice .algo-calc-steps .divide-chain .rem{margin-left:12px}
  body.practice .algo-calc-steps .divide-out{font-size:16px}
}

@media (max-width:640px){
  body.practice .algo-calc .dec{font-size:36px}
  body.practice .algo-calc .bits{gap:4px}
  body.practice .algo-calc .bit{width:42px;height:46px;font-size:19px;border-radius:9px}
  body.practice .algo-calc .bitlab{font-size:10px}
}
@media (max-width:400px){
  body.practice .algo-calc .bit{width:36px;height:40px;font-size:16px}
  body.practice .algo-calc .bin-str{font-size:16px}
}

/* ---------- практикум задания 6: исполнитель Черепаха ---------- */
body.practice .turtle-trainer .settings .seg{flex-wrap:wrap}
body.practice .turtle-trainer .turtle-runner{border-radius:14px}
body.practice .tt-task{margin-top:14px;font-size:15px;line-height:1.7;color:var(--lead-ink);max-width:74ch}
body.practice .tt-task p{margin:0 0 10px}
body.practice .tt-task p:last-child{margin-bottom:0}
body.practice .tt-warn{margin-top:12px;padding:12px 16px;border:1px solid var(--line);border-left:4px solid var(--coral);border-radius:10px;background:var(--formula-bg);color:var(--lead-ink);font-size:15px;line-height:1.7}
body.practice .tt-warn b{color:var(--coral)}
body.practice .tt-task .mono,
body.practice .tt-warn .mono,
body.practice .turtle-trainer .feedback .mono{color:var(--accent);font-weight:600}
body.practice .tt-answer{display:grid;gap:6px;margin-bottom:14px}
body.practice .tt-answer .cap{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.practice .tt-answer-input{width:100%;font-family:var(--mono);font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--accent);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 14px}
body.practice .tt-answer-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice .tt-answer-input::placeholder{color:var(--muted);font-weight:600;font-size:15px}
body.practice .tt-answer-input.ok{border-color:var(--ok);background:var(--ok-soft)}
body.practice .tt-answer-input.bad{border-color:var(--bad);background:var(--bad-soft)}
body.practice .tt-actions{display:flex;gap:10px;flex-wrap:wrap}
body.practice .tt-sol{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--ok-soft);border:1px solid var(--line)}
body.practice .tt-sol p{margin:0 0 9px;font-size:14.5px;line-height:1.65}
body.practice .tt-sol p:last-child{margin-bottom:0}
body.practice .tt-sol pre{margin:8px 0;padding:12px 14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:15px;line-height:1.6;overflow-x:auto;white-space:pre}
body.practice .tt-sol .mono{font-family:var(--mono);font-weight:700;color:var(--accent)}
@media (max-width:640px){
  body.practice .settings .actions{width:100%;margin-left:0}
}

/* ---------- практикум задания 7: информационный объём ---------- */
body.practice .vt-task{margin-top:14px;font-size:15px;line-height:1.7;color:var(--lead-ink);max-width:74ch}
body.practice .vt-task p{margin:0 0 10px}
body.practice .vt-task p:last-child{margin-bottom:0}
body.practice .vt-task .qbox{margin-top:12px}
body.practice .vt-answer{margin-top:14px;display:grid;gap:6px;max-width:420px}
body.practice .vt-answer .cap{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.practice .vt-input{width:100%;font-family:var(--mono);font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--accent);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 14px}
body.practice .vt-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice .vt-input::placeholder{color:var(--muted);font-weight:600;font-size:15px}
body.practice .vt-input.ok{border-color:var(--ok);background:var(--ok-soft)}
body.practice .vt-input.bad{border-color:var(--bad);background:var(--bad-soft)}
body.practice .vt-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 0}
body.practice .vt-sol p{font-size:14.5px}

/* практикум задания 14: пошаговый разбор — крупные строки-действия */
body.practice .base-trainer .vt-sol p{font-size:16px;line-height:1.7}
body.practice .base-trainer .vt-sol .op{display:block;font-family:var(--mono);font-size:20px;font-weight:700;color:var(--ink);
  letter-spacing:.01em;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px 12px;overflow-wrap:anywhere}
body.practice .base-trainer .vt-sol .op sup{font-size:.72em}

/* перевод единиц: лестница единиц со стыками-множителями */
body.practice .uc-card{width:100%;max-width:600px;margin-inline:auto}
body.practice .uc-card h2{margin-bottom:8px}
body.practice .uc-lead{margin:0 0 14px;color:var(--muted);max-width:74ch;line-height:1.65}
body.practice .uc-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
body.practice .uc-select{font-family:inherit;font-size:15px;font-weight:700;color:var(--ink);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:12px;padding:11px 14px;cursor:pointer}
body.practice .uc-input{width:12ch;font-family:var(--mono);font-size:clamp(18px,2.2vw,22px);font-weight:700;color:var(--accent);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:12px;padding:9px 14px}
body.practice .uc-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice .uc-dir{margin-left:auto}
body.practice .uc-ladder{margin:2px 0 0;max-width:560px}
body.practice .uc-step{display:grid;grid-template-columns:16px 84px minmax(0,1fr);gap:12px;align-items:center;padding:10px 14px 10px 18px;border-radius:12px;transition:background .15s}
body.practice .uc-step.active{background:var(--violet-soft);box-shadow:inset 3px 0 0 var(--accent)}
body.practice .uc-step.given{background:var(--panel-2)}
body.practice .uc-node{width:12px;height:12px;border-radius:50%;border:2px solid var(--violet-border);background:var(--panel);justify-self:center}
body.practice .uc-step.active .uc-node{background:var(--accent);border-color:var(--accent)}
body.practice .uc-name{font-weight:700;color:var(--lead-ink)}
body.practice .uc-val{justify-self:start;font-family:var(--mono);font-size:clamp(18px,2.4vw,24px);font-weight:800;font-variant-numeric:tabular-nums}
body.practice .uc-val .fx{font-size:1em;font-weight:800}
body.practice .uc-join{position:relative;display:grid;grid-template-columns:16px 84px minmax(0,1fr);gap:12px;align-items:center;min-height:30px;padding:0 14px 0 18px}
body.practice .uc-join::before{content:'';position:absolute;left:25px;top:0;bottom:0;width:2px;background:var(--line)}
body.practice .uc-factor{grid-column:3;justify-self:start;font-family:var(--mono);font-size:14px;font-weight:700;color:var(--v1)}
body.practice .uc-note{margin:14px 0 0;font-size:14px;color:var(--lead-ink);line-height:1.7}
body.practice .uc-more{margin:14px 0 0}

/* тренажёр перевода единиц */
body.practice .ut-card{width:100%;max-width:600px;margin-inline:auto}
body.practice .ut-card h2{margin-bottom:8px}
body.practice .ut-cond{margin:0 0 12px;font-size:15px;line-height:1.7;color:var(--lead-ink);max-width:74ch}
body.practice .ut-input{width:13ch;font-family:var(--mono);font-size:clamp(16px,2.2vw,20px);font-weight:700;color:var(--accent);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:8px 12px}
body.practice .ut-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice .ut-input.ok{border-color:var(--ok);background:var(--ok-soft)}
body.practice .ut-input.bad{border-color:var(--bad);background:var(--bad-soft)}
body.practice .ut-actions{margin-top:14px}
@media (max-width:640px){
  body.practice .uc-select,body.practice .uc-input{width:100%}
  body.practice .uc-dir{margin-left:0}
  body.practice .uc-val{font-size:18px}
  body.practice .ut-input{width:12ch;font-size:16px}
}

/* ---------- практикум задания 8: перебор слов ---------- */
body.practice .word-enum .cap{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.practice .we-board{margin-top:14px;padding:14px 18px;border-radius:14px;background:var(--panel-2);border:1px solid var(--line);display:grid;gap:10px}
body.practice .we-line{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:15px;line-height:1.7;color:var(--lead-ink)}
body.practice .we-line .mono{font-family:var(--mono);font-weight:800;color:var(--accent);letter-spacing:.05em}
body.practice .we-dot{color:var(--muted)}
body.practice .we-head{margin:0;font-size:15px;line-height:1.8;color:var(--lead-ink)}
body.practice .we-words{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px}
body.practice .we-word{font-family:var(--mono);font-weight:700;color:var(--lead-ink);white-space:nowrap}
body.practice .we-word .mono{color:var(--accent)}
body.practice .we-more{color:var(--muted)}
body.practice .we-cond{margin-top:14px;display:grid;gap:6px}
body.practice .we-cond ul{margin:0;padding-left:20px;display:grid;gap:5px;font-size:15px;line-height:1.65;color:var(--lead-ink)}
body.practice .we-answer{margin-top:14px;display:grid;gap:6px;max-width:420px}
body.practice .we-input{width:100%;font-family:var(--mono);font-size:clamp(18px,2.4vw,22px);font-weight:700;color:var(--accent);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 14px;text-align:center}
body.practice .we-input:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice .we-input::placeholder{color:var(--muted);font-weight:600;font-size:15px;text-align:left}
body.practice .we-input.ok{border-color:var(--ok);background:var(--ok-soft)}
body.practice .we-input.bad{border-color:var(--bad);background:var(--bad-soft)}
body.practice .we-actions{margin-top:12px}
body.practice .we-sol{margin-top:16px;padding:14px 18px;border-radius:14px;background:var(--ok-soft);border:1px solid var(--line)}
body.practice .we-sol p{margin:0 0 8px;font-size:14.5px;font-weight:700}
body.practice .we-sol ul{margin:0;padding-left:20px;display:grid;gap:7px}
body.practice .we-sol li{font-size:14.5px;line-height:1.65}
body.practice .we-sol .mono{font-family:var(--mono);font-weight:700;color:var(--accent)}
body.practice .we-code{margin-top:14px}
body.practice .we-code-lead{margin:0 0 8px;font-weight:700;color:var(--ink)}
body.practice .we-code pre{margin:0 0 12px;padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;font-size:15px;line-height:1.6;overflow-x:auto;white-space:pre}
body.practice .word-enum .pyrunner{margin-top:4px}

/* ---------- практикум задания 8: «напиши программу» ---------- */
body.practice .ct-task{margin:14px 0 0;font-size:15.5px;line-height:1.7;color:var(--lead-ink);max-width:74ch}
body.practice .ct-task b{color:var(--ink)}
body.practice .ct-check-row{margin:14px 0 0}
body.practice .file-explore .fe-example{margin:12px 0 0;font-size:14px;line-height:1.6;color:var(--ink);max-width:74ch}
body.practice .file-explore .fe-example .mono{font-family:var(--mono);background:var(--panel-2);border:1px solid var(--line);border-radius:7px;padding:2px 8px}
body.practice .file-explore .fe-hint{margin:10px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:74ch}
body.practice .we-trace{margin:0 0 14px;padding-left:20px;display:grid;gap:6px}
body.practice .we-trace li{font-size:14.5px;line-height:1.6;color:var(--lead-ink)}
body.practice .we-trace .mono{font-family:var(--mono);font-weight:700;color:var(--accent)}
body.practice .code-task .pyrunner{margin-top:4px}


/* ---------- практикум задания 10: регулярные выражения ---------- */
body.practice .rx-text{margin:12px 0 0;padding:14px 16px;background:var(--panel-2);border:1.5px solid var(--line);border-radius:12px;font-size:15.5px;line-height:1.8;color:var(--lead-ink)}
body.practice .rx-text.ok{border-color:var(--ok)}
body.practice .rx-text.bad{border-color:var(--bad)}
body.practice .rx-text mark{padding:1px 2px;border-radius:4px;background:var(--accent-soft);color:var(--accent);font-weight:700}
body.practice .rx-hint{margin:10px 0 0;font-size:14px;color:var(--muted)}
body.practice .rx-hint b{color:var(--ink)}
body.practice .rx-err{color:var(--bad);font-weight:700}
body.practice .rx-options{display:grid;gap:8px;margin-top:12px}
body.practice .rx-opt{display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:11px 14px;transition:border-color .12s,background .12s}
body.practice .rx-opt:hover{border-color:var(--accent)}
body.practice .rx-opt code{font-family:var(--mono);font-size:14px;color:var(--ink);white-space:normal;overflow-wrap:anywhere}
body.practice .rx-opt.on{background:var(--accent-soft);border-color:var(--accent)}
body.practice .rx-opt.ok{border-color:var(--ok);background:var(--ok-soft)}
body.practice .rx-opt.bad{border-color:var(--bad);background:var(--bad-soft)}
body.practice .rx-input-row{margin-top:12px}
body.practice .rx-input{width:100%;margin-left:0;flex:none}
body.practice .rx-sandbox{display:grid;gap:12px;margin:12px 0 0}
body.practice .rx-field{display:grid;gap:6px}
body.practice .rx-field .cap{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
body.practice .rx-formulas{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
body.practice .rx-textarea{width:100%;font-family:inherit;font-size:15px;line-height:1.7;color:var(--ink);background:var(--panel);border:1.5px solid var(--line-strong);border-radius:10px;padding:10px 14px;resize:vertical}
body.practice .rx-textarea:focus{outline:none;border-color:var(--accent);background:var(--panel-2)}
body.practice mark.rx-ok{padding:1px 2px;border-radius:4px;background:var(--ok-soft);color:var(--ok);font-weight:700}
body.practice mark.rx-bad{padding:1px 2px;border-radius:4px;background:var(--bad-soft);color:var(--bad);font-weight:700}
body.practice .rx-hint mark.rx-ok,body.practice .rx-hint mark.rx-bad{font-weight:800}
body.practice .rx-lead{margin:0 0 14px;color:var(--muted)}

/* Интерактивный мини-разбор «Изучаем файл»: файл ↔ таблица с подсветкой по шагам. */
body.practice .fe-visual .fe-visual-lead{margin:0 0 16px;font-size:14.5px;line-height:1.65;color:var(--lead-ink);max-width:80ch}
body.practice .fe-visual .codeblock,
body.practice .fe-visual .outputblock{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--code-bg)}
body.practice .fe-visual .codeblock pre,
body.practice .fe-visual .outputblock pre{margin:0;padding:12px 14px;font-family:var(--mono);font-size:15px;line-height:1.6;white-space:pre;overflow-x:auto;background:transparent;color:var(--code-ink)}
body.practice .fe-visual .codeblock pre code{display:block;padding:0;border-radius:0;overflow:visible;font-size:inherit;line-height:inherit}
body.practice .fe-visual .cb-head{font-family:var(--mono);font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);background:var(--panel-2);border-bottom:1px solid var(--line);padding:7px 12px}
body.practice .fe-visual .outputblock{background:var(--input-bg)}

/* визуализатор «файл ↔ таблица» — во всю ширину, между описанием шага и кодом */
body.practice .fe-viz{margin:0 0 16px;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:12px}
body.practice .fe-viz-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:10px}
body.practice .fe-viz-note{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}
body.practice .fe-viz-panes{display:grid;gap:12px}
@media (min-width:620px){ body.practice .fe-viz-panes{grid-template-columns:1fr 1fr} }
body.practice .fe-pane{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--panel-2)}
body.practice .fe-pane > .cb-head{background:var(--panel)}
body.practice .fe-pane-hint{margin:0;padding:8px 12px;font-size:12.5px;line-height:1.5;color:var(--muted);background:var(--panel)}

/* текстовый файл */
body.practice .fe-file{padding:8px 4px;font-family:var(--mono);font-size:13px;line-height:1.5;overflow-x:auto;background:var(--code-bg);color:var(--code-ink)}
body.practice .fe-fline{display:flex;gap:8px;padding:2px 10px;white-space:pre;border-left:3px solid transparent;cursor:pointer}
body.practice .fe-fline.on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-left-color:var(--accent)}
body.practice .fe-fnum{flex:none;width:1.6em;text-align:right;color:var(--dim);user-select:none}
body.practice .fe-fcode{display:inline-flex;align-items:baseline}
body.practice .fe-sep{color:var(--coral);font-weight:700;padding:0 1px}
body.practice .fe-fcell{padding:0 2px;border-radius:4px}
body.practice .fe-fcell.on{background:color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:0 0 0 1px var(--violet-border)}
body.practice .fe-fcell.seg{background:var(--str-seg)}
body.practice .fe-str .fe-fcell.on{background:var(--str-on);color:var(--str-on-ink);font-weight:700;box-shadow:none}
body.practice .fe-fcell.empty{background:color-mix(in srgb,var(--dim) 22%,transparent)}
body.practice .fe-fline.on .fe-fcell.empty{background:color-mix(in srgb,var(--empty-sel) 14%,transparent)}
body.practice .fe-fcell.empty.on{background:color-mix(in srgb,var(--empty-sel) 28%,transparent)}

/* код программы в разборе строки: активная строка и каретка */
body.practice .scan-code{background:var(--code-bg);font-family:var(--mono);font-size:13px;line-height:1.5;overflow-x:auto;padding:6px 0}
body.practice .scan-code .code-line{display:flex;gap:8px;padding:1px 12px 1px 0;white-space:pre;border-left:3px solid transparent;color:var(--code-ink)}
body.practice .scan-code .code-line .cur{flex:none;width:1.4em;text-align:center;color:var(--accent)}
body.practice .scan-code .code-line .ln{flex:none;width:1.8em;text-align:right;color:var(--dim);user-select:none}
body.practice .scan-code .code-line .src{flex:none}
body.practice .scan-code .code-line.on{background:color-mix(in srgb,var(--accent) 26%,transparent);border-left-color:var(--accent)}
body.practice .scan-code .code-line.on .ln{color:var(--accent)}
body.practice .scan-code .code-line.hit{background:color-mix(in srgb,var(--coral) 22%,transparent);border-left-color:var(--coral)}
body.practice .fe-debug{display:flex;align-items:center;gap:8px;padding:8px 12px;border-top:1px solid var(--line);background:var(--panel)}
body.practice .fe-debug .btn.sm{padding:4px 10px;font-size:14px;line-height:1}
body.practice .fe-debug .dbg-counter{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-left:auto}
body.practice .dbg-vars{display:flex;gap:6px;flex-wrap:wrap}
body.practice .dbg-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}
body.practice .dbg-var.chg{background:var(--chg-bg);border-color:var(--chg-bg);color:var(--chg-ink)}

/* таблица */
body.practice .fe-table-wrap{padding:10px;background:var(--panel-2);overflow-x:auto}
body.practice .fe-table{border-collapse:collapse;width:100%;font-family:var(--mono);font-size:13px}
body.practice .fe-table th,body.practice .fe-table td{border:1px solid var(--line);padding:5px 8px;text-align:left;white-space:nowrap}
body.practice .fe-table th{background:var(--violet-soft);color:var(--muted);font-weight:600;cursor:pointer}
body.practice .fe-table th.on{background:color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink)}
body.practice .fe-table tr.on td{background:color-mix(in srgb,var(--accent) 10%,transparent)}
body.practice .fe-table tr.on td,
body.practice .fe-table th.on,
body.practice .fe-cell.on{border-color:var(--violet-line)}
body.practice .fe-table td{cursor:pointer}
body.practice .fe-cell.on{background:color-mix(in srgb,var(--accent) 26%,transparent)}
body.practice .fe-cell.empty{background:color-mix(in srgb,var(--dim) 24%,transparent)}
body.practice .fe-table tr.on td.fe-cell.empty{background:color-mix(in srgb,var(--empty-sel) 10%,transparent)}
body.practice .fe-cell.empty.on{background:color-mix(in srgb,var(--empty-sel) 26%,transparent)}
body.practice .fe-cell.uniq{font-weight:700}
body.practice .fe-table .uniq-0{color:var(--v0)}
body.practice .fe-table .uniq-1{color:var(--v1)}
body.practice .fe-table .uniq-2{color:var(--v2)}
body.practice .fe-table .uniq-3{color:var(--v3)}
body.practice .fe-table .uniq-4{color:var(--v4)}
body.practice .fe-table .uniq-5{color:var(--v5)}

/* шаги */
body.practice .fe-step-nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
body.practice .fe-step-tabs{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
body.practice .fe-step-tabs button{cursor:pointer;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--muted);font-family:var(--mono);font-size:13px;font-weight:700}
body.practice .fe-step-tabs button.on{background:var(--violet-soft);border-color:var(--violet-border);color:var(--ink)}
body.practice .fe-step-panel{display:none}
body.practice .fe-step-panel.on{display:block}
body.practice .fe-step-panel.top.on{margin:0 0 14px}
body.practice .fe-step-panel.bot.on{margin:0}
body.practice .fe-tut-h{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink);font-size:16px;margin-bottom:6px}
body.practice .fe-tut-h .n{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:13px;background:var(--violet-soft);color:var(--violet)}
body.practice .fe-tut-text{margin:0 0 10px;font-size:14.5px;line-height:1.65;color:var(--lead-ink);max-width:74ch}
body.practice .fe-tut-text p{margin:0}
body.practice .fe-visual .tok-kw{color:var(--violet);font-weight:600}
body.practice .fe-visual .tok-str{color:var(--mint)}
body.practice .fe-visual .tok-num{color:var(--accent)}
body.practice .fe-visual .tok-com{color:var(--muted);font-style:italic}
body.practice .fe-visual .tok-fn{color:var(--accent)}
body.practice .fe-visual .tok-cur{color:var(--mint);font-weight:700}
body.practice .fe-visual .tok-best{color:var(--coral);font-weight:700}