/* ============================================================
     Каркас приложения
     ============================================================ */
  :root{
    --app-top-h:64px;
    --app-left-bg:var(--panel);
    --app-top-bg:var(--header-bg);
    --app-code-bg:#171326;
    --app-code-ink:#ece9f8;
    --app-chip-bg:rgba(139,123,255,.14);
    --app-chip-ink:#ded8ff;
    --app-fold-a:var(--panel-2);
    --app-fold-b:var(--panel);
    --app-success-bg:#122a20;
    --app-success-ink:#d9f7e8;
    --app-success-line:#2b5a47;
    --app-success-mark:#4de0b0;
    --app-success-mark-ink:#06251a;
    --app-toc-hero:linear-gradient(135deg,#2a2148 0%,#171326 72%);

    --ide-bg:#0f0b1e;
    --ide-panel:#171326;
    --ide-panel-2:#1c1630;
    --ide-line:#2e2547;
    --ide-ink:#ece9f8;
    --ide-muted:#9a92b8;
    --ide-dim:#6f678f;
    --ide-code:#0b0817;
    --ide-violet:#8b7bff;
    --ide-mint:#4de0b0;
    --ide-coral:#ff6b8a;
    --ide-amber:#ffc857;
  }
  [data-theme="light"]{
    --app-left-bg:#ffffff;
    --app-top-bg:rgba(255,255,255,.88);
    --app-code-bg:#171326;
    --app-code-ink:#ece9f8;
    --app-chip-bg:#f1f0fa;
    --app-chip-ink:#191530;
    --app-fold-a:#f7f7fb;
    --app-fold-b:#eef0f8;
    --app-success-bg:#edfaf3;
    --app-success-ink:#0b513b;
    --app-success-line:#b7e6ce;
    --app-success-mark:#0c7d5c;
    --app-success-mark-ink:#ffffff;
    --app-toc-hero:radial-gradient(700px 360px at 12% 0%,rgba(99,73,214,.16),transparent 68%),linear-gradient(135deg,#f3f0ff 0%,#ffffff 72%);

    --ide-bg:#171326;
    --ide-panel:#211a35;
    --ide-panel-2:#1c1630;
    --ide-line:#2e2547;
    --ide-ink:#ece9f8;
    --ide-muted:#9a92b8;
    --ide-dim:#6f678f;
    --ide-code:#140f24;
  }

  *{box-sizing:border-box}
  html{height:100%}
  body.python-app{
    margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink);
    font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  }
  body.python-app a{color:inherit;text-decoration:none}
  body.python-app .mono{font-family:var(--mono)}
  body.python-app .view{display:none;height:100dvh}
  body.python-app .view.on{display:flex;flex-direction:column}
  body.python-app .view-toc{display:none;height:100dvh;overflow:auto;background:var(--bg)}
  body.python-app .view-toc.on{display:block}

  /* ============================================================
     Верхняя панель
     ============================================================ */
  .course-top{
    flex:none;height:var(--app-top-h);display:flex;align-items:center;gap:12px;
    padding:0 18px;background:var(--app-top-bg);border-bottom:1px solid var(--line);
    backdrop-filter:saturate(160%) blur(12px);position:relative;z-index:60;
  }
  .ct-left{display:flex;align-items:center;gap:11px;min-width:0}
  .ct-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex:none}
  .ct-divider{width:1px;height:22px;background:var(--line);flex:none}
  .course-title{font-size:13.5px;font-weight:650;color:var(--muted);white-space:nowrap}
  .lesson-pill{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:4px 10px;background:var(--panel);
    white-space:nowrap;
  }
  .lesson-pill b{color:var(--ink);font-weight:650}
  .ct-progress{
    font-family:var(--mono);font-size:11px;color:var(--muted);
    border:1px solid var(--line);border-radius:999px;padding:4px 8px;background:var(--panel);
  }
  body.python-app .brand{font-size:15px;gap:9px}
  body.python-app .brand .mark{width:30px;height:30px;border-radius:8px;font-size:13px}

  .icon-btn{
    width:36px;height:36px;flex:none;display:grid;place-items:center;padding:0;
    border:1px solid transparent;border-radius:9px;background:transparent;color:var(--muted);
    cursor:pointer;font-family:inherit;transition:color .15s,background .15s,border-color .15s;
  }
  .icon-btn:hover{color:var(--violet);background:var(--violet-soft);border-color:var(--violet-border)}
  .icon-btn svg{width:19px;height:19px;display:block}
  .toc-btn{
    display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;
    border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);
    font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap;
    transition:border-color .15s,color .15s,background .15s;
  }
  .toc-btn:hover{border-color:var(--violet-border);color:var(--violet);background:var(--violet-soft)}
  .toc-btn svg{width:17px;height:17px;flex:none}
  .home-btn{
    display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 10px;
    border:1px solid transparent;border-radius:9px;color:var(--muted);
    font-size:12.5px;font-weight:600;white-space:nowrap;
  }
  .home-btn:hover{color:var(--ink);background:var(--panel);border-color:var(--line)}
  .home-btn svg{width:15px;height:15px}
  body.python-app .theme-toggle{width:36px;height:36px;border-radius:9px}
  body.python-app .theme-toggle svg{width:18px;height:18px}

  /* ============================================================
     Две панели
     ============================================================ */
  .app-main{
    flex:1;min-height:0;display:grid;
    grid-template-columns:minmax(0,1fr) minmax(560px,50%);
  }
  .lesson-pane{
    min-height:0;display:flex;flex-direction:column;background:var(--app-left-bg);
    border-right:1px solid var(--line);
  }
  .lesson-scroll{flex:1;min-height:0;overflow:auto;padding:34px clamp(24px,4vw,48px) 44px;scrollbar-width:thin}
  .lesson-inner{max-width:680px;margin:0 auto}

  .lesson-head{margin:0 0 24px}
  .kicker{
    display:inline-flex;align-items:center;gap:8px;margin-bottom:11px;
    font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.04em;
    text-transform:uppercase;color:var(--violet);
  }
  .kicker::before{content:"";width:20px;height:1px;background:currentColor;opacity:.7}
  .lesson-head h1{margin:0;font-size:34px;line-height:1.08;letter-spacing:-.035em}
  .lesson-head .lead{margin:12px 0 0;font-size:16.5px;line-height:1.62;color:var(--lead-ink);max-width:66ch}

  .lesson-body p{margin:11px 0;font-size:16px;line-height:1.72;color:var(--ink)}
  .lesson-body p.soft{color:var(--lead-ink)}
  .lesson-body ol,.lesson-body ul{margin:11px 0;padding-left:22px;display:flex;flex-direction:column;gap:7px;font-size:15.5px;line-height:1.65;color:var(--lead-ink)}
  .lesson-body li::marker{color:var(--violet)}
  .lesson-body b{color:var(--ink)}
  .lesson-body a{color:var(--violet);text-decoration:underline;text-underline-offset:3px}
  .lesson-body .ic{
    font-family:var(--mono);font-size:.9em;background:var(--app-chip-bg);
    color:var(--app-chip-ink);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  }

  .code-block{
    margin:18px 0;padding:16px 18px;border-radius:8px;overflow:auto;
    background:var(--app-code-bg);color:var(--app-code-ink);
    border:1px solid var(--ide-line);
    font-family:var(--mono);font-size:13.5px;line-height:1.68;white-space:pre;
    box-shadow:0 14px 34px -30px rgba(0,0,0,.6);
  }
  .code-block.tight{margin:8px 0 0;padding:12px 14px}
  .code-block .ln{display:block;min-height:22.6px}
  .code-block .out-line{display:block;color:var(--ide-muted);border-top:1px dashed var(--ide-line);margin-top:8px;padding-top:6px}

  .success{
    margin:18px 0;padding:13px 15px;border-radius:8px;display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;
    background:var(--app-success-bg);color:var(--app-success-ink);
    border:1px solid var(--app-success-line);font-size:14.5px;line-height:1.6;
  }
  .success .sic{
    flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
    background:var(--app-success-mark);color:var(--app-success-mark-ink);font-size:12px;font-weight:900;
  }
  .success p{margin:0;font-size:inherit;line-height:inherit;color:inherit;flex:1 1 260px;min-width:0}
  .success .ic{color:var(--app-success-ink);border-color:var(--app-success-line);background:transparent}
  .success .success-reset{
    flex:none;align-self:center;margin-left:auto;display:inline-flex;align-items:center;gap:6px;
    height:30px;padding:0 10px;border-radius:7px;border:1px solid var(--app-success-line);
    background:color-mix(in srgb,var(--mint) 12%,transparent);color:var(--app-success-ink);
    font-family:var(--sans);font-size:12.5px;font-weight:650;line-height:1;white-space:nowrap;
    cursor:pointer;transition:background .15s ease,border-color .15s ease;
  }
  .success .success-reset svg{width:14px;height:14px;flex:none}
  .success .success-reset:hover{background:color-mix(in srgb,var(--mint) 18%,transparent);border-color:var(--app-success-mark)}
  .success .success-reset:focus-visible{outline:2px solid var(--app-success-mark);outline-offset:2px}

  .step-bonus{
    display:none;margin:18px 0;padding:16px 18px;border:1px solid var(--violet-border);border-radius:10px;
    background:linear-gradient(135deg,var(--violet-soft),transparent 78%);
  }
  .step-bonus.show{display:block}
  .bonus-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:9px}
  .bonus-kicker{
    flex:none;display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;
    border:1px solid var(--violet-border);background:var(--violet-soft);color:var(--violet);
    font-family:var(--mono);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  }
  .bonus-head h3{margin:0;font-size:18px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
  .bonus-prompt p{margin:0 0 8px;font-size:15.5px;line-height:1.6;color:var(--ink)}
  .bonus-prompt p:last-child{margin-bottom:0}
  .step-bonus .bonus-fold{margin:10px 0 0;background:color-mix(in srgb,var(--panel) 82%,transparent)}
  .step-bonus .bonus-fold summary{font-size:13.5px;padding:10px 12px}
  .step-bonus .bonus-fold .fold-body{font-size:14px;padding:0 12px 11px 32px}

  .fold{
    margin:9px 0;border:1px solid var(--line);border-radius:7px;overflow:hidden;
    background:linear-gradient(180deg,var(--app-fold-a),var(--app-fold-b));
  }
  .fold summary{
    list-style:none;cursor:pointer;display:flex;align-items:center;gap:11px;
    padding:12px 14px;font-size:14.5px;font-weight:650;color:var(--muted);
  }
  .fold summary::-webkit-details-marker{display:none}
  .fold summary::before{
    content:"";flex:none;width:7px;height:7px;border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform .15s;
    margin-top:-3px;margin-left:2px;
  }
  .fold[open] summary::before{transform:rotate(45deg);margin-top:3px}
  .fold summary:hover{color:var(--ink)}
  .fold-body{padding:0 16px 14px 34px;font-size:14px;line-height:1.62;color:var(--muted)}
  .fold-body p{margin:0 0 8px;font-size:inherit;line-height:inherit;color:inherit}
  .fold-body .ic{color:var(--ink)}

  .lesson-nav{
    flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:11px clamp(24px,4vw,48px);border-top:1px solid var(--line);
    background:var(--app-left-bg);
  }
  .lesson-nav-side{display:flex;align-items:center;gap:8px;min-width:0;flex:none}
  .lesson-nav .btn{height:36px;padding:0 14px;border-radius:9px;font-size:13px}
  .lesson-nav .hint{font-size:11px;color:var(--dim);font-family:var(--mono)}
  @media (min-width:981px) and (max-width:1240px){
    .lesson-nav .hint{display:none}
  }

  /* ============================================================
     Правая колонка: IDE
     ============================================================ */
  .ide-col{
    min-height:0;display:flex;flex-direction:column;
    padding:12px 14px 14px;background:var(--bg);
  }
  .ide-toolbar{flex:none;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px 10px}
  .ide-toolbar .btn{height:36px;padding:0 13px;border-radius:9px;font-size:13px;gap:7px}
  .ide-toolbar .btn svg{width:14px;height:14px}
  .ide-toolbar .btn.check{
    border-color:color-mix(in srgb,var(--mint) 44%,transparent);
    color:var(--mint);background:var(--ok-soft);
  }
  .ide-toolbar .btn.check:hover{border-color:var(--mint);background:color-mix(in srgb,var(--mint) 16%,transparent)}
  @media (max-width:980px){
    .ide-toolbar .session-chip,.ide-toolbar .full-btn{display:none}
  }
  .ide-toolbar .spacer{flex:1}
  .session-chip{
    display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 9px;
    border:1px solid var(--line);border-radius:999px;background:var(--panel);
    font-family:var(--mono);font-size:10.5px;color:var(--muted);white-space:nowrap;
  }
  .session-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--mint);flex:none}
  .session-chip.ok{color:var(--mint);border-color:color-mix(in srgb,var(--mint) 38%,var(--line));background:var(--ok-soft)}
  .sheet-close{display:none}

  .ide-stack{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px}
  .ide-panel{
    min-height:0;display:flex;flex-direction:column;overflow:hidden;
    background:var(--ide-panel);border:1px solid var(--ide-line);border-radius:10px;
    box-shadow:0 18px 40px -32px rgba(0,0,0,.75);
  }
  .editor-panel{flex:1.04}
  .shell-panel{flex:.96}
  .shell-panel.full{flex:1}
  .ide-panel-head{
    flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px;
    border-bottom:1px solid var(--ide-line);background:var(--ide-panel-2);
    font-family:var(--mono);font-size:11px;color:var(--ide-muted);letter-spacing:.01em;
  }
  .ide-panel-head .file{color:var(--ide-ink);font-weight:600}
  .ide-panel-head .right{margin-left:auto;color:var(--ide-dim);white-space:nowrap}
  .ide-panel-head .live{display:inline-flex;align-items:center;gap:6px}
  .ide-panel-head .live::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ide-mint)}
  .ide-panel-head .tag{
    font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ide-mint);
    border:1px solid color-mix(in srgb,var(--ide-mint) 35%,transparent);border-radius:999px;padding:2px 7px;
  }

  .editor{flex:1;min-height:0;display:flex;overflow:auto;background:var(--ide-code);font-family:var(--mono);font-size:13.5px;line-height:1.7}
  .gutter{
    flex:none;width:44px;padding:11px 0;text-align:right;color:var(--ide-dim);
    background:var(--ide-panel-2);border-right:1px solid var(--ide-line);user-select:none;
  }
  .gutter span{display:block;padding-right:10px}
  .gutter span.on{color:var(--ide-ink)}
  .code{flex:1;padding:11px 15px;white-space:pre;color:var(--ide-ink);position:relative;min-width:0}
  .code .line{display:block;min-height:22.9px}
  .code .line.on{background:rgba(139,123,255,.10);margin:0 -15px;padding:0 15px}
  .caret{display:inline-block;width:2px;height:15px;background:var(--ide-mint);vertical-align:-2px;margin-left:1px;animation:blink 1.05s steps(1) infinite}
  @keyframes blink{50%{opacity:0}}

  .tok-kw{color:#c792ea;font-weight:600}
  .tok-str{color:#a6e3a1}
  .tok-num{color:#f9c74f}
  .tok-com{color:#6f678f;font-style:italic}
  .tok-fn{color:#82aaff}
  .tok-var{color:#ece9f8}
  .tok-op{color:#89ddff}

  .shell{
    flex:1;min-height:0;overflow:auto;background:var(--ide-code);padding:11px 14px 13px;
    font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--ide-ink);scrollbar-width:thin;
  }
  .sh-line{display:block;min-height:22.1px;white-space:pre-wrap;word-break:break-word}
  .sh-prompt{color:var(--ide-mint);font-weight:700}
  .sh-cmd{color:var(--ide-ink)}
  .sh-repr{color:#d8caff}
  .sh-muted{color:var(--ide-muted)}
  .sh-err{color:var(--ide-coral)}
  .sh-ok{color:var(--ide-mint)}
  .sh-active .sh-caret{display:inline-block;width:2px;height:15px;background:var(--ide-mint);vertical-align:-2px;margin-left:2px;animation:blink 1.05s steps(1) infinite}
  .sh-hint{color:var(--ide-dim);font-size:11px;margin-top:8px;display:block}

  /* ============================================================
     Выдвижное оглавление
     ============================================================ */
  .toc-backdrop,.ide-backdrop{
    position:fixed;inset:0;z-index:200;background:rgba(8,5,16,.58);
    backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .toc-backdrop.open,.ide-backdrop.open{opacity:1;pointer-events:auto}
  .ide-backdrop{z-index:119}
  .toc-drawer{
    position:fixed;top:0;left:0;bottom:0;z-index:201;width:min(430px,92vw);
    display:flex;flex-direction:column;background:var(--panel);
    border-right:1px solid var(--violet-border);
    box-shadow:24px 0 80px -40px rgba(0,0,0,.7);
    transform:translateX(-100%);transition:transform .24s ease;
  }
  .toc-drawer.open{transform:none}
  .toc-head{
    flex:none;display:flex;align-items:center;gap:10px;padding:16px 16px 12px;
    border-bottom:1px solid var(--line);
  }
  .toc-head h2{margin:0;font-size:17px;letter-spacing:-.02em}
  .toc-head .x{
    margin-left:auto;width:32px;height:32px;border:1px solid var(--line);border-radius:8px;
    background:var(--panel-2);color:var(--muted);cursor:pointer;display:grid;place-items:center;padding:0;
  }
  .toc-head .x:hover{color:var(--coral);border-color:var(--coral)}
  .toc-head .x svg{width:15px;height:15px}
  .toc-progress{padding:12px 16px 14px;border-bottom:1px solid var(--line)}
  .toc-progress .row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted)}
  .toc-progress .row b{color:var(--ink);font-size:13px}
  .toc-progress .bar{height:6px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;margin-top:8px}
  .toc-progress .bar i{display:block;height:100%;width:37.5%;background:linear-gradient(90deg,var(--accent-1),var(--mint))}
  .toc-scroll{flex:1;min-height:0;overflow:auto;padding:10px 12px 18px;scrollbar-width:thin}
  .toc-chapter{margin:10px 0 14px}
  .toc-chapter h3{
    display:flex;align-items:center;gap:8px;margin:0 0 5px;padding:0 6px;
    font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);font-weight:700;
  }
  .toc-chapter h3 .n{font-family:var(--mono);color:var(--violet)}
  .toc-row{
    display:flex;align-items:flex-start;gap:9px;padding:8px 9px;border-radius:8px;
    font-size:13px;line-height:1.45;color:var(--muted);cursor:pointer;
  }
  .toc-row:hover{background:var(--panel-2);color:var(--ink)}
  .toc-row .num{flex:none;width:26px;font-family:var(--mono);font-size:10.5px;color:var(--dim);padding-top:1px}
  .toc-row .tt{min-width:0;flex:1}
  .toc-row .tt b{display:block;font-weight:600;color:inherit}
  .toc-row .tt span{display:block;font-size:11px;color:var(--dim);margin-top:1px}
  .toc-row .mark{flex:none;font-family:var(--mono);font-size:11px;color:var(--mint);padding-top:1px}
  .toc-row.current{background:var(--violet-soft);box-shadow:inset 0 0 0 1px var(--violet-border);color:var(--ink)}
  .toc-row.current .num{color:var(--violet)}
  .toc-row.done .mark::before{content:"✓"}
  .toc-row.soon{opacity:.42;cursor:default}
  .toc-row.soon:hover{background:transparent;color:var(--muted)}
  .toc-foot{flex:none;padding:12px 16px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
  .toc-foot .btn{justify-content:center;width:100%}
  .toc-foot .reset{
    background:none;border:0;padding:4px;color:var(--dim);font-family:inherit;font-size:11px;
    text-decoration:underline;text-underline-offset:2px;cursor:pointer;
  }
  .toc-foot .reset:hover{color:var(--coral)}

  /* ============================================================
     Страница оглавления /python/
     ============================================================ */
  .toc-top{
    position:sticky;top:0;z-index:50;height:64px;display:flex;align-items:center;gap:12px;
    padding:0 22px;background:var(--app-top-bg);border-bottom:1px solid var(--line);
    backdrop-filter:saturate(160%) blur(12px);
  }
  .toc-top .course-title{font-size:14px;color:var(--ink)}
  .toc-top .ct-right{gap:10px}
  .toc-top .btn{height:36px;padding:0 13px;border-radius:9px;font-size:13px}
  .toc-hero{border-bottom:1px solid var(--line);background:var(--app-toc-hero)}
  .toc-hero-in{
    max-width:1120px;margin:0 auto;padding:48px 24px 40px;
    display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);gap:34px;align-items:center;
  }
  .toc-hero h1{font-size:clamp(38px,5vw,58px);line-height:1.02;letter-spacing:-.05em;margin:0}
  .toc-hero h1 em{font-style:normal;color:var(--violet)}
  .toc-hero .lead{margin:15px 0 20px;max-width:58ch;font-size:17px;line-height:1.65;color:var(--lead-ink)}
  .toc-hero .chips{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 22px}
  .toc-hero .actions{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
  .toc-hero .actions .btn{height:42px;padding:0 18px;border-radius:10px;font-size:14px}
  .toc-hero .note{margin:12px 0 0;font-family:var(--mono);font-size:11px;color:var(--dim)}
  .progress-card{
    background:var(--panel);border:1px solid var(--violet-border);border-radius:16px;
    padding:20px 20px 18px;box-shadow:0 30px 70px -50px var(--violet-glow);
  }
  .progress-card .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
  .progress-card .big{display:flex;align-items:baseline;gap:8px;margin:6px 0 9px}
  .progress-card .big b{font-family:var(--mono);font-size:34px;line-height:1;color:var(--violet)}
  .progress-card .big span{font-size:13px;color:var(--muted)}
  .progress-card .bar{height:7px;border-radius:99px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
  .progress-card .bar i{display:block;height:100%;width:37.5%;background:linear-gradient(90deg,var(--accent-1),var(--mint))}
  .progress-card .next{display:flex;align-items:center;gap:9px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
  .progress-card .next b{display:block;color:var(--ink);font-size:13.5px}
  .progress-card .next .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);flex:none;box-shadow:0 0 0 4px var(--ok-soft)}
  .progress-card .btn{margin-top:14px;width:100%;justify-content:center;height:38px;border-radius:9px}
  .progress-card .reset{
    display:block;margin:8px auto 0;background:none;border:0;padding:3px;color:var(--dim);
    font-family:inherit;font-size:10.5px;text-decoration:underline;text-underline-offset:2px;cursor:pointer;
  }
  .progress-card .reset:hover{color:var(--coral)}

  .toc-body{
    max-width:1120px;margin:0 auto;padding:24px 24px 70px;
    display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start;
  }
  .toc-chapters{display:flex;flex-direction:column;gap:12px;min-width:0}
  .chapter{
    border:1px solid var(--line);border-radius:14px;overflow:hidden;
    background:var(--panel);
  }
  .chapter-head{
    display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);
    background:var(--panel-2);
  }
  .chapter-head .num{
    font-family:var(--mono);font-size:11px;font-weight:800;color:var(--violet);
    background:var(--violet-soft);border-radius:6px;padding:2px 7px;flex:none;
  }
  .chapter-head h2{margin:0;font-size:15.5px;letter-spacing:-.01em}
  .chapter-head .meta{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}
  .chapter-lessons{display:flex;flex-direction:column}
  .cl-row{
    display:flex;align-items:flex-start;gap:11px;padding:10px 16px;
    border-top:1px solid color-mix(in srgb,var(--line) 72%,transparent);
    font-size:13.5px;color:var(--muted);
  }
  .chapter-lessons .cl-row:first-child{border-top:0}
  .cl-row .num{flex:none;width:28px;font-family:var(--mono);font-size:10.5px;color:var(--dim);padding-top:2px}
  .cl-row .tt{min-width:0;flex:1}
  .cl-row .tt b{display:block;font-weight:600;color:var(--ink)}
  .cl-row .tt span{display:block;font-size:11.5px;color:var(--dim);margin-top:1px}
  .cl-row .state{flex:none;font-family:var(--mono);font-size:10px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em;padding-top:2px}
  .cl-row.done .state{color:var(--mint)}
  .cl-row.current{background:var(--violet-soft);box-shadow:inset 3px 0 0 var(--violet)}
  .cl-row.current .num{color:var(--violet)}
  .cl-row.soon{opacity:.45}
  .cl-row.soon .tt b{color:var(--muted)}
  .toc-rail{position:sticky;top:88px;display:flex;flex-direction:column;gap:12px}
  .rail-card{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px}
  .rail-card h3{margin:0 0 9px;font-size:14px}
  .rail-card p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--muted)}
  .rail-card ol{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--muted)}
  .rail-card li::marker{color:var(--violet)}
  .rail-card .links{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
  .rail-card .links a{
    font-size:11.5px;font-weight:600;color:var(--muted);border:1px solid var(--line);
    border-radius:7px;padding:4px 7px;background:var(--panel-2);
  }
  .rail-card .links a:hover{color:var(--violet);border-color:var(--violet-border)}
  .rail-card.cross{border-color:var(--violet-border);background:linear-gradient(180deg,var(--violet-soft),var(--panel) 80%)}
  .toc-end{margin-top:2px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:var(--panel);display:flex;gap:14px;align-items:center;flex-wrap:wrap}
  .toc-end p{margin:0;flex:1;min-width:240px;font-size:13px;color:var(--muted)}
  .toc-end .btn{height:36px;padding:0 13px;border-radius:9px;font-size:13px}

  /* ============================================================
     Мобильная версия
     ============================================================ */
  .mobile-bar{display:none}
  @media (max-width:980px){
    :root{--app-top-h:56px}
    .course-top,.toc-top{height:56px;padding:0 12px}
    .ct-divider,.course-title,.lesson-pill,.ct-progress,.home-btn{display:none}
    .toc-btn{padding:0 9px}
    .toc-btn span{display:none}
    .ct-left{gap:7px}
    body.python-app .brand{font-size:14px}
    body.python-app .brand .mark{width:28px;height:28px;font-size:12px}
    .app-main{grid-template-columns:1fr}
    .lesson-pane{border-right:0}
    .lesson-scroll{padding:22px 18px 92px}
    .lesson-head h1{font-size:30px}
    .lesson-body p{font-size:15.5px}
    .lesson-nav{display:none}
    .lesson-nav .hint{display:none}
    .ide-col{
      position:fixed;left:0;right:0;bottom:0;top:auto;z-index:120;
      height:min(92dvh,840px);padding:8px 10px 10px;
      background:var(--bg);border-radius:16px 16px 0 0;
      box-shadow:0 -26px 70px -34px rgba(0,0,0,.65);
      transform:translateY(100%);transition:transform .24s ease;
      will-change:transform;
    }
    .ide-col.is-open{transform:none}
    .ide-col::before{
      content:"";position:absolute;left:50%;top:6px;width:38px;height:4px;border-radius:2px;
      transform:translateX(-50%);background:var(--line-strong);
    }
    .view.sheet-open .mobile-bar{display:none}
    .ide-toolbar{min-height:46px;padding:0 2px 6px}
    .ide-toolbar .btn{padding:0 10px;font-size:12.5px}
    .ide-stack{gap:8px}
    .editor-panel,.shell-panel{flex:1}
    .sheet-close{display:grid}
    .mobile-bar{
      display:flex;position:fixed;left:0;right:0;bottom:0;z-index:110;height:54px;
      align-items:center;gap:10px;padding:0 12px;background:var(--panel);
      border-top:1px solid var(--line);box-shadow:0 -12px 30px -24px rgba(0,0,0,.5);
    }
    .mobile-bar .mb-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
    .mobile-bar .mb-title{font-size:13px;font-weight:650;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mobile-bar button{
      margin-left:auto;display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;
      border:1px solid var(--violet-border);border-radius:9px;background:var(--violet-soft);
      color:var(--violet);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;flex:none;
    }
    .mobile-bar button svg{width:14px;height:14px}
    .toc-hero-in{padding:30px 18px 26px;grid-template-columns:1fr;gap:22px}
    .toc-hero h1{font-size:clamp(34px,10vw,48px)}
    .toc-hero .lead{font-size:15.5px}
    .toc-body{grid-template-columns:1fr;padding:16px 14px 60px;gap:16px}
    .toc-rail{position:static;order:-1;display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .toc-rail .rail-card{padding:13px}
    .toc-rail .rail-card.cross{grid-column:1/-1}
    .toc-top .course-title{display:none}
    .toc-top .ct-right{margin-left:auto}
    .chapter-head{padding:11px 13px}
    .cl-row{padding:9px 13px}
    .toc-end{padding:15px}
  }
  @media (max-width:620px){
    .lesson-head h1{font-size:27px}
    .lesson-body ol,.lesson-body ul{font-size:15px}
    .code-block{font-size:12.8px;padding:13px 14px}
    .toc-rail{grid-template-columns:1fr}
    .progress-card .big b{font-size:28px}
    .toc-hero .actions .btn{width:100%;justify-content:center}
    .toc-hero .actions{flex-direction:column;align-items:stretch}
    .cf-top .lesson-pill{display:none}
  }


  @media (prefers-reduced-motion:reduce){
    body.python-app *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  }


  /* ============================================================
     Production roots: step app and TOC page
     ============================================================ */
  body.python-app{height:100dvh;overflow:hidden}
  body.python-app .app-shell{height:100dvh;display:flex;flex-direction:column}
  body.python-app .toc-page{height:100dvh;overflow:auto;background:var(--bg)}
  body.python-app .toc-page .toc-top{position:sticky;top:0;z-index:50}

  /* Настоящая консоль: вывод прокручивается, строка ввода — снизу */
  body.python-app .shell{display:flex;flex-direction:column;min-height:0;padding:0}
  body.python-app .sh-output{flex:1;min-height:0;overflow:auto;padding:11px 14px 8px;scrollbar-width:thin}
  body.python-app .sh-inputline{
    flex:none;display:flex;align-items:baseline;gap:7px;padding:8px 14px 12px;
    border-top:1px solid var(--ide-line);background:var(--ide-code);
  }
  body.python-app .sh-input{
    flex:1;min-width:0;background:transparent;border:0;outline:none;
    color:var(--ide-ink);font-family:var(--mono);font-size:13px;line-height:1.7;
    caret-color:var(--ide-mint);padding:0;
  }
  body.python-app .sh-input::placeholder{color:var(--ide-dim)}
  body.python-app .sh-input:disabled{opacity:.55}
  body.python-app .sh-cmd-echo{color:var(--ide-ink)}
  body.python-app .sh-in{color:var(--ide-muted)}
  body.python-app .sh-in::before{content:"› ";color:var(--ide-mint);font-weight:700}
  body.python-app .sh-inputline .sh-prompt{cursor:default}
  body.python-app .sh-hint{display:block;padding:0 14px 10px;color:var(--ide-dim);font-size:11px}
  body.python-app .sh-wait{display:inline-flex;align-items:center;gap:8px;color:var(--ide-muted);font-size:12px;padding:4px 0}
  body.python-app .sh-wait::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ide-mint);animation:blink 1s ease-in-out infinite}

  /* Успех шага появляется после проверки */
  body.python-app .success.step-success{display:none}
  body.python-app .success.step-success.show{display:flex}

  /* Кнопка «Назад» внизу */
  body.python-app .lesson-nav .btn:disabled,
  body.python-app .lesson-nav .btn[aria-disabled="true"]{opacity:.45;cursor:default;transform:none}

  /* Проекты в оглавлении */
  body.python-app .project-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
  @media (max-width:760px){body.python-app .project-grid{grid-template-columns:1fr}}
  body.python-app .project-card{
    border:1px solid var(--line);border-radius:14px;background:var(--panel);
    padding:16px 17px;display:flex;flex-direction:column;gap:6px;
  }
  body.python-app .project-card.soon{opacity:.62}
  body.python-app .project-card .pc-top{display:flex;align-items:center;gap:8px}
  body.python-app .project-card .pc-num{
    font-family:var(--mono);font-size:10.5px;font-weight:800;color:var(--violet);
    background:var(--violet-soft);border-radius:6px;padding:2px 7px;
  }
  body.python-app .project-card h3{margin:0;font-size:15.5px}
  body.python-app .project-card p{margin:0;font-size:12.5px;line-height:1.55;color:var(--muted)}
  body.python-app .project-card .pc-meta{
    margin-top:auto;padding-top:9px;border-top:1px solid var(--line);
    display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;color:var(--dim);
  }
  body.python-app .project-card .pc-soon{color:var(--amber);text-transform:uppercase;letter-spacing:.05em}

  /* FAQ на странице оглавления */
  body.python-app .faq-wrap{max-width:1120px;margin:0 auto;padding:0 24px 64px}
  body.python-app .faq-wrap h2{font-size:22px;margin:0 0 12px;letter-spacing:-.02em}
  body.python-app .faq-wrap .fold{margin:8px 0}
  body.python-app .faq-wrap .fold-body{color:var(--muted)}
  @media (max-width:760px){body.python-app .faq-wrap{padding:0 14px 50px}}

  /* ============================================================
     Production glue and details
     ============================================================ */
  body.python-app astro-island{display:contents}
  body.python-app .app-shell.sheet-open .mobile-bar{display:none}
  body.python-app .chapter .project-grid{padding:14px;margin-top:0}
  body.python-app .lesson-body .mono{
    font-family:var(--mono);font-size:.9em;background:var(--app-chip-bg);
    color:var(--app-chip-ink);border:1px solid var(--line);border-radius:4px;padding:1px 5px;
  }
  body.python-app .lesson-body .success .mono{
    background:color-mix(in srgb,var(--mint) 12%,transparent);
    border-color:color-mix(in srgb,var(--mint) 30%,transparent);
    color:inherit;
  }
  body.python-app .sh-sys{color:var(--ide-muted);font-style:italic}
  body.python-app .lesson-nav .btn.primary[aria-disabled="true"]{opacity:.45;cursor:default;transform:none}

  body.python-app .shell-keep{display:none}

  /* ============================================================
     CodeMirror в редакторе шага
     ============================================================ */
  body.python-app .course-editor{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--ide-code);overflow:hidden}
  body.python-app .course-editor-host{flex:1;min-height:0;display:flex}
  body.python-app .course-editor-host .cm-editor{height:100%;width:100%;background:var(--ide-code);color:var(--ide-ink);font-size:13.5px}
  body.python-app .course-editor-host .cm-editor.cm-focused{outline:none}
  body.python-app .course-editor-host .cm-scroller{font-family:var(--mono);line-height:1.7;overflow:auto}
  body.python-app .course-editor-host .cm-gutters{background:var(--ide-panel-2);border-right:1px solid var(--ide-line);color:var(--ide-dim)}
  body.python-app .course-editor-host .cm-activeLine,body.python-app .course-editor-host .cm-activeLineGutter{background:rgba(139,123,255,.10)}
  body.python-app .course-editor-fallback{
    flex:1;width:100%;min-height:0;border:0;outline:none;resize:none;padding:12px 14px;
    background:var(--ide-code);color:var(--ide-ink);font-family:var(--mono);font-size:13.5px;line-height:1.7;
  }
  body.python-app .course-editor .py-cm-error{padding:20px 16px;text-align:center;color:var(--ide-muted)}
  body.python-app .course-editor .py-cm-error p{margin:0 0 10px;font-size:13.5px;line-height:1.6}

  /* ============================================================
     Крупнее оглавление и правая панель (утверждённая правка)
     ============================================================ */
  body.python-app .chapter-head h2{font-size:18px;letter-spacing:-.015em}
  body.python-app .chapter-head .num{font-size:12px}
  body.python-app .chapter-head .meta{font-size:12px}
  body.python-app .cl-row{font-size:15.5px;line-height:1.5;gap:12px}
  body.python-app .cl-row .num{width:32px;font-size:12px}
  body.python-app .cl-row .tt b{font-size:15.5px;line-height:1.35}
  body.python-app .cl-row .tt span{font-size:13.5px;line-height:1.45;margin-top:2px}
  body.python-app .cl-row .state{font-size:11.5px}
  body.python-app .toc-rail{gap:14px}
  body.python-app .rail-card h3{font-size:17px;margin-bottom:10px}
  body.python-app .rail-card p{font-size:14.5px;line-height:1.6}
  body.python-app .rail-card ol{font-size:14.5px;line-height:1.6;gap:7px}
  body.python-app .rail-card .links{gap:7px}
  body.python-app .rail-card .links a{font-size:13px;padding:5px 8px}
  body.python-app .progress-card .k{font-size:12px}
  body.python-app .progress-card .big b{font-size:40px}
  body.python-app .progress-card .big span{font-size:15px}
  body.python-app .progress-card .next{font-size:14.5px}
  body.python-app .progress-card .next b{font-size:15.5px}
  body.python-app .progress-card .btn{height:42px;font-size:15px}
  body.python-app .progress-card .reset{font-size:12px}
  body.python-app .project-card{padding:18px 19px;gap:7px}
  body.python-app .project-card h3{font-size:18px}
  body.python-app .project-card p{font-size:14px;line-height:1.6}
  body.python-app .project-card .pc-num{font-size:12px}
  body.python-app .project-card .pc-meta{font-size:11.5px;padding-top:10px}
  body.python-app .faq-wrap h2{font-size:24px}
  body.python-app .faq-wrap .fold summary{font-size:16px}
  body.python-app .faq-wrap .fold-body{font-size:15px;line-height:1.65}
  body.python-app .toc-end p{font-size:14.5px}
  body.python-app .toc-end .btn{height:38px;font-size:14px}

  body.python-app .session-chip{height:30px;font-size:11.5px;padding:0 10px}
  body.python-app .ide-panel-head{font-size:12px;padding:9px 13px}
  body.python-app .shell{font-size:14.5px;line-height:1.75}
  body.python-app .sh-line{min-height:24px}
  body.python-app .sh-output{padding:13px 16px 10px}
  body.python-app .sh-inputline{padding:10px 16px 13px}
  body.python-app .sh-input{font-size:14.5px;line-height:1.75}
  body.python-app .sh-hint{font-size:12px;padding:0 16px 11px}
  body.python-app .course-editor-host .cm-editor{font-size:14.5px}
  body.python-app .course-editor-host .cm-scroller{line-height:1.75}
  body.python-app .course-editor-fallback{font-size:14.5px;line-height:1.75}

  @media (min-width:981px){
    body.python-app .toc-body{grid-template-columns:minmax(0,1fr) 340px;gap:30px}
    body.python-app .chapter-head{padding:14px 18px;gap:12px}
    body.python-app .cl-row{padding:13px 18px}
    body.python-app .rail-card{padding:18px}
    body.python-app .ide-toolbar .btn{height:38px;padding:0 14px;font-size:14px}
    body.python-app .ide-toolbar .btn svg{width:15px;height:15px}
  }

  @media (min-width:981px) and (max-width:1399px){
    /* В средней ширине правой колонки чипы не помещаются рядом с крупными кнопками. */
    body.python-app .ide-toolbar .session-chip{display:none}
  }

  @media (max-width:980px){
    .step-bonus{padding:14px}
    .bonus-head h3{font-size:17px}
    .bonus-prompt p{font-size:15px}
    .step-bonus .bonus-fold summary{font-size:13px}
  }

  /* ============================================================
     Пошаговые подсказки
     ============================================================ */
  .hint-panel{
    margin:22px 0 8px;padding:16px 18px;border:1px solid var(--line);border-radius:10px;
    background:linear-gradient(180deg,var(--app-fold-a),var(--app-fold-b));
  }
  .hint-panel-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:12px}
  .hint-kicker{
    color:var(--violet);font-family:var(--mono);font-size:11px;font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;
  }
  .hint-note{font-size:11.5px;color:var(--dim)}
  .hint-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
  .hint-item{
    padding:10px 12px;border:1px solid var(--violet-border);border-radius:8px;
    background:var(--violet-soft);
  }
  .hint-num{
    display:block;margin-bottom:3px;color:var(--violet);font-family:var(--mono);
    font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  }
  .hint-text p{margin:0 0 6px;font-size:14.5px;line-height:1.6;color:var(--ink)}
  .hint-text p:last-child{margin-bottom:0}
  .hint-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
  .hint-btn{
    display:inline-flex;align-items:center;justify-content:center;height:34px;padding:0 13px;
    border-radius:8px;font-family:var(--sans);font-size:13px;font-weight:650;line-height:1;
    cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease;
  }
  .hint-btn.primary{border:1px solid var(--violet);background:var(--violet);color:var(--bg)}
  .hint-btn.primary:hover{filter:brightness(1.06)}
  .hint-btn.ghost{border:1px solid var(--violet-border);background:transparent;color:var(--violet)}
  .hint-btn.ghost:hover{background:var(--violet-soft)}
  .hint-btn:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
  .hint-progress{font-family:var(--mono);font-size:11px;color:var(--dim)}
  .hint-confirm{
    margin-top:10px;padding:11px 12px;border:1px solid var(--violet-border);border-radius:8px;
    background:var(--violet-soft);
  }
  .hint-confirm p{margin:0 0 9px;font-size:14px;line-height:1.55;color:var(--ink)}
  .hint-confirm .hint-actions{margin-top:0}
  .hint-solution{padding:12px 13px;border:1px solid var(--violet-border);border-radius:8px;background:var(--app-fold-a)}
  .hint-solution-label{
    display:block;margin-bottom:7px;color:var(--violet);font-family:var(--mono);
    font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  }
  .hint-solution-body p{margin:0 0 6px;font-size:14.5px;line-height:1.6;color:var(--ink)}
  .hint-solution-body p:last-child{margin-bottom:0}
  .hint-solution-body .mono{font-size:.9em}
  .hint-global{display:block;margin-top:12px;color:var(--dim);font-family:var(--mono);font-size:11px}

  @media (max-width:980px){
    .hint-panel{padding:14px}
    .hint-text p,.hint-solution-body p{font-size:14px}
  }

  .rail-card .hint-stat{
    display:flex;align-items:baseline;justify-content:space-between;gap:10px;
    margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
    color:var(--muted);font-size:13px;
  }
  .rail-card .hint-stat b{color:var(--ink);font-family:var(--mono);font-size:18px}

  .hint-panel.compact{margin:10px 0 0;padding:0;border:0;background:transparent}
  .hint-panel.compact .hint-item,
  .hint-panel.compact .hint-solution{
    background:color-mix(in srgb,var(--panel) 88%,transparent);
  }

  .lesson-note{
    margin:14px 0;padding:12px 14px;border:1px solid var(--violet-border);border-radius:8px;
    background:var(--violet-soft);font-size:14.5px;line-height:1.6;color:var(--ink);
  }
  .lesson-note p{margin:0 0 6px;font-size:inherit;line-height:inherit;color:inherit}
  .lesson-note p:last-child{margin-bottom:0}
  .lesson-note .mono{font-size:.9em}

/* ============================================================
   Тренировка после главы (body.python-training)
   ============================================================ */

.train-head{margin-bottom:12px}
.train-head h1{font-size:31px}

.train-hud{
  margin:0 0 10px;padding:11px 14px 10px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel);
  display:flex;flex-direction:column;gap:8px;
  transition:border-color .2s ease,background .2s ease;
}
.train-hud.is-ok{border-color:color-mix(in srgb,var(--mint) 38%,var(--line));background:linear-gradient(135deg,var(--ok-soft),var(--panel) 62%)}
.train-hud.is-bad{border-color:color-mix(in srgb,var(--coral) 42%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--coral) 9%,var(--panel)),var(--panel) 62%)}
.th-top{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap}
.th-lbl{
  font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);flex:none;
}
.th-streak{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.th-streak b{font-size:19px;color:var(--ink);letter-spacing:-.02em;margin-right:2px}
.train-hud.is-ok .th-streak b{color:var(--mint)}
.train-hud.is-bad .th-streak b{color:var(--coral)}

.th-stats{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.th-stat b{font-family:var(--mono);font-size:14px;color:var(--ink);margin-right:3px}
.th-dot{width:3px;height:3px;border-radius:50%;background:var(--line-strong);flex:none;align-self:center}
.th-best{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--dim);white-space:nowrap}

.train-task{
  position:relative;overflow:hidden;margin:0 0 10px;padding:14px 17px 15px;
  border:1px solid var(--violet-border);border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  box-shadow:0 26px 60px -54px var(--violet-glow);
}
.train-task::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--violet),transparent 85%);
}
.tt-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.train-num{
  font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--violet);
}
.train-num b{font-size:11px}
.train-tag{
  font-family:var(--mono);font-size:10px;color:var(--muted);
  border:1px solid var(--line);border-radius:999px;padding:2px 8px;background:var(--panel);
}
.train-tag.review{
  color:var(--violet);border-color:var(--violet-border);background:var(--violet-soft);font-weight:700;
}
.tt-back{
  margin-left:auto;height:24px;padding:0 9px;border:1px solid var(--line);border-radius:7px;
  background:transparent;color:var(--muted);font-family:var(--sans);font-size:11px;font-weight:600;line-height:1;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.tt-back:hover{color:var(--violet);border-color:var(--violet-border);background:var(--violet-soft)}
.tt-back:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.train-task h2{margin:0 0 6px;font-size:23px;line-height:1.2;letter-spacing:-.025em}
.train-prompt{margin:0;font-size:15.5px;line-height:1.62;color:var(--lead-ink)}
.train-req{
  display:flex;align-items:flex-start;gap:9px;margin-top:12px;padding:9px 11px;
  border:1px solid var(--violet-border);border-radius:9px;background:var(--violet-soft);
  font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink);
}
.train-req .rq{
  flex:none;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--violet);padding-top:2px;
}
.train-cases{
  margin:8px 0 0;font-family:var(--mono);font-size:11px;line-height:1.5;color:var(--muted);
}
.train-hint{margin-top:10px}
.train-hint .hint-btn{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:6px;
  height:26px;padding:0 9px;border:1px solid var(--line);border-radius:7px;
  background:transparent;color:var(--muted);font-family:var(--sans);font-size:11.5px;
  font-weight:600;line-height:1;
}
.train-hint .hint-btn:hover{color:var(--violet);border-color:var(--violet-border);background:var(--violet-soft)}
.train-hint .hint-btn svg{width:12px;height:12px;transition:transform .15s}
.train-hint .hint-btn.is-open svg{transform:rotate(90deg)}
.train-hint .hint-body{
  display:none;margin:8px 0 0;padding:9px 11px;border-left:2px solid var(--violet-border);
  font-size:13.5px;line-height:1.6;color:var(--muted);
}
.train-hint .hint-body.show{display:block}

