:root{
  --bg:#0B1422; --panel:#121F33; --panel-2:#0E1929; --line:#24395A;
  --amber:#F2A93B; --amber-dim:#A8742A; --green:#5FD49C; --red:#E5544B;
  --sky:#5BA8E8; --violet:#A78BFA; --text:#E8EEF6; --muted:#8FA3BD;
  --mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;
  --disp:"Arial Narrow","Avenir Next Condensed","Helvetica Neue",Arial,sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --acc:var(--amber); --acc-dim:var(--amber-dim);
}
*{box-sizing:border-box;margin:0;padding:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--text);font-family:var(--body);line-height:1.65;font-size:16px}
button{font-family:var(--body)}
.topbar{position:sticky;top:0;z-index:50;background:rgba(11,20,34,.93);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 20px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.placard{font-family:var(--disp);text-transform:uppercase;letter-spacing:.18em;font-size:13px;color:var(--amber);border:1px solid var(--amber-dim);padding:3px 10px;border-radius:3px;white-space:nowrap;cursor:pointer;background:none}
.topbar .crumbs{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:6px;align-items:center;flex-wrap:wrap;min-width:0}
.topbar .crumbs a{color:var(--muted);text-decoration:none;padding:4px 6px;border-radius:3px}
.topbar .crumbs a:hover{color:var(--amber);background:var(--panel)}
.topbar .crumbs .sep{opacity:.5}
.topbar .spacer{margin-left:auto}
.topbar .rnd{font-family:var(--mono);font-size:11px;color:var(--green);background:none;border:1px solid var(--line);border-radius:4px;padding:6px 12px;cursor:pointer;letter-spacing:.08em}
.topbar .rnd:hover{border-color:var(--green)}
button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.wrap{max-width:880px;margin:0 auto;padding:0 20px 120px}
.en{color:var(--sky);font-family:var(--mono);font-size:.82em;letter-spacing:.01em}
.kbd{font-family:var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:3px;padding:1px 6px;font-size:.9em;white-space:nowrap}
strong{color:#fff}

.hero{padding:48px 0 34px;border-bottom:1px solid var(--line)}
.hero .code{font-family:var(--mono);color:var(--sky);font-size:13px;letter-spacing:.1em}
.hero h1{font-family:var(--disp);text-transform:uppercase;letter-spacing:.06em;font-size:clamp(30px,6vw,52px);line-height:1.05;margin:10px 0 16px}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero p{color:var(--muted);max-width:640px}
.hero .hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

.cat-head{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--sky);margin:40px 0 14px;display:flex;align-items:center;gap:10px}
.cat-head::after{content:"";flex:1;height:1px;background:var(--line)}
.menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.menu-grid.single{grid-template-columns:1fr}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:20px;cursor:pointer;text-align:left;color:var(--text);transition:border-color .15s;display:block;width:100%}
.mcard:hover{border-color:var(--acc-dim,var(--amber-dim))}
.mcard .mnum{font-family:var(--mono);font-size:11px;letter-spacing:.15em;color:var(--sky);text-transform:uppercase;display:flex;gap:8px;align-items:center}
.mcard h3{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-size:20px;margin:6px 0 8px;color:var(--text)}
.mcard p{font-size:13.5px;color:var(--muted);margin:0}
.mcard .mstat{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:12px;display:flex;gap:14px;flex-wrap:wrap}
.mcard .done{color:var(--green)}
.mcard.sim{border-color:var(--amber-dim)}
.mcard.sim h3{color:var(--amber)}
.pbar{height:4px;background:var(--panel-2);border-radius:2px;overflow:hidden;margin-top:12px}
.pbar i{display:block;height:100%;background:var(--green);width:0%}

.lesson-list{display:grid;gap:8px;margin:16px 0}
.lrow{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:13px 16px;cursor:pointer;text-align:left;color:var(--text);width:100%}
.lrow:hover{border-color:var(--amber-dim)}
.lrow .lmark{font-family:var(--mono);font-size:13px;color:var(--muted);min-width:34px}
.lrow.is-done .lmark{color:var(--green)}
.lrow .lt{font-size:15px}
.lrow .ldone{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--green)}