.train-feedback{
  display:flex;align-items:flex-start;gap:11px;flex-wrap:wrap;
  margin:0 0 10px;padding:11px 13px;border-radius:12px;border:1px solid;
}
.train-feedback.ok{background:var(--app-success-bg);border-color:var(--app-success-line);color:var(--app-success-ink)}
.train-feedback.bad{background:color-mix(in srgb,var(--coral) 9%,var(--panel));border-color:color-mix(in srgb,var(--coral) 42%,var(--line))}
.fb-ico{
  flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:900;margin-top:1px;
}
.train-feedback.ok .fb-ico{background:var(--app-success-mark);color:var(--app-success-mark-ink)}
.train-feedback.bad .fb-ico{background:color-mix(in srgb,var(--coral) 20%,transparent);color:var(--coral);border:1px solid color-mix(in srgb,var(--coral) 55%,transparent)}
.fb-body{flex:1 1 300px;min-width:0}
.fb-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14.5px;font-weight:700;line-height:1.4}
.train-feedback.bad .fb-title{color:var(--ink)}
.fb-body p{margin:4px 0 0;font-size:13.5px;line-height:1.55;color:inherit}
.train-feedback.bad .fb-body p{color:var(--lead-ink)}
.fb-tag{
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.04em;
  padding:2px 7px;border-radius:999px;border:1px solid currentColor;opacity:.85;
}
.fb-case{font-weight:700}
.fb-actions{
  display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;
  margin-left:auto;
}
.train-feedback .btn{
  flex:none;align-self:center;height:34px;padding:0 13px;
  border-radius:8px;font-size:12.5px;
}
.train-feedback .fb-actions .btn{margin-left:0}
.train-feedback.bad .btn{background:var(--panel);border-color:var(--line);color:var(--ink);box-shadow:none}
.train-feedback.bad .btn:hover{border-color:var(--violet)}

.tp-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:2px 0 9px;padding-top:10px;border-top:1px solid var(--line);
}
.tp-head h2{
  margin:0;font-family:var(--mono);font-size:9.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--muted);
}
.tp-count{font-family:var(--mono);font-size:11px;color:var(--muted)}
.tp-count b{font-size:13px;color:var(--ink)}
.train-grid{display:grid;grid-template-columns:repeat(auto-fill,24px);gap:6px;max-width:444px}
.train-tile{
  width:24px;height:24px;border-radius:6px;display:grid;place-items:center;padding:0;
  border:1px solid var(--line);background:var(--panel-2);appearance:none;
  font-family:var(--mono);font-size:11px;line-height:1;color:transparent;cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.train-tile:disabled{cursor:default}
.train-tile:not(:disabled):hover{border-color:var(--violet)}
.train-tile:focus-visible{outline:2px solid var(--violet);outline-offset:2px}
.train-tile.done{background:var(--mint);border-color:transparent;color:var(--bg);font-weight:800}
.train-tile.bad{border-color:color-mix(in srgb,var(--coral) 55%,transparent);background:color-mix(in srgb,var(--coral) 13%,transparent);color:var(--coral)}
.train-tile.now{box-shadow:0 0 0 2px var(--violet);border-color:transparent;background:var(--violet-soft);color:var(--violet)}
.train-tile.done.now{background:var(--mint);color:var(--bg);box-shadow:0 0 0 2px var(--violet)}
.tp-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--dim)}
.tp-legend span{display:inline-flex;align-items:center;gap:6px}
.lg{width:10px;height:10px;border-radius:3px;border:1px solid var(--line);background:var(--panel-2);flex:none}
.lg.done{background:var(--mint);border-color:transparent}
.lg.bad{background:color-mix(in srgb,var(--coral) 20%,transparent);border-color:color-mix(in srgb,var(--coral) 55%,transparent)}
.lg.now{background:var(--violet-soft);border-color:var(--violet)}