section.mod-sec{padding:34px 0;border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--sky);text-transform:uppercase;margin-bottom:8px}
h2{font-family:var(--disp);text-transform:uppercase;letter-spacing:.05em;font-size:clamp(22px,4vw,30px);margin-bottom:10px}
.mod-desc{color:var(--muted);font-size:14.5px;margin-bottom:6px}

/* lesson view */
.lesson-head{padding:34px 0 18px}
.lesson-head .eyebrow{margin-bottom:4px}
.lesson-head h2{margin-bottom:0}
.steps{display:grid;gap:0}
.step{padding:10px 0;animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.step p{margin-bottom:6px}
.step h3.sub{font-size:17px;margin:18px 0 6px;color:var(--amber);font-family:var(--body)}
.step .note{color:var(--muted);font-size:14px;border-left:2px solid var(--amber-dim);padding-left:12px;margin:6px 0}
.step ul,.step ol{margin:6px 0 6px 22px;color:var(--text)}
.step li{margin-bottom:6px}
.step svg{width:100%;height:auto;display:block;margin:8px 0}
.formula{font-family:var(--mono);font-size:clamp(16px,3.2vw,21px);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:14px 18px;text-align:center;margin:10px 0}
.formula .hl{color:var(--amber)} .formula .hl2{color:var(--sky)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:10px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:15px}
.card .t{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;color:var(--amber)}
.card p{font-size:13.5px;color:var(--muted);margin:0}
.card.b .t{color:var(--sky)} .card.g .t{color:var(--green)} .card.r .t{color:var(--red)} .card.v .t{color:var(--violet)}
.continue-row{padding:14px 0 40px}
.lesson-bar{position:sticky;top:53px;z-index:40;background:var(--bg);padding:10px 0 6px}
.lesson-bar .qbar{margin-bottom:0}

/* quiz */
.quiz{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:24px;margin-top:18px}
.quiz-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:12px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap;gap:8px}
.qbar{height:4px;background:var(--panel-2);border-radius:2px;overflow:hidden;margin-bottom:20px}
.qbar i{display:block;height:100%;background:var(--amber);width:0%;transition:width .3s}
.qtext{font-size:17px;font-weight:600;margin-bottom:16px;line-height:1.5}
.opts{display:grid;gap:10px}
.opt{text-align:left;font-size:15px;background:var(--panel-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:12px 15px;cursor:pointer;line-height:1.45}
.opt:hover:not(:disabled){border-color:var(--amber-dim)}
.opt:disabled{cursor:default}
.opt.correct{border-color:var(--green);background:rgba(95,212,156,.10);color:#fff}
.opt.wrong{border-color:var(--red);background:rgba(229,84,75,.10)}
.opt .key{font-family:var(--mono);color:var(--muted);margin-right:8px}
.explain{margin-top:14px;font-size:14px;border-radius:8px;padding:13px 15px;display:none;line-height:1.55}
.explain.show{display:block}
.explain.ok{background:rgba(95,212,156,.08);border:1px solid rgba(95,212,156,.4)}
.explain.no{background:rgba(229,84,75,.08);border:1px solid rgba(229,84,75,.4)}
.explain b{font-family:var(--mono);letter-spacing:.1em;font-size:12px;display:block;margin-bottom:6px}
.explain.ok b{color:var(--green)} .explain.no b{color:var(--red)}
.qnav{margin-top:16px;text-align:right}
.step .quiz{margin:10px 0}
.step .quiz .qhint{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--sky);margin-bottom:10px}

.btn{font-family:var(--mono);font-size:13px;font-weight:700;background:var(--amber);color:#16202F;border:none;border-radius:6px;padding:11px 22px;cursor:pointer;letter-spacing:.05em}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--amber);border:1px solid var(--amber-dim)}
.btn.green{background:var(--green);color:#10231A}
.exam-cta{margin:20px 0 0}

.result{text-align:center;padding:18px 0}
.result .score{font-family:var(--mono);font-size:52px;font-weight:700}
.result .score.pass{color:var(--green)} .result .score.fail{color:var(--red)}
.result .verdict{font-family:var(--disp);text-transform:uppercase;letter-spacing:.15em;font-size:18px;margin:8px 0 12px}
.result p{color:var(--muted);font-size:14px;max-width:440px;margin:0 auto 16px}
.result .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.review{margin-top:20px;text-align:left;font-size:13.5px;color:var(--muted)}
.review div{padding:8px 0;border-top:1px solid var(--line)}
.review .ok{color:var(--green);font-family:var(--mono)} .review .no{color:var(--red);font-family:var(--mono)}

.lesson-done{background:var(--panel);border:1px solid rgba(95,212,156,.4);border-radius:10px;padding:26px;text-align:center;margin:20px 0;animation:fadeIn .35s ease}
.lesson-done .vd{font-family:var(--disp);text-transform:uppercase;letter-spacing:.15em;font-size:20px;color:var(--green);margin-bottom:8px}
.lesson-done p{color:var(--muted);font-size:14px;margin-bottom:16px}
.lesson-done .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

.backrow{padding:22px 0 0;display:flex;gap:10px}
.backrow button,.backrow a{font-family:var(--mono);font-size:12px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:5px;padding:8px 14px;cursor:pointer;text-decoration:none;display:inline-block}
.backrow button:hover,.backrow a:hover{color:var(--amber);border-color:var(--amber-dim)}
footer{padding:36px 20px;text-align:center;font-family:var(--mono);font-size:11px;color:var(--muted)}
footer b{color:var(--sky)}

/* ============ images (фотостоки) ============ */
.ph{margin:6px 0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel-2)}
.ph img{display:block;width:100%;height:auto;max-height:440px;object-fit:cover}
.ph figcaption{font-family:var(--mono);font-size:11px;color:var(--muted);padding:8px 12px;border-top:1px solid var(--line)}
.ph.ph-fail{min-height:160px;background:linear-gradient(135deg,var(--panel),var(--panel-2));position:relative}
.ph.ph-fail::after{content:'IMG';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);color:var(--line);letter-spacing:.3em;font-size:24px}

/* ============ interactive widgets ============ */
.widget-step{margin:8px 0}
.fh-widget{border:1px solid var(--line);border-radius:12px;background:var(--panel-2);padding:16px 16px 14px}
.fh-title{font-family:var(--disp);text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--acc);margin-bottom:12px}
.fh-inputs{display:flex;flex-direction:column;gap:11px;margin-bottom:6px}
.fh-row{display:grid;grid-template-columns:1fr;gap:5px}
.fh-lab{font-size:13px;color:var(--muted);display:flex;justify-content:space-between}
.fh-cur{color:var(--text);font-family:var(--mono);font-weight:700}
.fh-row input[type=range]{-webkit-appearance:none;appearance:none;height:5px;border-radius:4px;background:var(--line);outline:none}
.fh-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--acc);cursor:pointer;border:2px solid var(--panel-2)}
.fh-row input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--acc);cursor:pointer;border:2px solid var(--panel-2)}
.fh-outputs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.fh-out{flex:1 1 140px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:8px 11px;display:flex;flex-direction:column;gap:3px}
.fh-out.hl{border-color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc-dim)}
.fh-out-l{font-size:11px;color:var(--muted);font-family:var(--mono)}
.fh-out-v{font-size:18px;font-weight:700;color:var(--text)}
.fh-out.hl .fh-out-v{color:var(--acc)}
.fh-chart{margin-top:12px}
.fh-svg{width:100%;height:auto;display:block;overflow:visible}
.fh-bar{fill:var(--acc);opacity:.85}
.fh-line{fill:none;stroke:var(--acc);stroke-width:2.2}
.fh-axis{stroke:var(--line);stroke-width:1}
.fh-mark{stroke:var(--green);stroke-width:1;stroke-dasharray:3 3}
.fh-axt{fill:var(--muted);font-size:9px;font-family:var(--mono)}
.fh-cap,.fh-chart .fh-cap{font-family:var(--mono);font-size:10px;color:var(--muted);margin-top:6px;text-align:center}
.fh-seg{display:flex;gap:6px;margin-bottom:12px}
.fh-seg button{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:6px 12px;cursor:pointer}
.fh-seg button.on{color:var(--acc);border-color:var(--acc-dim);background:var(--panel-2)}
.fh-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.fh-btn{font-family:var(--mono);font-size:12px;color:var(--text);background:var(--acc-dim);border:none;border-radius:6px;padding:7px 13px;cursor:pointer}
.fh-btn.ghost{background:none;border:1px solid var(--line);color:var(--muted)}
.fh-btn:hover{filter:brightness(1.12)}