.train-start{
  margin:0 0 14px;padding:20px 22px;border:1px solid var(--violet-border);border-radius:16px;
  background:radial-gradient(560px 200px at 0% 0%,var(--violet-soft),transparent 70%),linear-gradient(180deg,var(--panel),var(--panel-2));
}
.ts-kicker{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)}
.train-start h2{margin:7px 0 6px;font-size:26px;letter-spacing:-.03em;line-height:1.15}
.train-start p{margin:0;font-size:14.5px;line-height:1.6;color:var(--lead-ink)}
.ts-rules{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.ts-rules li{display:flex;gap:10px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.ts-rules .n{
  flex:none;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--violet-border);background:var(--violet-soft);color:var(--violet);
  font-family:var(--mono);font-size:10.5px;font-weight:700;margin-top:1px;
}
.ts-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.ts-actions .btn{height:40px;padding:0 16px;border-radius:10px;font-size:13.5px}
.ts-note{font-family:var(--mono);font-size:10.5px;color:var(--dim)}

.train-passed{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  margin:0 0 14px;padding:16px 18px;border-radius:16px;
  background:var(--app-success-bg);border:1px solid var(--app-success-line);color:var(--app-success-ink);
}
.tp-badge{
  flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--app-success-mark);color:var(--app-success-mark-ink);font-size:17px;font-weight:900;
  box-shadow:0 8px 22px -12px var(--app-success-mark);
}
.tp-body{flex:1 1 260px;min-width:0}
.tp-kicker{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.8}
.train-passed h2{margin:4px 0 3px;font-size:22px;line-height:1.2;letter-spacing:-.02em;color:var(--app-success-ink)}
.train-passed p{margin:0;font-size:13.5px;line-height:1.55;opacity:.9}
.tp-actions{flex:1 1 100%;display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.tp-actions .btn{height:34px;padding:0 13px;border-radius:8px;font-size:12.5px}
.tp-actions .btn:not(.primary){
  background:transparent;border-color:var(--app-success-line);color:var(--app-success-ink);box-shadow:none;
}
.tp-actions .btn:not(.primary):hover{border-color:var(--app-success-mark);transform:none}
.train-continue{
  display:flex;align-items:center;gap:8px;margin:0 0 8px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);
}

.train-note{
  display:flex;align-items:center;gap:9px;margin:0;padding-top:9px;
  border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.5;color:var(--muted);
}
.train-note::before{
  content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--line-strong);
}

.train-rules{margin-top:14px}
.train-rules .fold-body ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.train-rules .fold-body li{font-size:13px;line-height:1.55}

.python-training .editor-panel{flex:.82}
.python-training .shell-panel{flex:1.18}

.toc-row.train-row{margin-top:4px}
.toc-row.train-row .num{color:var(--mint);font-weight:700}
.toc-row.train-row .tt b{color:var(--ink)}

@media (max-width:980px){
  .train-grid{grid-template-columns:repeat(10,1fr);gap:5px}
  .train-tile{width:auto;aspect-ratio:1;border-radius:5px}
  .th-stats{margin-left:0}
  .th-best{width:100%;margin-left:0}
  .train-head h1{font-size:28px}
  .train-task h2{font-size:21px}
}
@media (max-width:620px){
  .th-streak{margin-left:0}
  .th-stats{width:100%}
  .th-best{display:none}
  .train-feedback .btn{margin-left:0}
  .train-task{padding:14px 15px 15px}
  .train-start{padding:17px 16px}
  .train-start h2{font-size:23px}
}

/* --- Редактор: полный экран и перетаскиваемая граница --- */
.ide-col.is-zen{
  position:fixed;inset:0;z-index:300;width:100%;height:100dvh;
  padding:12px clamp(18px,4vw,48px) 14px;
  background:var(--bg);border-radius:0;transform:none;
}

.ide-split{
  flex:none;display:flex;align-items:center;justify-content:center;
  height:14px;margin:-7px 0;cursor:row-resize;touch-action:none;
}
.ide-split::before{
  content:"";width:44px;height:3px;border-radius:2px;background:var(--ide-line);
  transition:background .15s ease;
}
.ide-split:hover::before,
.ide-split:focus-visible::before{background:var(--violet)}
.ide-split:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}

body.python-app.split-dragging{user-select:none;cursor:row-resize}

@media (max-width:980px){
  .ide-split{display:none}
}

@media (min-width:981px){
  .ide-stack{--editor-split:.55}
  .ide-stack > .editor-panel{flex:var(--editor-split) 1 0}
  .ide-stack > .shell-panel{flex:calc(1 - var(--editor-split)) 1 0}
}