maxim.dolgolyov/Learn_System
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1f17fb40dc8b8def7009270d2a3629f3c00776b8
Learn_System/frontend/textbooks/physics_9_ch2.html
T
Maxim Dolgolyov 1f17fb40dc fix(textbooks): извлечён общий widget CSS — phys-textbook-widgets.css 
Жалоба пользователя по Физике 8 (но проблема общая для Phys 8 и Phys 9):
страницы глав используют классы .wg/.dnd-pool/.dnd-chip/.btn/.score-display/
.feedback/.actions/.sliders/.spoiler/.drop-box в HTML-разметке, но CSS-правила
для них живут только в physics_10_ch1.html. Из-за этого карточки-задания,
chip'ы drag-and-drop, кнопки и feedback-блоки в Phys 8 и Phys 9 рендерились
без стилей (как обычный текст).

- extract_widget_css.cjs: вытягивает CSS-блок (.btn..pre-.col-side) из
  physics_10_ch1.html в frontend/css/phys-textbook-widgets.css (6.4 КБ)
- Подключает <link> в 11 файлов: physics_8_ch1/ch2/ch3/hub/lab,
  physics_9_ch1..ch5, physics_9_hub
- migrate_phys9_content.js теперь инжектит ссылку на widget CSS при будущих
  миграциях (рядом с FA CDN)
2026-05-30 09:16:24 +03:00

2023 lines
154 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<title>Физика 9 · Глава 2 · «Основы динамики»</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<link rel="stylesheet" href="/css/phys-textbook-widgets.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"
onload="renderMathInElement(document.body,{delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false})"></script>
<script src="/js/api.js" defer></script>
<script src="/js/xp.js" defer></script>
<script src="/js/phys.js" defer></script>
<script src="/js/phys9_legacy.js" defer></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Manrope:wght@600;700;800;900&family=Unbounded:wght@700;800;900&family=JetBrains+Mono:wght@500;700&display=swap" rel="stylesheet">
<style>
:root{
--bg:#fafafa; --card:#fff; --card-soft:#f8fafc; --text:#0f172a; --ink:#0f172a; --muted:#64748b;
--border:#e2e8f0; --sh:0 1px 3px rgba(0,0,0,.06); --sh2:0 4px 14px rgba(0,0,0,.08);
--pri:#059669; --pri2:#047857; --pri-soft:#d1fae5;
--acc:#34d399; --acc2:#059669; --acc-soft:#d1fae5;
--ok:#10b981; --ok-bg:#d1fae5; --warn:#f59e0b; --warn-bg:#fef3c7;
--bad:#ef4444; --fail:#dc2626; --fail-bg:#fee2e2;
}
.dark{--bg:#0a0e1a; --card:#0f1727; --card-soft:#13192a; --text:#dbeafe; --ink:#dbeafe; --muted:#7c8fab; --border:#1e2a44}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;font-size:15px}
button,input,select,textarea{font-family:inherit;font-size:inherit}
button{cursor:pointer;border:0;background:transparent;color:inherit}
a{color:inherit;text-decoration:none}
.ic{width:16px;height:16px;display:inline-block;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.hdr{position:relative;background:linear-gradient(110deg,#064e3b 0%,#059669 55%,#34d399 100%);color:#fff;padding:46px 22px 30px;overflow:hidden;border-bottom:2px solid rgba(255,255,255,.2);min-height:130px}
.hdr::before{content:'ГЛАВА 2';position:absolute;right:-12px;top:50%;transform:translateY(-50%);font-family:'Unbounded',sans-serif;font-size:clamp(5rem,15vw,11rem);font-weight:900;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.12);line-height:1;pointer-events:none;user-select:none;z-index:0}
.hdr-row{position:relative;z-index:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.hdr h1{font-family:'Unbounded',sans-serif;font-size:1.5rem;font-weight:900;letter-spacing:-.01em;line-height:1.3;padding-top:4px}
.hdr-sub{font-size:.85rem;opacity:.88;margin-top:6px;font-weight:500;line-height:1.4}
.hdr-side{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hdr-btn{padding:7px 12px;border-radius:9px;background:rgba(255,255,255,.14);color:#fff;font-weight:600;font-size:.82rem;display:inline-flex;align-items:center;gap:6px;transition:background .15s;text-decoration:none}
.hdr-btn:hover{background:rgba(255,255,255,.24)}
.main{max-width:1240px;margin:0 auto;padding:22px;width:100%;display:grid;grid-template-columns:1fr 280px;gap:24px}
@media(max-width:980px){.main{grid-template-columns:1fr;padding:14px}}
.col-main{min-width:0}
.hero{background:linear-gradient(135deg,var(--pri-soft) 0%,var(--acc-soft) 50%,var(--pri-soft) 100%);background-size:200% 200%;animation:heroShift 12s ease-in-out infinite;border:1px solid var(--border);border-radius:18px;padding:24px 22px;margin-bottom:24px;position:relative;overflow:hidden}
@keyframes heroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.hero::before{content:'F';position:absolute;right:0;top:-30px;font-size:clamp(2rem,12vw,8rem);font-weight:900;color:var(--pri);opacity:.10;line-height:1;pointer-events:none;font-family:'Unbounded',sans-serif}
.hero h2{font-family:'Unbounded',sans-serif;font-size:1.55rem;font-weight:800;color:var(--pri2);margin-bottom:10px;letter-spacing:-.01em}
.hero p{font-size:.95rem;color:var(--text);opacity:.88;margin-bottom:14px;max-width:640px}
.hero-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.btn-primary{padding:11px 22px;background:linear-gradient(135deg,var(--pri),var(--pri2));color:#fff;border-radius:11px;font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:8px;box-shadow:var(--sh2);transition:transform .15s,box-shadow .15s}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,.18)}
.hero-progress{flex:1;min-width:200px;max-width:280px}
.hp-label{font-size:.74rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:5px}
.hp-bar{height:8px;background:rgba(0,0,0,.12);border-radius:5px;overflow:hidden}
.hp-fill{height:100%;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:5px;width:0%;transition:width .6s cubic-bezier(.16,1,.3,1)}
.hp-text{font-size:.78rem;color:var(--muted);font-weight:700;margin-top:4px;display:block}
.hero-xp-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:linear-gradient(135deg,var(--warn,#f59e0b),var(--pri));color:#fff;border-radius:99px;font-size:.82rem;font-weight:800;letter-spacing:.02em;box-shadow:0 4px 12px rgba(0,0,0,.18);font-family:'Unbounded',sans-serif}
.psel{margin-bottom:24px}
.psel-title{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px}
.psel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.psel-card{background:var(--card);border:1.5px solid var(--border);border-radius:13px;padding:14px;cursor:pointer;transition:transform .2s,box-shadow .2s,border-color .2s;text-align:left;position:relative}
.psel-card:hover{transform:translateY(-3px);box-shadow:var(--sh2);border-color:var(--pri)}
.psel-card.active{border-color:var(--pri);background:linear-gradient(135deg,var(--pri-soft),var(--card));box-shadow:var(--sh2)}
.psel-card.active::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:13px 13px 0 0}
.psel-num{font-family:'Unbounded',sans-serif;font-size:.72rem;font-weight:800;color:var(--pri);text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.psel-name{font-size:.86rem;font-weight:700;color:var(--text);line-height:1.3;margin-bottom:8px}
.psel-prog{height:4px;background:rgba(0,0,0,.10);border-radius:3px;overflow:hidden}
.psel-prog-fill{height:100%;background:var(--pri);width:0%;transition:width .4s}
.psel-card.final{background:linear-gradient(135deg,var(--acc-soft),var(--pri-soft))}
.psel-card.final .psel-num{color:var(--warn)}
.sec[id="sec-p15"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p16"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p17"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p18"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p19"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p20"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p21"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p22"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p23"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-p24"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec[id="sec-final2"]{ --sec-acc:#059669; --sec-acc-d:#047857; --sec-acc-soft:#d1fae5; }
.sec{display:none;position:relative;animation:fadeIn .35s ease}
.sec.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.sec::before{content:attr(data-watermark);position:absolute;right:-20px;top:10%;font-family:'Unbounded',sans-serif;font-size:clamp(6rem,18vw,14rem);font-weight:900;color:transparent;-webkit-text-stroke:1.5px var(--sec-acc-soft,var(--pri-soft));line-height:1;pointer-events:none;user-select:none;z-index:0;opacity:.35}
.sec-header{margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--sec-acc-soft,var(--pri-soft));position:relative;z-index:1}
.sec-num{display:inline-block;padding:4px 10px;background:linear-gradient(135deg,var(--sec-acc,var(--pri)),var(--sec-acc-d,var(--pri2)));color:#fff;border-radius:7px;font-family:'Unbounded',sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.04em;margin-bottom:8px}
.sec-h{font-family:'Unbounded',sans-serif;font-size:1.6rem;font-weight:800;color:var(--sec-acc-d,var(--pri2));letter-spacing:-.01em;line-height:1.25}
.card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.04);position:relative;z-index:1;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.card:hover{transform:translateY(-2px);box-shadow:0 4px 10px rgba(0,0,0,.06),0 16px 36px rgba(0,0,0,.08)}
.card-header{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--border)}
.card-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.card-icon.theory{background:#8b5cf6}.card-icon.example{background:#10b981}.card-icon.lab{background:#0891b2}.card-icon.rule{background:#ec4899}
.card-icon .ic{width:18px;height:18px}
.card-title{font-family:'Unbounded',sans-serif;font-size:.82rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);flex:1}
.card-num{font-size:.74rem;font-weight:700;color:var(--muted);background:var(--sec-acc-soft,var(--pri-soft));padding:3px 7px;border-radius:5px}
.card-body{font-size:.94rem;line-height:1.65}
.card-body p{margin-bottom:8px}
.card-body p:last-child{margin-bottom:0}
.btn{padding:8px 16px;border-radius:8px;background:var(--card);color:var(--text);border:1.5px solid var(--border);font-weight:600;font-size:.88rem;transition:background .15s,border-color .15s,transform .1s}
.btn:hover{background:var(--sec-acc-soft,var(--pri-soft));border-color:var(--sec-acc,var(--pri))}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--sec-acc,var(--pri));color:#fff;border-color:var(--sec-acc,var(--pri))}
.btn.primary:hover{background:var(--sec-acc-d,var(--pri2));border-color:var(--sec-acc-d,var(--pri2))}
.col-side{position:sticky;top:14px;align-self:start;height:fit-content;max-height:calc(100vh - 28px);overflow-y:auto}
.sidecard{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px;margin-bottom:14px;box-shadow:var(--sh)}
.sidecard h4{font-family:'Unbounded',sans-serif;font-size:.74rem;font-weight:800;color:var(--pri2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border)}
.sidecard-row{margin-bottom:8px;font-size:.86rem;line-height:1.6}
.sidecard-row b{color:var(--pri);font-weight:700}
.sidecard-row:last-child{margin-bottom:0}
@media(max-width:980px){.col-side{position:static;max-height:none}}
.xp-card{background:linear-gradient(135deg,var(--acc-soft),var(--pri-soft));border:1.5px solid var(--acc);border-radius:12px;padding:14px;margin-bottom:14px}
.xp-card-title{font-size:.68rem;font-weight:800;color:var(--acc2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between}
.xp-level{font-size:1.1rem;font-weight:900;color:var(--acc2);font-family:'Unbounded',sans-serif}
.xp-bar{height:9px;background:rgba(0,0,0,.10);border-radius:6px;overflow:hidden;margin:7px 0}
.xp-fill{height:100%;background:linear-gradient(90deg,var(--acc),var(--pri));border-radius:6px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.xp-nums{font-size:.74rem;color:var(--muted);display:flex;justify-content:space-between}
.sec-nav{display:flex;gap:10px;margin-top:24px;padding-top:20px;border-top:1px solid var(--border);justify-content:space-between;flex-wrap:wrap}
.foot{text-align:center;padding:30px 16px;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border);margin-top:30px}
.ach-popup{position:fixed;top:80px;right:18px;background:linear-gradient(135deg,var(--pri),var(--acc));color:#fff;padding:12px 18px;border-radius:11px;font-weight:700;font-size:.9rem;box-shadow:0 8px 28px rgba(0,0,0,.32);z-index:1002;display:none;align-items:center;gap:8px;max-width:340px}
.ach-popup.show{display:flex}
.col-side-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:9990;display:none}
.col-side-backdrop.show{display:block}
@media(max-width:980px){
.col-side{position:fixed;top:0;right:0;height:100vh;width:300px;max-width:88vw;background:var(--bg);box-shadow:-12px 0 24px rgba(0,0,0,.18);padding:18px 16px;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease;z-index:9991;max-height:none}
.col-side.open{transform:none}
}
.search-modal{position:fixed;inset:0;background:rgba(15,23,42,.55);backdrop-filter:blur(4px);z-index:9993;display:none;align-items:flex-start;justify-content:center;padding-top:14vh}
.search-modal.show{display:flex}
.search-box{background:var(--bg);border:1px solid var(--border);border-radius:14px;width:560px;max-width:92vw;max-height:70vh;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.4)}
.search-input{padding:14px 16px;font-size:1rem;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);outline:none}
.search-results{flex:1;overflow-y:auto;padding:6px 0}
.search-row{display:block;padding:8px 16px;cursor:pointer;border-bottom:1px solid var(--border);text-align:left;background:transparent;border:0;width:100%;color:var(--text)}
.search-row:hover,.search-row.active{background:var(--sec-acc-soft,var(--pri-soft))}
.search-row .sr-kind{font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.search-row .sr-title{font-weight:700;font-size:.92rem;color:var(--text)}
.search-row .sr-desc{font-size:.8rem;color:var(--muted);margin-top:2px}
.search-empty{padding:20px;text-align:center;color:var(--muted);font-size:.88rem}
.search-foot{padding:8px 14px;border-top:1px solid var(--border);font-size:.74rem;color:var(--muted);display:flex;gap:14px}
.search-foot kbd{padding:2px 6px;background:var(--card);border:1px solid var(--border);border-radius:4px;font-family:'JetBrains Mono',monospace;font-size:.72rem}
.psel-card{position:relative}
.psel-card .psel-done{position:absolute;top:6px;right:6px;width:18px;height:18px;border-radius:50%;background:#10b981;display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(16,185,129,.45);z-index:2}
.psel-card .psel-done svg{width:11px;height:11px;stroke:#fff;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.psel-card.done .psel-done{display:flex}
/* === MONOLITH CSS (migrated from physics_9.html) === */
:root{
--pri:#1d4ed8; --pri2:#1e40af;
--acc:#0ea5e9;
--ok:#10b981; --ok-bg:#d1fae5;
--fail:#ef4444; --fail-bg:#fee2e2;
--warn:#f59e0b; --warn-bg:#fef3c7;
--bg:#eff6ff; --card:#fff;
--text:#1e293b; --muted:#64748b;
--border:#dbeafe;
--sh:0 2px 10px rgba(30,64,175,.08)
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}
.dark{--bg:#0f172a;--card:#1e293b;--text:#e2e8f0;--muted:#94a3b8;--border:#1e3a5f}
/* ── Шапка ── */
.hdr{background:linear-gradient(135deg,#1e40af 0%,#0284c7 55%,#0ea5e9 100%);color:#fff;padding:18px 20px 16px;text-align:center}
.hdr h1{font-size:1.3rem;font-weight:900}
.hdr p{font-size:.8rem;opacity:.85;margin-top:3px}
/* ── Табы ── */
.tabs{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;background:var(--card);border-bottom:1px solid var(--border)}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 14px;border:2px solid var(--border);border-radius:10px;font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.18s;background:var(--card);color:var(--muted);flex-shrink:0}
.tab:hover{border-color:var(--pri);color:var(--pri)}
.tab.active{background:var(--pri);color:#fff;border-color:var(--pri)}
/* ── Контент ── */
.content{max-width:780px;margin:0 auto;padding:16px 14px;display:none}
.content.active{display:block}
/* ── Справочник: карточки формул ── */
.section-title{font-size:1.05rem;font-weight:800;margin-bottom:12px;color:var(--pri);display:flex;align-items:center;gap:8px}
.section-title i{opacity:.7}
.formula-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px}
@media(max-width:560px){.formula-grid{grid-template-columns:1fr}}
.fcard{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;box-shadow:var(--sh);transition:transform .18s,box-shadow .18s}
.fcard:hover{transform:translateY(-2px);box-shadow:0 6px 22px rgba(29,78,216,.12)}
.fcard.highlight{border-color:var(--pri);background:linear-gradient(135deg,rgba(29,78,216,.04),rgba(14,165,233,.04))}
.fcard h3{font-size:.8rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.fcard .main-f{font-size:1.05rem;font-weight:700;text-align:center;margin:8px 0;padding:10px;background:rgba(29,78,216,.06);border-radius:9px}
.fcard p{font-size:.83rem;color:var(--muted);line-height:1.7;margin-top:6px}
.fcard ul{font-size:.83rem;color:var(--muted);line-height:1.8;padding-left:18px;margin-top:6px}
/* ── Пример задачи ── */
.example-box{background:var(--card);border:2px solid #bfdbfe;border-left:5px solid var(--pri);border-radius:12px;padding:18px 20px;margin-bottom:20px;box-shadow:var(--sh)}
.example-box h3{font-size:.88rem;font-weight:700;color:var(--pri);margin-bottom:10px}
.example-box .cond{font-size:.87rem;background:rgba(29,78,216,.05);border-radius:8px;padding:10px 14px;line-height:1.8;margin-bottom:10px}
.example-box .sol{font-size:.86rem;line-height:1.9}
.given-table{width:100%;border-collapse:collapse;margin:8px 0;font-size:.82rem}
.given-table td{padding:4px 10px;border:1px solid var(--border)}
.given-table tr:first-child td{background:rgba(29,78,216,.04)}
.given-table tr:last-child td{background:rgba(16,185,129,.05)}
.given-table td:first-child{font-weight:700;width:38%;color:var(--pri)}
/* ── Вопросы (теоретические) ── */
.q-list{font-size:.85rem;line-height:1.9;color:var(--muted);padding-left:20px}
.q-list li{margin-bottom:4px}
/* ── Задачи: интерактив ── */
.score-bar{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:14px;font-size:.85rem;font-weight:600}
.chip{padding:5px 14px;border-radius:50px;display:flex;align-items:center;gap:5px}
.chip-ok{background:var(--ok-bg);color:#065f46}
.chip-tot{background:var(--card);color:var(--muted);border:1px solid var(--border)}
.prog-wrap{width:100%;height:6px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:16px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--pri),var(--acc));border-radius:3px;transition:width .4s}
.task-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:20px 22px;box-shadow:var(--sh);margin-bottom:12px}
.task-num{font-size:.72rem;font-weight:700;color:var(--acc);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.task-text{font-size:.97rem;font-weight:700;line-height:1.85;margin-bottom:14px}
.task-hint{font-size:.8rem;color:var(--muted);margin-top:4px;margin-bottom:12px;display:flex;align-items:flex-start;gap:6px}
.task-hint i{margin-top:2px;color:var(--warn);flex-shrink:0}
.ans-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ans-inp{width:110px;padding:11px 10px;border:2px solid var(--border);border-radius:10px;font-size:1.05rem;font-family:'JetBrains Mono',monospace;text-align:center;outline:none;background:var(--card);color:var(--text);transition:.18s}
.ans-inp:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(29,78,216,.12)}
.unit-lbl{font-size:.82rem;color:var(--muted);font-weight:600;white-space:nowrap}
.btn{padding:11px 20px;border:none;border-radius:10px;font-weight:700;font-size:.84rem;cursor:pointer;transition:.18s;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn-pri{background:var(--pri);color:#fff}.btn-pri:hover{background:var(--pri2)}
.btn-ghost{background:transparent;border:2px solid var(--border);color:var(--muted)}.btn-ghost:hover{border-color:var(--pri);color:var(--pri)}
.btn-next{background:var(--ok);color:#fff}.btn-next:hover{filter:brightness(1.1)}
.feedback{padding:13px 18px;border-radius:11px;font-size:.87rem;font-weight:600;display:none;line-height:1.7;margin-top:10px}
.feedback.show{display:block;animation:pop .28s ease}
.fb-ok{background:var(--ok-bg);color:#065f46}
.fb-fail{background:var(--fail-bg);color:#991b1b}
@keyframes pop{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
/* ── Итог ── */
.summary{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:28px;text-align:center;box-shadow:var(--sh);display:none}
.summary.show{display:block;animation:pop .35s ease}
.summary h2{font-size:1.2rem;font-weight:800;margin-bottom:8px}
.big-score{font-size:3.5rem;font-weight:900;color:var(--pri);line-height:1;margin:10px 0}
.sum-grade{color:var(--muted);font-size:.9rem;margin-bottom:20px}
.sum-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* ── Справочник (плавающая кнопка) ── */
.ref-toggle{position:fixed;bottom:16px;right:16px;z-index:60;width:46px;height:46px;border-radius:13px;background:var(--pri);color:#fff;border:none;cursor:pointer;display:grid;place-items:center;font-size:1.1rem;box-shadow:0 4px 14px rgba(29,78,216,.3)}
.ref-panel{position:fixed;bottom:72px;right:16px;z-index:60;width:300px;max-height:72vh;overflow-y:auto;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px 18px;box-shadow:0 8px 30px rgba(0,0,0,.15);display:none;font-size:.8rem;line-height:1.85;scrollbar-width:thin}
.ref-panel.show{display:block;animation:pop .2s ease}
.ref-panel h3{font-size:.84rem;font-weight:700;color:var(--pri);margin:12px 0 4px}.ref-panel h3:first-child{margin-top:0}
.ref-panel .rf{background:rgba(29,78,216,.06);border-radius:8px;padding:6px 10px;margin:3px 0;text-align:center}
/* ── Para-hero баннеры ── */
.para-hero{border-radius:18px;padding:22px 24px;margin-bottom:22px;position:relative;overflow:hidden}
.para-hero::after{content:'';position:absolute;right:-28px;top:-28px;width:150px;height:150px;border-radius:50%;opacity:.13;pointer-events:none}
.ph-31{background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#3b82f6 100%);color:#fff}
.ph-31::after{background:#bfdbfe}
.ph-32{background:linear-gradient(135deg,#0c4a6e 0%,#0369a1 55%,#0ea5e9 100%);color:#fff}
.ph-32::after{background:#bae6fd}
.ph-33{background:linear-gradient(135deg,#064e3b 0%,#065f46 55%,#10b981 100%);color:#fff}
.ph-33::after{background:#a7f3d0}
.ph-34{background:linear-gradient(135deg,#78350f 0%,#92400e 55%,#d97706 100%);color:#fff}
.ph-34::after{background:#fde68a}
.ph-35{background:linear-gradient(135deg,#4c1d95 0%,#6d28d9 55%,#8b5cf6 100%);color:#fff}
.ph-35::after{background:#ddd6fe}
.ph-36{background:linear-gradient(135deg,#134e4a 0%,#0f766e 55%,#2dd4bf 100%);color:#fff}
.ph-36::after{background:#99f6e4}
.para-hero .ph-label{font-size:.7rem;font-weight:700;opacity:.7;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.para-hero h2{font-size:1.12rem;font-weight:900;margin-bottom:8px;line-height:1.3}
.para-hero .ph-formula{display:inline-block;font-size:1rem;background:rgba(255,255,255,.17);border-radius:10px;padding:7px 16px;margin:2px 0 8px;font-weight:700;border:1px solid rgba(255,255,255,.22)}
.para-hero .ph-desc{font-size:.79rem;opacity:.87;line-height:1.65;margin-bottom:10px}
.para-hero .ph-tags{display:flex;flex-wrap:wrap;gap:6px}
.para-hero .ph-tag{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.25);border-radius:20px;padding:3px 11px;font-size:.7rem;font-weight:700}
/* ── Запомни! ── */
.remember-box{background:linear-gradient(135deg,rgba(239,68,68,.06),rgba(220,38,38,.03));border:2px solid rgba(239,68,68,.3);border-radius:13px;padding:14px 17px;margin:16px 0}
.remember-box-title{font-weight:800;font-size:.82rem;color:#b91c1c;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.dark .remember-box{border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.07)}
.dark .remember-box-title{color:#fca5a5}
.remember-box ul{padding-left:18px;margin:0}
.remember-box li,.remember-box p{font-size:.83rem;color:var(--text);line-height:1.9;margin:0}
/* ── Частые ошибки ── */
.mistakes-box{background:linear-gradient(135deg,rgba(245,158,11,.06),rgba(251,191,36,.03));border:2px solid rgba(245,158,11,.35);border-radius:13px;padding:14px 17px;margin:16px 0}
.mistakes-box-title{font-weight:800;font-size:.82rem;color:#92400e;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.dark .mistakes-box{border-color:rgba(245,158,11,.4);background:rgba(245,158,11,.07)}
.dark .mistakes-box-title{color:#fcd34d}
.mistakes-box ul{padding-left:18px;margin:0}
.mistakes-box li{font-size:.83rem;color:var(--text);line-height:1.9}
/* ── Шаги решения ── */
.sol-steps{list-style:none;padding:0;margin:8px 0}
.sol-steps li{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px;font-size:.86rem;line-height:1.75}
.step-n{min-width:24px;height:24px;border-radius:50%;background:var(--pri);color:#fff;font-size:.69rem;font-weight:800;display:grid;place-items:center;margin-top:1px;flex-shrink:0}
/* ── Интерактивные схемы ── */
.idiag{background:var(--card);border:2px solid var(--border);border-radius:14px;padding:16px 18px;margin:14px 0;box-shadow:var(--sh)}
.idiag h3{font-size:.79rem;font-weight:700;color:var(--pri);text-transform:uppercase;letter-spacing:.05em;margin-bottom:12px;display:flex;align-items:center;gap:6px}
.idiag-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
@media(max-width:560px){.idiag-2col{grid-template-columns:1fr}}
.slider-row{display:flex;align-items:center;gap:10px;margin:8px 0;font-size:.82rem;flex-wrap:wrap}
.slider-lbl{min-width:90px;font-weight:600;color:var(--text);flex-shrink:0}
.slider-val{min-width:72px;font-weight:800;color:var(--pri);font-family:'JetBrains Mono',monospace;font-size:.82rem;flex-shrink:0}
input[type=range]{flex:1;min-width:100px;accent-color:var(--pri);cursor:pointer}
.idiag-result{background:rgba(29,78,216,.08);border-radius:10px;padding:10px 14px;margin-top:10px;font-size:.9rem;font-weight:700;text-align:center;font-family:'JetBrains Mono',monospace;letter-spacing:.02em;border:1px solid rgba(29,78,216,.15)}
.work-pos{color:#065f46;font-weight:900}.work-zero{color:#92400e;font-weight:900}.work-neg{color:#991b1b;font-weight:900}
/* ── Цепочка вывода формулы ── */
.fchain{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:rgba(29,78,216,.04);border:1px solid var(--border);border-radius:11px;padding:11px 15px;margin:10px 0;font-size:.82rem}
.fchain-step{background:var(--card);border:1.5px solid var(--border);border-radius:8px;padding:4px 12px;font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:600}
.fchain-arrow{color:var(--muted);font-weight:700}
.fchain-note{font-size:.73rem;color:var(--muted);font-style:italic}
/* ── Объяснение по-человечески ── */
.student-box{background:linear-gradient(135deg,rgba(254,243,199,.7),rgba(255,237,213,.7));border:1.5px solid #f59e0b;border-radius:14px;padding:16px 18px;margin:16px 0;line-height:1.75}
.dark .student-box{background:linear-gradient(135deg,rgba(120,80,0,.18),rgba(100,50,0,.18));border-color:#d97706}
.student-box-title{font-weight:800;font-size:.88rem;color:#92400e;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.dark .student-box-title{color:#fbbf24}
.student-box p{margin:0 0 9px;font-size:.84rem;color:var(--text)}
.student-box p:last-child{margin-bottom:0}
.student-box b{color:#92400e}
.dark .student-box b{color:#fbbf24}
/* ── Тема ── */
.theme-btn{position:fixed;top:12px;right:12px;z-index:60;width:38px;height:38px;border-radius:10px;background:var(--card);border:1px solid var(--border);cursor:pointer;display:grid;place-items:center;font-size:1rem;box-shadow:var(--sh);color:var(--text)}
/* ── Para badge (сложные задачи) ── */
.para-badge{display:inline-flex;align-items:center;padding:2px 8px;background:rgba(29,78,216,.13);color:var(--pri);border-radius:6px;font-size:.68rem;font-weight:800;margin-left:7px;letter-spacing:.03em}
.para-badge.b32{background:rgba(14,165,233,.13);color:#0284c7}
.para-badge.b33{background:rgba(16,185,129,.13);color:#059669}
.para-badge.b34{background:rgba(245,158,11,.13);color:#d97706}
.para-badge.b35{background:rgba(109,40,217,.13);color:#6d28d9}
.para-badge.b36{background:rgba(15,118,110,.13);color:#0f766e}
/* ── §1–14 Кинематика Para-heroes ── */
.ph-1{background:linear-gradient(135deg,#7f1d1d 0%,#dc2626 55%,#f97316 100%);color:#fff}
.ph-1::after{background:#fed7aa}
.ph-2{background:linear-gradient(135deg,#134e4a 0%,#0d9488 55%,#2dd4bf 100%);color:#fff}
.ph-2::after{background:#99f6e4}
.ph-3{background:linear-gradient(135deg,#500724 0%,#be185d 55%,#f472b6 100%);color:#fff}
.ph-3::after{background:#fce7f3}
.ph-4{background:linear-gradient(135deg,#431407 0%,#b45309 55%,#fbbf24 100%);color:#fff}
.ph-4::after{background:#fde68a}
.ph-5{background:linear-gradient(135deg,#1e3a8a 0%,#1d4ed8 55%,#60a5fa 100%);color:#fff}
.ph-5::after{background:#bfdbfe}
.ph-6{background:linear-gradient(135deg,#14532d 0%,#15803d 55%,#4ade80 100%);color:#fff}
.ph-6::after{background:#bbf7d0}
.ph-7{background:linear-gradient(135deg,#2e1065 0%,#7c3aed 55%,#c4b5fd 100%);color:#fff}
.ph-7::after{background:#ede9fe}
.ph-8{background:linear-gradient(135deg,#082f49 0%,#0284c7 55%,#7dd3fc 100%);color:#fff}
.ph-8::after{background:#e0f2fe}
.ph-9{background:linear-gradient(135deg,#1a2e05 0%,#4d7c0f 55%,#a3e635 100%);color:#fff}
.ph-9::after{background:#d9f99d}
.ph-10{background:linear-gradient(135deg,#4c0519 0%,#be123c 55%,#fb7185 100%);color:#fff}
.ph-10::after{background:#ffe4e6}
.ph-11{background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 55%,#a5b4fc 100%);color:#fff}
.ph-11::after{background:#e0e7ff}
.ph-12{background:linear-gradient(135deg,#7c2d12 0%,#c2410c 55%,#fb923c 100%);color:#fff}
.ph-12::after{background:#ffedd5}
.ph-13{background:linear-gradient(135deg,#2e1065 0%,#6d28d9 55%,#ddd6fe 100%);color:#fff}
.ph-13::after{background:#f5f3ff}
.ph-14{background:linear-gradient(135deg,#164e63 0%,#0e7490 55%,#67e8f9 100%);color:#fff}
.ph-14::after{background:#cffafe}
.para-badge.b1{background:rgba(220,38,38,.13);color:#dc2626}
.para-badge.b2{background:rgba(13,148,136,.13);color:#0d9488}
.para-badge.b3{background:rgba(190,24,93,.13);color:#be185d}
.para-badge.b4{background:rgba(180,83,9,.13);color:#b45309}
.para-badge.b5{background:rgba(29,78,216,.13);color:#1d4ed8}
.para-badge.b6{background:rgba(21,128,61,.13);color:#15803d}
.para-badge.b7{background:rgba(124,58,237,.13);color:#7c3aed}
.para-badge.b8{background:rgba(2,132,199,.13);color:#0284c7}
.para-badge.b9{background:rgba(77,124,15,.13);color:#4d7c0f}
.para-badge.b10{background:rgba(190,18,60,.13);color:#be123c}
.para-badge.b11{background:rgba(55,48,163,.13);color:#3730a3}
.para-badge.b12{background:rgba(194,65,12,.13);color:#c2410c}
.para-badge.b13{background:rgba(109,40,217,.13);color:#6d28d9}
.para-badge.b14{background:rgba(14,116,144,.13);color:#0e7490}
/* ── §15–21 Para-heroes ── */
.ph-15{background:linear-gradient(135deg,#7c2d12 0%,#c2410c 55%,#f97316 100%);color:#fff}
.ph-15::after{background:#fed7aa}
.ph-16{background:linear-gradient(135deg,#881337 0%,#be123c 55%,#f43f5e 100%);color:#fff}
.ph-16::after{background:#fecdd3}
.ph-17{background:linear-gradient(135deg,#4a044e 0%,#7e22ce 55%,#d946ef 100%);color:#fff}
.ph-17::after{background:#f5d0fe}
.ph-18{background:linear-gradient(135deg,#082f49 0%,#155e75 55%,#22d3ee 100%);color:#fff}
.ph-18::after{background:#a5f3fc}
.ph-19{background:linear-gradient(135deg,#500724 0%,#9d174d 55%,#f472b6 100%);color:#fff}
.ph-19::after{background:#fbcfe8}
.ph-20{background:linear-gradient(135deg,#1c1917 0%,#44403c 55%,#a8a29e 100%);color:#fff}
.ph-20::after{background:#e7e5e4}
.ph-21{background:linear-gradient(135deg,#1e1b4b 0%,#3730a3 55%,#818cf8 100%);color:#fff}
.ph-21::after{background:#c7d2fe}
.ph-22{background:linear-gradient(135deg,#0c4a6e 0%,#0369a1 55%,#38bdf8 100%);color:#fff}
.ph-22::after{background:#bae6fd}
.ph-23{background:linear-gradient(135deg,#14532d 0%,#166534 55%,#4ade80 100%);color:#fff}
.ph-23::after{background:#bbf7d0}
.ph-24{background:linear-gradient(135deg,#3b0764 0%,#7e22ce 55%,#c084fc 100%);color:#fff}
.ph-24::after{background:#e9d5ff}
.ph-25{background:linear-gradient(135deg,#052e16 0%,#065f46 55%,#34d399 100%);color:#fff}
.ph-25::after{background:#a7f3d0}
.ph-26{background:linear-gradient(135deg,#2e1065 0%,#6d28d9 55%,#c084fc 100%);color:#fff}
.ph-26::after{background:#e9d5ff}
.ph-27{background:linear-gradient(135deg,#431407 0%,#b45309 55%,#fbbf24 100%);color:#fff}
.ph-27::after{background:#fde68a}
.ph-28{background:linear-gradient(135deg,#0f2027 0%,#203a43 55%,#2c5364 100%);color:#fff}
.ph-28::after{background:#a5f3fc}
.ph-29{background:linear-gradient(135deg,#001845 0%,#0041a8 55%,#0099ff 100%);color:#fff}
.ph-29::after{background:#bfdbfe}
.ph-30{background:linear-gradient(135deg,#064e3b 0%,#065f46 55%,#34d399 100%);color:#fff}
.ph-30::after{background:#a7f3d0}
.para-badge.b15{background:rgba(194,65,12,.13);color:#c2410c}
.para-badge.b16{background:rgba(190,18,60,.13);color:#be123c}
.para-badge.b17{background:rgba(126,34,206,.13);color:#7e22ce}
.para-badge.b18{background:rgba(21,94,117,.13);color:#155e75}
.para-badge.b19{background:rgba(157,23,77,.13);color:#9d174d}
.para-badge.b20{background:rgba(68,64,60,.13);color:#44403c}
.para-badge.b21{background:rgba(55,48,163,.13);color:#3730a3}
.para-badge.b22{background:rgba(3,105,161,.13);color:#0369a1}
.para-badge.b23{background:rgba(22,101,52,.13);color:#166534}
.para-badge.b24{background:rgba(126,34,206,.13);color:#7e22ce}
.para-badge.b25{background:rgba(6,95,70,.13);color:#065f46}
.para-badge.b26{background:rgba(109,40,217,.13);color:#6d28d9}
.para-badge.b27{background:rgba(180,83,9,.13);color:#b45309}
.para-badge.b28{background:rgba(32,58,67,.13);color:#203a43}
.para-badge.b29{background:rgba(0,65,168,.13);color:#0041a8}
.para-badge.b30{background:rgba(6,95,70,.13);color:#065f46}
/* ── Misc ── */
.dark .ans-inp{background:#0f172a;color:#e2e8f0}
.dark .fcard{background:#1e293b}.dark .example-box{background:#1e293b}
.katex{font-size:1em!important}
.info-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.72rem;font-weight:700;background:rgba(14,165,233,.12);color:#0284c7;margin-left:8px}
hr.divider{border:none;border-top:1px solid var(--border);margin:20px 0}
/* ── Навигация по задачам ── */
.nav-dots{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.nav-dot{min-width:30px;height:30px;padding:0 6px;border-radius:7px;border:2px solid var(--border);background:var(--card);font-size:.72rem;font-weight:700;cursor:pointer;display:grid;place-items:center;transition:.15s;color:var(--muted);font-family:'JetBrains Mono',monospace}
.nav-dot:hover{border-color:var(--pri);color:var(--pri)}
.nav-dot.nd-cur{background:var(--pri);border-color:var(--pri);color:#fff}
.nav-dot.nd-ok{background:var(--ok-bg);border-color:var(--ok);color:#065f46}
.nav-dot.nd-fail{background:var(--fail-bg);border-color:var(--fail);color:#991b1b}
/* ── Life-examples grid ── */
.life-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:14px 0}
.life-item{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center}
.life-item .li-icon{font-size:1.9rem;margin-bottom:5px}
.life-item .li-title{font-size:.79rem;font-weight:700;color:var(--text);margin-bottom:3px}
.life-item .li-desc{font-size:.71rem;color:var(--muted);line-height:1.55}
/* ── Insight (physics aha) box ── */
.insight-box{background:linear-gradient(135deg,rgba(99,102,241,.07),rgba(139,92,246,.04));border:2px solid rgba(99,102,241,.22);border-radius:13px;padding:14px 17px;margin:16px 0}
.insight-title{font-weight:800;font-size:.82rem;color:#4f46e5;margin-bottom:7px;display:flex;align-items:center;gap:7px}
.dark .insight-box{background:rgba(99,102,241,.08);border-color:rgba(139,92,246,.3)}
.dark .insight-title{color:#a5b4fc}
.insight-box p{font-size:.83rem;color:var(--text);line-height:1.8;margin:0 0 6px}
.insight-box p:last-child{margin:0}
/* ── μ table ── */
.mu-tbl{width:100%;border-collapse:collapse;font-size:.8rem;margin:8px 0}
.mu-tbl th{background:rgba(68,64,60,.1);padding:5px 8px;text-align:center;font-weight:700;border:1px solid var(--border)}
.mu-tbl td{padding:4px 8px;text-align:center;border:1px solid var(--border)}
.mu-tbl tr:hover td{background:rgba(29,78,216,.04)}
/* ── Solve-steps ── */
.solve-box{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 18px;margin:14px 0}
.solve-box h4{font-size:.82rem;font-weight:800;color:var(--pri);margin-bottom:10px;display:flex;align-items:center;gap:6px}
/* ── Canvas physics panels ── */
.cv-wrap{position:relative;margin:10px 0}
.cv-wrap canvas{width:100%;border-radius:10px;display:block}
.cv-playbtn{margin-top:6px;padding:7px 18px;border:none;border-radius:8px;background:var(--pri);color:#fff;font-weight:700;font-size:.8rem;cursor:pointer;transition:.15s}
.cv-playbtn:hover{filter:brightness(1.1)}
/* ── Para-pills ── */
.para-pill{padding:6px 13px;border:2px solid var(--border);border-radius:10px;font-size:.74rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:.18s;background:var(--card);color:var(--muted);flex-shrink:0}
.para-pill:hover{border-color:var(--pri);color:var(--pri)}
.para-pill.active{background:var(--pri);color:#fff;border-color:var(--pri)}
/* ── MCQ ── */
.mcq-opts{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.mcq-opt{width:100%;text-align:left;padding:11px 16px;border:2px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:.9rem;font-weight:500;cursor:pointer;transition:.18s;line-height:1.5;font-family:inherit}
.mcq-opt:hover:not(:disabled){border-color:var(--pri);background:rgba(29,78,216,.05);color:var(--text)}
.mcq-opt:disabled{cursor:default}
.mcq-opt.mcq-cor{border-color:var(--ok)!important;background:var(--ok-bg)!important;color:#065f46!important;font-weight:700}
.mcq-opt.mcq-wrong{border-color:var(--fail)!important;background:var(--fail-bg)!important;color:#991b1b!important}
/* ── Def / info box ── */
.def-box{background:rgba(29,78,216,.05);border-left:4px solid var(--pri);border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:.87rem;line-height:1.8}
/* ── Лаб. №11 ── */
.ph-lab{background:linear-gradient(135deg,#7f1d1d 0%,#b91c1c 55%,#ef4444 100%);color:#fff}
.ph-lab::after{background:#fca5a5}
.lab11-tbl{width:100%;border-collapse:collapse;font-size:.83rem;font-family:'JetBrains Mono',monospace}
.lab11-tbl th{background:rgba(29,78,216,.07);padding:7px 8px;text-align:center;font-weight:700;font-size:.74rem;border:1px solid var(--border)}
.lab11-tbl td{padding:6px 8px;text-align:center;border:1px solid var(--border);background:var(--card)}
.lab11-tbl tr:hover td{background:rgba(29,78,216,.04)}
.lab11-tbl tr.lab11-avg td{background:rgba(29,78,216,.09);font-weight:800;color:var(--pri)}
/* ── Тетрадные вычисления (Лаб. №11) ── */
.nb-wrap{
background-color:#fffef2;
background-image:
linear-gradient(90deg,transparent 33px,rgba(239,68,68,.22) 33px,rgba(239,68,68,.22) 35px,transparent 35px),
repeating-linear-gradient(transparent 0,transparent 26px,#bfdbfe 26px,#bfdbfe 27px);
border:1px solid #fde68a;border-radius:13px;
padding:14px 18px 14px 46px;
font-size:.82rem;line-height:27px;color:var(--text);
margin:16px 0;overflow:hidden
}
.dark .nb-wrap{
background-color:#14120a;
background-image:
linear-gradient(90deg,transparent 33px,rgba(185,28,28,.30) 33px,rgba(185,28,28,.30) 35px,transparent 35px),
repeating-linear-gradient(transparent 0,transparent 26px,rgba(30,58,95,.75) 26px,rgba(30,58,95,.75) 27px);
border-color:#422006
}
.nb-hdr{font-size:.87rem;font-weight:800;color:#b45309;letter-spacing:.03em;margin-bottom:1px}
.dark .nb-hdr{color:#fbbf24}
.nb-dado{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-bottom:4px}
@media(max-width:440px){.nb-dado{grid-template-columns:1fr}}
.nb-clbl{font-weight:800;color:var(--pri);text-decoration:underline;text-underline-offset:2px}
.nb-div{border:none;border-top:1.5px solid #fde68a;margin:4px 0}
.dark .nb-div{border-color:#422006}
.nb-sh{font-weight:800;color:var(--pri);margin:2px 0}
.nb-step{margin:2px 0}
.nb-step b{color:#1e293b;font-weight:700}
.dark .nb-step b{color:#e2e8f0}
.nb-i{display:block;padding-left:18px}
.nb-v{color:#1d4ed8;font-weight:800;font-family:'JetBrains Mono',monospace}
.dark .nb-v{color:#93c5fd}
.nb-box{display:inline-block;background:rgba(29,78,216,.11);border:1.5px solid rgba(29,78,216,.22);
border-radius:5px;padding:0 7px;font-weight:800;font-family:'JetBrains Mono',monospace;color:#1d4ed8}
.dark .nb-box{background:rgba(147,197,253,.11);border-color:rgba(147,197,253,.28);color:#93c5fd}
.nb-ok{color:#065f46;font-weight:800}.nb-bad{color:#991b1b;font-weight:800}
.nb-ans{border-top:2px solid #fde68a;margin-top:6px;padding-top:4px;font-weight:800;font-size:.85rem}
.dark .nb-ans{border-color:#422006}
/* === END MONOLITH CSS === */
</style>
</head>
<body>
<header class="hdr">
<div class="hdr-row">
<div>
<h1>Физика 9 · Глава 2</h1>
<div class="hdr-sub">Законы Ньютона · масса · сила Гука · трение · гравитация · вес и невесомость</div>
</div>
<div class="hdr-side">
<a href="/textbook/physics-9" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> К физике 9</a>
<button id="search-btn" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4-4"/></svg> Поиск</button>
<button id="sidebar-btn" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="14" y2="18"/></svg> Шпаргалка</button>
<button id="theme-btn" class="hdr-btn"><svg class="ic" viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg><span id="theme-lab">Тёмная</span></button>
</div>
</div>
</header>
<main class="main">
<div class="col-main">
<section class="hero">
<h2>Динамика — почему тела движутся</h2>
<p>Динамика выясняет причины движения: силы и массы. Три закона Ньютона, закон всемирного тяготения, силы упругости и трения.</p>
<div class="hero-row">
<button class="btn-primary" onclick="goTo('p15')"><svg class="ic" viewBox="0 0 24 24"><polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/></svg> Начать § 15</button>
<div class="hero-progress">
<span class="hp-label">Прогресс по главе</span>
<div class="hp-bar"><div id="hero-hp-fill" class="hp-fill"></div></div>
<span id="hero-hp-text" class="hp-text">0%</span>
</div>
<div id="hero-xp-badge" class="hero-xp-badge"></div>
</div>
</section>
<section class="psel">
<div class="psel-title">Параграфы главы</div>
<div id="psel-grid" class="psel-grid"></div>
</section>
<section id="sec-p15" class="sec" data-watermark="ma=F"><div class="sec-header"><span class="sec-num">§ 15</span><h2 class="sec-h">Взаимодействие тел. Сила. ИСО. 1-й закон Ньютона</h2></div><div id="p15-body"></div></section>
<section id="sec-p16" class="sec" data-watermark="m"><div class="sec-header"><span class="sec-num">§ 16</span><h2 class="sec-h">Масса</h2></div><div id="p16-body"></div></section>
<section id="sec-p17" class="sec" data-watermark="F=ma"><div class="sec-header"><span class="sec-num">§ 17</span><h2 class="sec-h">Второй закон Ньютона</h2></div><div id="p17-body"></div></section>
<section id="sec-p18" class="sec" data-watermark="F_12=-F_21"><div class="sec-header"><span class="sec-num">§ 18</span><h2 class="sec-h">Третий закон Ньютона. Принцип относительности Галилея</h2></div><div id="p18-body"></div></section>
<section id="sec-p19" class="sec" data-watermark="kx"><div class="sec-header"><span class="sec-num">§ 19</span><h2 class="sec-h">Деформация тел. Сила упругости. Закон Гука</h2></div><div id="p19-body"></div></section>
<section id="sec-p20" class="sec" data-watermark="&mu;N"><div class="sec-header"><span class="sec-num">§ 20</span><h2 class="sec-h">Силы трения. Силы сопротивления среды</h2></div><div id="p20-body"></div></section>
<section id="sec-p21" class="sec" data-watermark="g"><div class="sec-header"><span class="sec-num">§ 21</span><h2 class="sec-h">Движение тела под действием силы тяжести</h2></div><div id="p21-body"></div></section>
<section id="sec-p22" class="sec" data-watermark="&part;"><div class="sec-header"><span class="sec-num">§ 22</span><h2 class="sec-h">Движение тела, брошенного под углом к горизонту</h2></div><div id="p22-body"></div></section>
<section id="sec-p23" class="sec" data-watermark="G"><div class="sec-header"><span class="sec-num">§ 23</span><h2 class="sec-h">Закон всемирного тяготения</h2></div><div id="p23-body"></div></section>
<section id="sec-p24" class="sec" data-watermark="P=mg"><div class="sec-header"><span class="sec-num">§ 24</span><h2 class="sec-h">Вес. Невесомость и перегрузки</h2></div><div id="p24-body"></div></section>
<section id="sec-final2" class="sec" data-watermark="&#9733;"><div class="sec-header"><span class="sec-num" style="background:linear-gradient(135deg,#059669,#34d399)">★</span><h2 class="sec-h">Финал главы</h2></div><div id="final2-body"></div></section>
</div>
<aside class="col-side" id="col-side"><div id="sidebar-content"></div></aside>
<div class="col-side-backdrop" id="col-side-backdrop"></div>
</main>
<footer class="foot">Интерактивный учебник «Физика 9» · Глава 2 · «Основы динамики» · LearnSpace</footer>
<div id="ach-popup" class="ach-popup"><svg class="ic" viewBox="0 0 24 24" style="width:22px;height:22px"><polygon points="12,2 22,20 2,20"/></svg><span id="ach-text">Достижение!</span></div>
<div id="search-modal" class="search-modal" role="dialog">
<div class="search-box">
<input type="text" id="search-input" class="search-input" placeholder="Поиск…" autocomplete="off">
<div id="search-results" class="search-results"></div>
<div class="search-foot"><span><kbd>↑↓</kbd> навигация</span><span><kbd>Enter</kbd> открыть</span><span><kbd>Esc</kbd> закрыть</span></div>
</div>
</div>
<script>
'use strict';
const STATE = { current:'p15', progress:{}, achievements:new Map(), xp:0, level:1 };
const TOTAL_PARAS = 11;
const _TB_SLUG = 'physics-9-ch2';
const PARAS = [
{ id:"p15", num:"§ 15", name:"Взаимодействие тел. Сила. ИСО. 1-й закон Ньютона", sub:"1-й закон Ньютона" },
{ id:"p16", num:"§ 16", name:"Масса", sub:"$m_1/m_2 = a_2/a_1$" },
{ id:"p17", num:"§ 17", name:"Второй закон Ньютона", sub:"$\\vec F = m\\vec a$" },
{ id:"p18", num:"§ 18", name:"Третий закон Ньютона. Принцип относительности Галилея", sub:"$\\vec F_{12} = -\\vec F_{21}$" },
{ id:"p19", num:"§ 19", name:"Деформация тел. Сила упругости. Закон Гука", sub:"$F = -kx$" },
{ id:"p20", num:"§ 20", name:"Силы трения. Силы сопротивления среды", sub:"$F_{тр} = \\mu N$" },
{ id:"p21", num:"§ 21", name:"Движение тела под действием силы тяжести", sub:"$h = gt^2/2$" },
{ id:"p22", num:"§ 22", name:"Движение тела, брошенного под углом к горизонту", sub:"$L = v_0^2\\sin 2\\alpha/g$" },
{ id:"p23", num:"§ 23", name:"Закон всемирного тяготения", sub:"$F = Gm_1m_2/r^2$" },
{ id:"p24", num:"§ 24", name:"Вес. Невесомость и перегрузки", sub:"$P = m(g \\pm a)$" },
{ id:"final2", num:'\u2605', name:'Финал главы', sub:"Итоги · боссы главы 2", final:true }
];
PARAS.forEach(p => { STATE.progress[p.id] = 0; });
function calcLevel(xp){ return Math.floor(Math.sqrt((xp||0)/100))+1; }
function _xpForLevel(lv){ return (lv-1)*(lv-1)*100; }
const ACH_LABELS = {
start:"Начало главы 2!",
p15_done:"Взаимодействие тел. Сила. ИСО. 1-й закон Ньютона освоен!",
p16_done:"Масса освоен!",
p17_done:"Второй закон Ньютона освоен!",
p18_done:"Третий закон Ньютона. Принцип относительности Галилея освоен!",
p19_done:"Деформация тел. Сила упругости. Закон Гука освоен!",
p20_done:"Силы трения. Силы сопротивления среды освоен!",
p21_done:"Движение тела под действием силы тяжести освоен!",
p22_done:"Движение тела, брошенного под углом к горизонту освоен!",
p23_done:"Закон всемирного тяготения освоен!",
p24_done:"Вес. Невесомость и перегрузки освоен!",
ch2_done:"Глава 2 пройдена!"
};
function loadProgress(){
try{
const s=localStorage.getItem('physics9_ch2_progress'); if(s) Object.assign(STATE.progress, JSON.parse(s));
const a=localStorage.getItem('physics9_ch2_achievements');
if(a){ const p=JSON.parse(a); if(Array.isArray(p)) p.forEach(id=>STATE.achievements.set(id, ACH_LABELS[id]||id)); else if(p&&typeof p==='object'){ for(const[id,t] of Object.entries(p)) STATE.achievements.set(id,(t&&t!==id)?t:(ACH_LABELS[id]||id)); } }
STATE.xp=+(localStorage.getItem('physics9_xp')||0); STATE.level=calcLevel(STATE.xp);
}catch(e){}
}
function saveProgress(){
try{
localStorage.setItem('physics9_ch2_progress', JSON.stringify(STATE.progress));
localStorage.setItem('physics9_ch2_achievements', JSON.stringify(Object.fromEntries(STATE.achievements)));
localStorage.setItem('physics9_xp', String(STATE.xp));
}catch(e){}
}
function bumpProgress(key, delta){
STATE.progress[key]=Math.max(0,Math.min(100,(STATE.progress[key]||0)+delta));
saveProgress(); refreshProgressUI();
if(STATE.progress[key]>=50) markParaRead(key);
}
const _markedRead=new Set();
let _pendingProgressBody=null, _progressTimer=null;
function _flushProgress(){
const body=_pendingProgressBody; _pendingProgressBody=null; if(!body) return;
const tok=(window.LS&&LS.getToken)?LS.getToken():''; if(!tok) return;
fetch('/api/textbooks/'+_TB_SLUG+'/progress',{method:'POST',headers:{'Content-Type':'application/json','Authorization':'Bearer '+tok},body:JSON.stringify(body),keepalive:true}).catch(()=>{});
}
function _queueProgress(patch){ _pendingProgressBody=Object.assign(_pendingProgressBody||{},patch); if(_progressTimer) clearTimeout(_progressTimer); _progressTimer=setTimeout(_flushProgress, 600); }
function markLastPara(id){ _queueProgress({last_para:id}); }
function markParaRead(id){ if(_markedRead.has(id)) return; _markedRead.add(id); _queueProgress({mark_read:id}); }
window.addEventListener('beforeunload', _flushProgress);
function loadServerReadState(){
const tok=(window.LS&&LS.getToken)?LS.getToken():''; if(!tok) return;
fetch('/api/textbooks/'+_TB_SLUG,{headers:{'Authorization':'Bearer '+tok}}).then(r=>r.ok?r.json():null).then(d=>{
if(!d||!d.progress) return;
(d.progress.read||[]).forEach(k=>{_markedRead.add(k); if((STATE.progress[k]||0)<50) STATE.progress[k]=100;});
saveProgress(); refreshProgressUI();
}).catch(()=>{});
}
function addXp(n,src){
if(!n) return;
const prev=STATE.level; STATE.xp=Math.max(0,(STATE.xp||0)+n); STATE.level=calcLevel(STATE.xp);
saveProgress(); refreshProgressUI();
if(window.LS&&window.LS.xp) window.LS.xp.add(n,'physics9-ch2-'+(src||'misc'));
if(STATE.level>prev){
const pop=document.getElementById('ach-popup');
if(pop){ document.getElementById('ach-text').textContent='Уровень '+STATE.level+'!'; pop.classList.add('show'); setTimeout(()=>pop.classList.remove('show'),2600); }
}
}
function refreshProgressUI(){
const total=Math.round(Object.values(STATE.progress).reduce((a,b)=>a+b,0)/TOTAL_PARAS);
const f=document.getElementById('hero-hp-fill'); if(f) f.style.width=total+'%';
const t=document.getElementById('hero-hp-text'); if(t) t.textContent=total+'% пройдено';
document.querySelectorAll('[data-prog-card]').forEach(el=>{ const k=el.dataset.progCard; const fl=el.querySelector('.psel-prog-fill'); if(fl) fl.style.width=(STATE.progress[k]||0)+'%'; });
const xpBadge=document.getElementById('hero-xp-badge');
if(xpBadge){ xpBadge.innerHTML='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:13px;height:13px"><polygon points="12 2 22 20 2 20"/></svg> Ур. '+STATE.level+' \xb7 '+(STATE.xp||0)+' XP'; }
if(STATE.current && document.getElementById('sidebar-content')){ try{ buildSidebar(STATE.current); }catch(e){} }
refreshDoneMarks();
}
function refreshDoneMarks(){
try{
document.querySelectorAll('.psel-card').forEach(c=>{
const id = c.dataset.id || c.dataset.progCard;
if(!id) return;
const pct = +STATE.progress[id] || 0;
if(!c.querySelector('.psel-done')){
const s = document.createElement('span');
s.className = 'psel-done';
s.setAttribute('title','Прочитано');
s.innerHTML = '<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>';
c.appendChild(s);
}
c.classList.toggle('done', pct >= 50);
});
}catch(e){}
}
function achievement(id,text){
if(STATE.achievements.has(id)) return;
STATE.achievements.set(id, text||ACH_LABELS[id]||id); saveProgress();
const pop=document.getElementById('ach-popup');
if(pop){ document.getElementById('ach-text').textContent=text||ACH_LABELS[id]||id; pop.classList.add('show'); setTimeout(()=>pop.classList.remove('show'),3300); }
addXp(20,'ach-'+id);
}
function buildParaSelector(){
const g=document.getElementById('psel-grid'); g.innerHTML='';
PARAS.forEach(p=>{
const card=document.createElement('div');
card.className='psel-card'+(p.final?' final':'');
card.dataset.id=p.id; card.dataset.progCard=p.id;
card.innerHTML='<div class="psel-num">'+p.num+'</div><div class="psel-name">'+p.name+'</div><div class="psel-prog"><div class="psel-prog-fill"></div></div>';
card.addEventListener('click', ()=>goTo(p.id));
g.appendChild(card);
});
}
const BUILT=new Set();
const BUILDERS = { p15:()=>build_p15(), p16:()=>build_p16(), p17:()=>build_p17(), p18:()=>build_p18(), p19:()=>build_p19(), p20:()=>build_p20(), p21:()=>build_p21(), p22:()=>build_p22(), p23:()=>build_p23(), p24:()=>build_p24(), final2:()=>build_final2() };
function ensureBuilt(id){ if(BUILT.has(id)) return; const fn=BUILDERS[id]; if(fn){ fn(); BUILT.add(id); } }
function goTo(id){
STATE.current=id; ensureBuilt(id);
document.querySelectorAll('.sec').forEach(s=>s.classList.remove('active'));
const el=document.getElementById('sec-'+id); if(el) el.classList.add('active');
document.querySelectorAll('.psel-card').forEach(c=>c.classList.toggle('active', c.dataset.id===id));
buildSidebar(id);
window.scrollTo({top:0,behavior:'smooth'});
if((STATE.progress[id]||0)<10) bumpProgress(id, 10);
if(window.renderMathInElement) setTimeout(()=>renderMath(el), 0);
// Auto-init legacy simulations: call upd<N>() / startAnim<N>() / draw<N>() if defined in phys9_legacy.js.
if(id.startsWith('p')){
const n = id.slice(1);
setTimeout(()=>{
['upd','startAnim','init','draw'].forEach(prefix=>{
const fn = window[prefix + n];
if(typeof fn === 'function'){ try{ fn(); }catch(e){ console.warn(prefix + n + ' init:', e.message); } }
});
}, 50);
} else if(id.startsWith('lr')){
const n = id.slice(2);
setTimeout(()=>{
['updLab','drawLab'].forEach(prefix=>{
const fn = window[prefix + n];
if(typeof fn === 'function'){ try{ fn(); }catch(e){} }
});
}, 50);
}
markLastPara(id);
}
const SIDEBARS = {
p15:{title:"Шпаргалка §15",rows:[["ИСО","системы, в которых выполняется 1-й закон"],["1-й Н.","$\\sum\\vec F = 0 \\Rightarrow \\vec v = \\text{const}$"],["Инерция","свойство сохранять скорость"]]},
p16:{title:"Шпаргалка §16",rows:[["Масса","мера инертности"],["$m_1/m_2 = a_2/a_1$",""],["Ед.","кг (эталон)"]]},
p17:{title:"Шпаргалка §17",rows:[["$\\vec a = \\vec F/m$",""],["$\\vec F = m\\vec a$",""],["Принцип суперп.","$\\vec F = \\sum\\vec F_i$"]]},
p18:{title:"Шпаргалка §18",rows:[["3-й Н.","$\\vec F_{12} = -\\vec F_{21}$"],["Разные тела","силы действуют на разные тела"],["Галилей","законы одинаковы во всех ИСО"]]},
p19:{title:"Шпаргалка §19",rows:[["Закон Гука","$F = -kx$"],["Жёсткость","$k$, ед. Н/м"],["Лин. упр.","при малых деформациях"]]},
p20:{title:"Шпаргалка §20",rows:[["Покоя","до начала движения"],["Скольж.","$F_{тр} = \\mu N$"],["$\\mu$","коэф. трения"]]},
p21:{title:"Шпаргалка §21",rows:[["$g \\approx 9{,}81$ м/с²",""],["$h = gt^2/2$","свободное падение"],["$v = gt$",""]]},
p22:{title:"Шпаргалка §22",rows:[["$L = v_0^2 \\sin 2\\alpha / g$","дальность"],["$H = v_0^2\\sin^2\\alpha/(2g)$","высота"],["$\\alpha = 45°$","макс. дальность"]]},
p23:{title:"Шпаргалка §23",rows:[["$F = G m_1 m_2 / r^2$",""],["$G = 6{,}67\\cdot 10^{-11}$ Н·м²/кг²",""],["$g = GM/R^2$","на поверх. Земли"]]},
p24:{title:"Шпаргалка §24",rows:[["Вес $P$","сила на опору/подвес"],["$P = m(g \\pm a)$",""],["$P = 0$","невесомость"]]},
final2:{title:"Финал главы 2",rows:[["§§15–24","теория главы 2"],["Награда","+50 XP"]]}
};
const TIPS=[
{sec:"p15",html:"ИСО — система, в которой выполняется 1-й закон Ньютона. В отсутствие сил тело сохраняет скорость (инерция)."},
{sec:"p16",html:"Масса — мера инертности. $m_1/m_2 = a_2/a_1$. Единица — килограмм, эталонная."},
{sec:"p17",html:"2-й закон Ньютона: $\\vec a = \\vec F/m$. Или $\\vec F = m\\vec a$. Принцип суперпозиции: $\\vec F = \\sum \\vec F_i$."},
{sec:"p18",html:"3-й закон Ньютона: $\\vec F_{12} = -\\vec F_{21}$. Силы приложены к разным телам! Принцип относ. Галилея: законы одинаковы во всех ИСО."},
{sec:"p19",html:"Закон Гука: $F_{упр} = -kx$, где $k$ — жёсткость пружины (Н/м). Линейность только при малых деформациях."},
{sec:"p20",html:"Сила трения скольжения: $F_{тр} = \\mu N$, где $\\mu$ — коэф. трения. Сила сопротивления среды растёт со скоростью."},
{sec:"p21",html:"Свободное падение: $g \\approx 9{,}81$ м/с² у поверхности Земли. $h = gt^2/2$, $v = gt$."},
{sec:"p22",html:"Тело, брошенное под углом: $L = v_0^2 \\sin 2\\alpha/g$ — дальность; $H = v_0^2\\sin^2\\alpha/(2g)$ — высота. Макс. $L$ при $\\alpha = 45°$."},
{sec:"p23",html:"Закон всемирного тяготения: $F = G m_1 m_2/r^2$. $G = 6{,}67\\cdot 10^{-11}$ Н·м²/кг². У поверхности: $g = GM/R^2$."},
{sec:"p24",html:"Вес $P$ — сила, с которой тело давит на опору / тянет подвес. $P = m(g \\pm a)$. При свободном падении $P = 0$ — невесомость."},
{sec:"final2",html:"Финал главы 2 — интегрированные задачи по §§15–24. В разработке (Phase 2+)."}
];
function buildSidebar(id){
const box=document.getElementById('sidebar-content');
const sb=SIDEBARS[id]||SIDEBARS[PARAS[0].id];
let html='';
const xpForLv=_xpForLevel(STATE.level), xpNext=_xpForLevel(STATE.level+1);
const xpInLv=STATE.xp-xpForLv, xpRange=xpNext-xpForLv;
const xpPct=xpRange>0?Math.round(xpInLv/xpRange*100):100;
html+='<div class="xp-card"><div class="xp-card-title"><span>XP-прогресс</span><span class="xp-level">Ур. '+STATE.level+'</span></div><div class="xp-bar"><div class="xp-fill" style="width:'+xpPct+'%"></div></div><div class="xp-nums"><span>'+STATE.xp+' XP</span><span>'+xpNext+' XP</span></div></div>';
html+='<div class="sidecard"><h4>'+sb.title+'</h4>';
sb.rows.forEach(([k,v])=>{ html+='<div class="sidecard-row"><b>'+k+'</b>'+(v?' \u2014 '+v:'')+'</div>'; });
html+='</div>';
const tip=TIPS.find(t=>t.sec===id)||TIPS[0];
if(tip){
html+='<div class="sidecard" style="background:linear-gradient(135deg,var(--warn-bg,#fef3c7),var(--pri-soft));border-color:var(--warn,#f59e0b)"><h4 style="color:#92400e;display:flex;align-items:center;gap:6px"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="width:14px;height:14px"><polygon points="12,2 22,20 2,20"/></svg>Подсказка</h4><div class="sidecard-row" style="margin-bottom:0;font-size:.84rem;line-height:1.55">'+tip.html+'</div></div>';
}
if(STATE.achievements.size>0){
html+='<div class="sidecard"><h4>Достижения <span style="color:var(--warn);float:right">'+STATE.achievements.size+'</span></h4>';
[...STATE.achievements.values()].slice(-4).forEach(text=>{ html+='<div class="sidecard-row" style="font-size:.78rem;color:var(--ok)">&#10003; '+text+'</div>'; });
html+='</div>';
}
box.innerHTML=html;
if(window.renderMathInElement) try{ renderMath(box); }catch(e){}
}
function initTheme(){
const t=localStorage.getItem('physics9_ch2_theme')||'light';
if(t==='dark') document.documentElement.classList.add('dark');
document.getElementById('theme-lab').textContent=t==='dark'?'Светлая':'Тёмная';
document.getElementById('theme-btn').addEventListener('click', ()=>{
document.documentElement.classList.toggle('dark');
const dark=document.documentElement.classList.contains('dark');
localStorage.setItem('physics9_ch2_theme', dark?'dark':'light');
document.getElementById('theme-lab').textContent=dark?'Светлая':'Тёмная';
});
}
function renderMath(root){ if(window.renderMathInElement){ try{ renderMathInElement(root, {delimiters:[{left:'$$',right:'$$',display:true},{left:'$',right:'$',display:false},{left:'\\[',right:'\\]',display:true},{left:'\\(',right:'\\)',display:false}],throwOnError:false}); }catch(e){} } }
const ICONS = {
theory:'<svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>',
example:'<svg class="ic" viewBox="0 0 24 24"><path d="M9 18h6"/><path d="M10 22h4"/><path d="M12 2a7 7 0 0 0-4 13c1 1 2 2 2 4h4c0-2 1-3 2-4a7 7 0 0 0-4-13z"/></svg>',
lab:'<svg class="ic" viewBox="0 0 24 24"><path d="M10 2v7.5L4.5 19a2 2 0 0 0 1.7 3h11.6a2 2 0 0 0 1.7-3L14 9.5V2"/><line x1="9" y1="2" x2="15" y2="2"/></svg>',
rule:'<svg class="ic" viewBox="0 0 24 24"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>',
};
function makeCard(kind, title, num, body){
const labels = {theory:'Теория',example:'Пример',lab:'Лабораторная работа',rule:'Правило'};
return '<div class="card"><div class="card-header"><div class="card-icon '+kind+'">'+ICONS[kind]+'</div><div class="card-title">'+(labels[kind]||'')+(title&&title!==labels[kind]?' \xb7 '+title:'')+'</div>'+(num?'<div class="card-num">'+num+'</div>':'')+'</div><div class="card-body">'+body+'</div></div>';
}
function secNav(prev, next){
const NAMES = {p15:'\xA715',p16:'\xA716',p17:'\xA717',p18:'\xA718',p19:'\xA719',p20:'\xA720',p21:'\xA721',p22:'\xA722',p23:'\xA723',p24:'\xA724',final2:'Финал'};
let h='<div class="sec-nav">';
h+=prev?'<button class="btn" onclick="goTo(\''+prev+'\')"><svg class="ic" viewBox="0 0 24 24"><polyline points="15 18 9 12 15 6"/></svg> '+NAMES[prev]+'</button>':'<span></span>';
h+=next?'<button class="btn primary" onclick="goTo(\''+next+'\')">'+NAMES[next]+' <svg class="ic" viewBox="0 0 24 24"><polyline points="9 18 15 12 9 6"/></svg></button>':'<span></span>';
h+='</div>'; return h;
}
function readButton(paraId){
const p = PARAS.find(x => x.id === paraId);
const labelTail = p && p.final ? 'финал' : (p ? p.num : '?');
return '<div style="margin-top:18px;display:flex;justify-content:center">'
+'<button class="btn primary" id="'+paraId+'-read-btn">'
+'<svg class="ic" viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>'
+' Я прочитал — '+labelTail+' (+10 XP)'
+'</button></div>';
}
function wireReadBtn(paraId){
const btn = document.getElementById(paraId+'-read-btn'); if(!btn) return;
btn.addEventListener('click', ()=>{
addXp(10, paraId+'-read'); bumpProgress(paraId, 30);
btn.textContent='Прочитано! +10 XP'; btn.disabled=true; btn.style.opacity=.6;
const aId = paraId+'_done';
if(ACH_LABELS[aId]) achievement(aId);
});
}
/* ===== STUB BUILDERS — наполнение в Phase 5 ===== */
function build_p15(){
const box = document.getElementById('p15-body');
let html = '';
html += makeCard('theory', "Взаимодействие тел. Сила. ИСО. 1-й закон Ньютона", "§15", `
<div class="para-hero ph-15">
<div class="ph-label">§15 · Физика 9 кл</div>
<h2>Первый закон Ньютона. Инерция</h2>
<div class="ph-formula">$\\vec{F}_\\text{рез} = \\vec{0} \\Leftrightarrow \\vec{a} = \\vec{0}$</div>
<div class="ph-desc">Если равнодействующая всех сил равна нулю, тело покоится или движется равномерно прямолинейно. Покой и равномерное прямолинейное движение физически равноправны.</div>
<div class="ph-tags">
<span class="ph-tag"> закон инерции</span>
<span class="ph-tag"> инерциальные СО</span>
<span class="ph-tag"> покой = равномерное движение</span>
</div>
</div>
<div class="section-title"> §15. Первый закон Ньютона</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Первый закон Ньютона</h3>
<div class="main-f">$\\vec{F}_\\text{рез} = \\vec{0} \\Rightarrow \\vec{a} = \\vec{0}$</div>
<p>Проще говоря: тело <b>само ничего не меняет</b>. Стоит — будет стоять. Летит — будет лететь. Чтобы скорость изменилась (по величине или по направлению), нужна суммарная сила. Нет суммарной силы — нет ускорения. Это работает только в инерциальных системах отсчёта (там, где нет «фиктивных» сил — в покоящемся вагоне, в равномерно летящем самолёте).</p>
</div>
<div class="fcard">
<h3>Инерция</h3>
<div class="main-f">свойство тела</div>
<p><b>Инерция</b> — это «нежелание» тела менять скорость. Тяжёлую тележку трудно разогнать — и столь же трудно остановить. Лёгкий мяч реагирует мгновенно. Разница — в инерции. Количественная мера инерции — <b>масса</b>: больше масса → больше инерция → нужна большая сила, чтобы изменить скорость.</p>
</div>
<div class="fcard">
<h3>Инерциальная система отсчёта</h3>
<div class="main-f">ИСО</div>
<p>ИСО — это система, в которой тело не ускоряется без причины. Земля приближённо ИСО. Равномерно летящий самолёт — ИСО: на борту кидаешь мяч вверх — он падает обратно в руки, как на земле. Но самолёт на вираже — уже нет: мяч «улетит» сам по себе без видимых сил. Любая ИСО движется относительно другой ИСО только <em>равномерно и прямолинейно</em>.</p>
</div>
<div class="fcard">
<h3>Равнодействующая = 0</h3>
<div class="main-f">$\\vec{F}_1 + \\vec{F}_2 + \\ldots = \\vec{0}$</div>
<p>Важно: не «сил нет», а «векторная сумма нулевая». На стол давит тяжесть книги вниз, стол давит на книгу вверх — две силы, но они в сумме ноль → книга стоит неподвижно. Машина едет равномерно? Тяга = трению → $F_\\text{рез} = 0$ → $a = 0$. Равновесие — это всегда баланс сил, а не их отсутствие.</p>
</div>
</div>
<!-- Инерция в жизни -->
<div class="section-title" style="margin-top:6px"> Инерция вокруг нас</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Автобус тормозит</div><div class="li-desc">Пассажир летит вперёд — тело стремится сохранить скорость</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Трюк со скатертью</div><div class="li-desc">Посуда остаётся на месте — она инертна, не успевает тронуться</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Забивание гвоздя</div><div class="li-desc">Тяжёлый молоток — большая инерция — большая сила удара</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Ремень безопасности</div><div class="li-desc">При ударе тело летит вперёд — ремень удерживает от инерции</div></div>
<div class="life-item"><div class="li-icon">🪐</div><div class="li-title">Планеты и спутники</div><div class="li-desc">Летят по орбите — сила тяжести меняет направление, но не гасит скорость</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Мяч в полёте</div><div class="li-desc">Без воздуха летел бы вечно — трение воздуха постепенно тормозит</div></div>
</div>
<!-- Анимация: инерция -->
<div class="idiag">
<h3> Анимация: шайба с трением и без</h3>
<div class="cv-wrap">
<canvas id="cv15" style="height:170px"></canvas>
</div>
<button class="cv-playbtn" onclick="startAnim15()"> Запустить снова</button>
<p style="font-size:.78rem;color:var(--muted);margin-top:6px"> Лёд (почти без трения): шайба не останавливается. Асфальт: трение гасит скорость.</p>
</div>
<div class="insight-box">
<div class="insight-title"> Почему ракеты летают в космосе без топлива?</div>
<p>Запустив ракету и выключив двигатель, она продолжает лететь <b>по инерции</b> — в космосе нет воздуха и почти нет сил. Первый закон Ньютона работает идеально.</p>
<p>Именно поэтому межпланетные зонды летят к Марсу или Юпитеру, включая двигатели лишь для корректировки курса.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>1-й закон: без силы — нет ускорения. Скорость не меняется <b>ни по модулю, ни по направлению</b>.</li>
<li>Покой и равномерное прямолинейное движение — физически <b>одно и то же</b> (оба: $a = 0$).</li>
<li>Инерция — не сила, а <b>свойство</b> тела. Мера инерции — масса.</li>
</ul>
</div>
<div class="student-box">
<div class="student-box-title"> Простыми словами</div>
<p>Тело само по себе <b>не хочет ничего менять</b>. Если оно стоит — хочет стоять. Если летит — хочет лететь. Чтобы что-то изменить, нужна сила.</p>
<p>Именно поэтому в магазине тяжёлую тележку трудно сдвинуть с места — у неё <b>большая инерция</b>. И трудно остановить разогнавшуюся.</p>
</div>
<ol class="q-list">
<li>Что такое инерция? Приведи 3 примера из жизни.</li>
<li>Чем отличается инерциальная система отсчёта от неинерциальной?</li>
<li>Могут ли на тело действовать силы и при этом оно двигалось равномерно прямолинейно?</li>
</ol>
`);
html += secNav(null, 'p16');
html += readButton('p15');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p15');
}
function build_p16(){
const box = document.getElementById('p16-body');
let html = '';
html += makeCard('theory', "Масса", "§16", `
<div class="para-hero ph-16">
<div class="ph-label">§16 · Физика 9 кл</div>
<h2>Масса тела. Плотность. Сила тяжести</h2>
<div class="ph-formula">$F_\\text{т} = mg$</div>
<div class="ph-desc">Масса — мера инертности тела и его гравитационных свойств. Она постоянна везде — и на Земле, и на Луне. Сила тяжести меняется, масса — нет.</div>
<div class="ph-tags">
<span class="ph-tag"> скалярная величина</span>
<span class="ph-tag"> [m] = кг</span>
<span class="ph-tag"> не зависит от g</span>
</div>
</div>
<div class="section-title"> §16. Масса тела</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Сила тяжести</h3>
<div class="main-f">$F_\\text{т} = mg$</div>
<p>Каждый килограмм массы даёт ~10 Н силы тяжести. Человек 60 кг: $F_\\text{т} = 60 \\cdot 10 = 600$ Н — именно с такой силой его тянет к Земле. Направлена всегда <b>строго вниз</b>, к центру Земли. Вес кажется разным на разных планетах, потому что $g$ меняется, а масса — нет.</p>
</div>
<div class="fcard">
<h3>Плотность → масса</h3>
<div class="main-f">$m = \\rho V$</div>
<p>$\\rho$ — плотность вещества (кг/м³).<br>$V$ — объём тела (м³).</p>
<p>Вода: $\\rho = 1000\\,\\text{кг/м}^3$; Воздух: $\\rho \\approx 1{,}29\\,\\text{кг/м}^3$</p>
</div>
<div class="fcard">
<h3>Аддитивность массы</h3>
<div class="main-f">$m = m_1 + m_2 + \\ldots$</div>
<p>Масса кузова + масса двигателя + масса пассажиров = масса автомобиля. Это очевидно, но важен вывод: масса <b>не меняется</b> от того, как расположены части тела и как они движутся. Сжатая пружина весит столько же, сколько разжатая. Разогнанная машина — столько же, что стоящая.</p>
</div>
<div class="fcard">
<h3>Масса и инерция</h3>
<div class="main-f">бо́льшая $m$ → бо́льшая инерция</div>
<p>Одинаковая сила — разный эффект. Пнул лёгкий мяч (0,5 кг) и тяжёлый камень (5 кг) с одинаковой силой: мяч улетит в 10 раз быстрее ($a = F/m$). Масса — это «количество инертности»: насколько трудно изменить состояние тела. Большая масса = нужна большая сила для того же ускорения.</p>
</div>
</div>
<div class="idiag">
<h3> Интерактив: масса → сила тяжести</h3>
<div class="slider-row">
<span class="slider-lbl">Масса $m$:</span>
<input type="range" min="1" max="80" value="60" id="sl16m" oninput="upd16()">
<span class="slider-val" id="v16m">60 кг</span>
</div>
<div class="slider-row">
<span class="slider-lbl">$g$ (планета):</span>
<input type="range" min="1" max="25" step="1" value="10" id="sl16g" oninput="upd16()">
<span class="slider-val" id="v16g">10 м/с²</span>
</div>
<div class="idiag-result" id="res16">$F_\\text{т} = 60 \\cdot 10 = 600\\,\\text{Н}$</div>
</div>
<!-- Планеты -->
<div class="idiag">
<h3>🪐 Вес человека (60 кг) на разных планетах</h3>
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px;margin-top:8px" id="planetGrid16">
</div>
<p style="font-size:.74rem;color:var(--muted);margin-top:8px">Масса всегда 60 кг — одинакова везде. Меняется только <b>сила тяжести</b>!</p>
</div>
<div class="insight-box">
<div class="insight-title"> Масса ≠ Вес</div>
<p>Ты весишь на Луне в 6 раз меньше — но твоя <b>масса не изменилась</b>. Там тебя так же трудно разогнать или остановить.</p>
<p>«Вес» в быту — это сила тяжести в ньютонах. В физике «масса» и «вес» — разные вещи. Масса в кг, вес (сила тяжести) в ньютонах.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li><b>Масса</b> (кг) — скалярная, не зависит от планеты и состояния движения.</li>
<li><b>Сила тяжести</b> (Н) — зависит от $g$: на Луне ($g \\approx 1{,}6\\,\\text{м/с}^2$) в 6 раз меньше.</li>
<li>$F_\\text{т} = mg$ — всегда направлена <b>вертикально вниз</b>.</li>
</ul>
</div>
<ol class="q-list">
<li>Чем отличается масса от силы тяжести?</li>
<li>Как изменится сила тяжести тела при полёте на Марс ($g \\approx 3{,}7\\,\\text{м/с}^2$)?</li>
<li>Масса тела 5 кг. Какова его сила тяжести на Луне ($g = 1{,}6\\,\\text{м/с}^2$)?</li>
</ol>
`);
html += secNav('p15', 'p17');
html += readButton('p16');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p16');
}
function build_p17(){
const box = document.getElementById('p17-body');
let html = '';
html += makeCard('theory', "Второй закон Ньютона", "§17", `
<div class="para-hero ph-17">
<div class="ph-label">§17 · Физика 9 кл</div>
<h2>Второй закон Ньютона</h2>
<div class="ph-formula">$\\vec{F}_\\text{рез} = m\\vec{a}$</div>
<div class="ph-desc">Ускорение тела прямо пропорционально равнодействующей сил и обратно пропорционально массе. Направление ускорения совпадает с направлением равнодействующей.</div>
<div class="ph-tags">
<span class="ph-tag"> [F] = Н = кг·м/с²</span>
<span class="ph-tag">↗ a ∥ F_рез</span>
<span class="ph-tag"> только в ИСО</span>
</div>
</div>
<div class="section-title"> §17. Второй закон Ньютона</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Второй закон Ньютона</h3>
<div class="main-f">$\\vec{F}_\\text{рез} = m\\vec{a}$</div>
<p>Хочешь разогнать тело — приложи силу. Чем больше сила → тем больше ускорение. Чем больше масса → тем меньше ускорение при той же силе. $a = F/m$: ускорение прямо пропорционально силе и обратно пропорционально массе. Ускорение направлено <b>туда же, куда и сила</b> — всегда.</p>
</div>
<div class="fcard">
<h3>Единица силы — 1 Ньютон</h3>
<div class="main-f">$1\\,\\text{Н} = 1\\,\\dfrac{\\text{кг}{\\cdot}\\text{м}}{\\text{с}^2}$</div>
<p>1 Н — это сила, которая разгоняет 1 кг на 1 м/с каждую секунду. Яблоко (~100 г) тянет к земле с силой ~1 Н. Ты поднимаешь гантель 1 кг → прикладываешь ~10 Н. Сила — <b>вектор</b>: у неё есть и модуль, и направление. Направление ускорения совпадает с направлением равнодействующей.</p>
</div>
<div class="fcard">
<h3>Несколько сил — равнодействующая</h3>
<div class="main-f">$m\\vec{a} = \\vec{F}_1 + \\vec{F}_2 + \\ldots$</div>
<p>На тело тянут вправо с силой 30 Н и влево с трением 10 Н. В закон Ньютона входит не «30» и не «10» по отдельности — только их <b>векторная сумма</b>: 30 − 10 = 20 Н вправо. Именно эта равнодействующая и вызывает ускорение: $a = 20/m$. Сначала сложи все силы — потом подставляй в формулу.</p>
</div>
<div class="fcard">
<h3>Горизонтальное движение</h3>
<div class="main-f">$ma = F_\\text{тяга} - F_\\text{тр}$</div>
<p>Самая частая ситуация в задачах. Двигатель толкает вперёд, трение тормозит — берём разницу: $F_\\text{рез} = F_\\text{тяга} - F_\\text{тр}$. Если $F_\\text{тяга} > F_\\text{тр}$ → разгон ($a > 0$). Если $F_\\text{тяга} = F_\\text{тр}$ → равномерно ($a = 0$, 1-й закон!). Если $F_\\text{тяга} < F_\\text{тр}$ → тормозит ($a < 0$). Все три случая — из одной формулы.</p>
</div>
</div>
<div class="idiag">
<h3> Интерактив: $a = F / m$</h3>
<div class="slider-row">
<span class="slider-lbl">Сила $F$:</span>
<input type="range" min="1" max="100" value="20" id="sl17f" oninput="upd17()">
<span class="slider-val" id="v17f">20 Н</span>
</div>
<div class="slider-row">
<span class="slider-lbl">Масса $m$:</span>
<input type="range" min="1" max="20" value="4" id="sl17m" oninput="upd17()">
<span class="slider-val" id="v17m">4 кг</span>
</div>
<div class="idiag-result" id="res17">$a = 20 / 4 = 5{,}0\\,\\text{м/с}^2$</div>
</div>
<!-- §17 canvas animation -->
<div class="idiag" style="margin-top:10px">
<h3> Анимация: разгон тела — скорость растёт!</h3>
<div class="cv-wrap">
<canvas id="cv17" style="height:120px"></canvas>
</div>
<button class="cv-playbtn" onclick="startAnim17()"> Запустить снова</button>
<p style="font-size:.78rem;color:var(--muted);margin-top:6px">Синяя стрелка = сила $F$, длина = ускорение $a = F/m$. Поменяй ползунки и нажми снова!</p>
</div>
<!-- §17 life examples -->
<div class="section-title" style="margin-top:14px"> Второй закон в жизни</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Скейтборд</div><div class="li-desc">Сильнее оттолкнулся → больше $F$ → больше ускорение $a$</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Ракета</div><div class="li-desc">Большая тяга + малая масса → огромное ускорение при старте</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Штанга</div><div class="li-desc">Тяжёлая штанга поднимается медленнее: $a = F/m$, большое $m$</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Авто</div><div class="li-desc">Мощный двигатель → большая $F$ → быстрый разгон</div></div>
</div>
<div class="insight-box">
<div class="insight-title"> Почему порожний грузовик разгоняется быстрее гружёного?</div>
<p>Двигатель создаёт одинаковую тягу $F$. Но с грузом масса $m$ больше → ускорение $a = F/m$ меньше.</p>
<p>Именно поэтому гоночные автомобили такие лёгкие — минимальная масса при максимальной мощности двигателя.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>В 2-м законе $F$ — это <b>равнодействующая</b>, а не одна из сил.</li>
<li>Если $F_\\text{рез} = 0$ — получаем 1-й закон: $a = 0$.</li>
<li>Ускорение всегда <b>параллельно</b> равнодействующей и направлено в ту же сторону.</li>
</ul>
</div>
<div class="example-box">
<h3>Пример задачи</h3>
<div class="cond">Тело массой $m = 5\\,\\text{кг}$ тянут силой $F_\\text{тяга} = 30\\,\\text{Н}$. Сила трения $F_\\text{тр} = 10\\,\\text{Н}$. Найдите ускорение.</div>
<div class="sol">
<ol class="sol-steps">
<li><span class="step-n">1</span>Равнодействующая: $F_\\text{рез} = F_\\text{тяга} - F_\\text{тр} = 30 - 10 = 20\\,\\text{Н}$</li>
<li><span class="step-n">2</span>2-й закон: $a = F_\\text{рез}/m = 20/5 = 4\\,\\text{м/с}^2$</li>
</ol>
</div>
</div>
<ol class="q-list">
<li>Как изменится ускорение тела, если силу увеличить в 3 раза, а массу уменьшить в 2 раза?</li>
<li>Можно ли применять второй закон Ньютона в неинерциальных системах отсчёта?</li>
</ol>
`);
html += secNav('p16', 'p18');
html += readButton('p17');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p17');
}
function build_p18(){
const box = document.getElementById('p18-body');
let html = '';
html += makeCard('theory', "Третий закон Ньютона. Принцип относительности Галилея", "§18", `
<div class="para-hero ph-18">
<div class="ph-label">§18 · Физика 9 кл</div>
<h2>Третий закон Ньютона. Принцип Галилея</h2>
<div class="ph-formula">$\\vec{F}_{1\\to2} = -\\vec{F}_{2\\to1}$</div>
<div class="ph-desc">Силы взаимодействия двух тел равны по модулю, противоположны по направлению и приложены к РАЗНЫМ телам. Они не компенсируют друг друга!</div>
<div class="ph-tags">
<span class="ph-tag"> на разных телах</span>
<span class="ph-tag">↔ одна природа</span>
<span class="ph-tag"> принцип Галилея</span>
</div>
</div>
<div class="section-title"> §18. Третий закон Ньютона</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Третий закон Ньютона</h3>
<div class="main-f">$\\vec{F}_{1\\to2} = -\\vec{F}_{2\\to1}$</div>
<p>Любое взаимодействие — двустороннее. Ты толкаешь стену — стена толкает тебя с той же силой. Магнит притягивает гвоздь — гвоздь притягивает магнит с равной силой. Земля тянет тебя вниз — ты тянешь Землю вверх. Разница в том, что Земля на это не реагирует — у неё масса в $10^{22}$ раз больше твоей, ускорение исчезающе мало.</p>
</div>
<div class="fcard">
<h3>Свойства пары сил</h3>
<div class="main-f">всегда парные</div>
<ul>
<li>Равны по <b>модулю</b></li>
<li>Противоположны по <b>направлению</b></li>
<li><b>Одинаковой природы</b></li>
<li>Приложены к <b>разным</b> телам</li>
<li>Действуют одновременно</li>
</ul>
</div>
<div class="fcard">
<h3>Принцип относительности Галилея</h3>
<div class="main-f">ИСО ↔ ИСО</div>
<p>В ровно летящем самолёте можно спокойно поиграть в мяч — всё идёт как на земле. Ни один эксперимент внутри ровно движущегося корабля не покажет, движешься ты или стоишь. Это и есть принцип Галилея: <b>физика не различает покой и равномерное прямолинейное движение</b>. Законы одинаковы в любой ИСО.</p>
</div>
<div class="fcard">
<h3>Почему лошадь тянет телегу?</h3>
<div class="main-f">разные тела!</div>
<p>Лошадь тянет телегу с силой $F$, телега тянет лошадь с силой $-F$. Но обе силы на <b>разных телах</b>. Телега едет, потому что $F_\\text{тяга} > F_\\text{тр.телеги}$.</p>
</div>
</div>
<div class="idiag">
<h3> Действие и противодействие — визуализация</h3>
<svg width="100%" viewBox="0 0 320 105" style="display:block;margin:0 auto">
<rect x="20" y="32" width="85" height="40" rx="8" fill="#a5f3fc" stroke="#0891b2" stroke-width="2"/>
<text x="62" y="56" font-size="11" text-anchor="middle" fill="#0e7490" font-weight="700">Тело 1</text>
<rect x="215" y="32" width="85" height="40" rx="8" fill="#a5f3fc" stroke="#0891b2" stroke-width="2"/>
<text x="257" y="56" font-size="11" text-anchor="middle" fill="#0e7490" font-weight="700">Тело 2</text>
<line x1="105" y1="44" x2="213" y2="44" stroke="#ef4444" stroke-width="2.5"/>
<polygon points="213,44 201,39 201,49" fill="#ef4444"/>
<text x="159" y="40" font-size="9" text-anchor="middle" fill="#ef4444" font-weight="700">F₁→₂</text>
<line x1="215" y1="60" x2="107" y2="60" stroke="#10b981" stroke-width="2.5"/>
<polygon points="107,60 119,55 119,65" fill="#10b981"/>
<text x="161" y="75" font-size="9" text-anchor="middle" fill="#10b981" font-weight="700">F₂→₁</text>
<text x="160" y="96" font-size="8" text-anchor="middle" fill="#64748b" font-family="Inter">|F₁→₂| = |F₂→₁|, но приложены к разным телам!</text>
</svg>
</div>
<!-- §18 life examples -->
<div class="section-title" style="margin-top:14px"> Третий закон вокруг нас</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Ракета</div><div class="li-desc">Газы летят назад → ракета летит вперёд — среда не нужна!</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Выстрел пушки</div><div class="li-desc">Снаряд вперёд → отдача толкает пушку назад с той же силой</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Вёсла</div><div class="li-desc">Толкаешь воду назад → вода толкает лодку вперёд</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Конькобежец</div><div class="li-desc">Отталкивается от льда → лёд давит назад с равной силой</div></div>
</div>
<!-- §18 canvas animation -->
<div class="idiag">
<h3> Анимация: отдача — два тела разлетаются</h3>
<div class="cv-wrap">
<canvas id="cv18" style="height:120px"></canvas>
</div>
<button class="cv-playbtn" onclick="startAnim18()"> Запустить снова</button>
<p style="font-size:.78rem;color:var(--muted);margin-top:6px"> Лёгкое тело летит быстрее. Тяжёлое — медленнее. Силы равны, скорости — нет!</p>
</div>
<div class="insight-box">
<div class="insight-title"> Почему ракета летит в вакууме?</div>
<p>Многие думают: «В вакууме ракета не может лететь — не от чего оттолкнуться». Это <b>неверно!</b></p>
<p>Ракета отталкивается <b>от собственных газов</b>: газы назад — ракета вперёд. Третий закон работает без среды.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>Силы 3-го закона <b>не компенсируют</b> друг друга — они приложены к <b>разным</b> телам.</li>
<li>Пара сил 3-го закона всегда одинаковой природы (обе гравитационные, или обе упругие).</li>
<li>Принцип Галилея: физика одинакова в любой инерциальной СО.</li>
</ul>
</div>
<ol class="q-list">
<li>Почему пара сил третьего закона не уравновешивает тело?</li>
<li>Лошадь тянет телегу с силой 500 Н. С какой силой телега действует на лошадь?</li>
<li>В чём смысл принципа относительности Галилея?</li>
</ol>
`);
html += secNav('p17', 'p19');
html += readButton('p18');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p18');
}
function build_p19(){
const box = document.getElementById('p19-body');
let html = '';
html += makeCard('theory', "Деформация тел. Сила упругости. Закон Гука", "§19", `
<div class="para-hero ph-19">
<div class="ph-label">§19 · Физика 9 кл</div>
<h2>Деформация. Закон Гука</h2>
<div class="ph-formula">$F_\\text{упр} = k|\\Delta l|$</div>
<div class="ph-desc">Сила упругости пропорциональна деформации. Жёсткость k показывает, насколько сильно тело сопротивляется деформации. Природа сил упругости — электромагнитная.</div>
<div class="ph-tags">
<span class="ph-tag"> упругая деформация</span>
<span class="ph-tag"> электромагнитная природа</span>
<span class="ph-tag"> [k] = Н/м</span>
</div>
</div>
<div class="section-title"> §19. Закон Гука</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Закон Гука</h3>
<div class="main-f">$F_\\text{упр} = k|\\Delta l|$</div>
<p>Растянешь пружину на 1 см — сила 2 Н. На 2 см — сила 4 Н. На 10 см — 20 Н. Сила <b>пропорциональна деформации</b>: коэффициент пропорциональности $k$ — жёсткость. Чем жёстче пружина (большее $k$), тем больше сила при той же деформации. Направлена всегда <b>обратно растяжению</b> — пружина «хочет» вернуться.</p>
</div>
<div class="fcard">
<h3>Знаковая форма</h3>
<div class="main-f">$F_{\\text{упр},x} = -kx$</div>
<p>Пружина растянута вправо ($x > 0$) — сила тянет влево ($F_x < 0$). Пружина сжата влево ($x < 0$) — сила толкает вправо ($F_x > 0$). Минус в формуле — не просто знак, а физический смысл: <b>сила всегда против деформации</b>, всегда «возвращает» тело к исходному положению.</p>
</div>
<div class="fcard">
<h3>Жёсткость</h3>
<div class="main-f">$k = \\dfrac{F}{\\Delta l}$</div>
<p>Единица Н/м: сколько ньютонов нужно на метр деформации. Пружина с $k = 500$ Н/м: растяни на 1 см = 0,01 м → сила 5 Н. Пружинные весы: измеряют деформацию, пересчитывают в килограммы именно через $k$. Жёсткость матраса, автомобильной подвески, прыжкового батута — всё описывается одной формулой Гука.</p>
</div>
<div class="fcard">
<h3>Виды деформаций</h3>
<div class="main-f">упругая / пластическая</div>
<p><b>Упругая</b>: убери силу — тело вернулось. Закон Гука работает. Примеры: сжатая пружина, натянутая резинка. <b>Пластическая</b>: убери силу — тело осталось деформированным. Перегнул проволоку — она уже не выпрямится. <b>Предел упругости</b>: слишком сильное растяжение — пружина не возвращается. Для каждого материала он свой.</p>
</div>
</div>
<div class="idiag">
<h3> Интерактив: $F_\\text{упр} = k \\cdot \\Delta l$</h3>
<div class="slider-row">
<span class="slider-lbl">Жёсткость $k$:</span>
<input type="range" min="50" max="1000" step="50" value="200" id="sl19k" oninput="upd19()">
<span class="slider-val" id="v19k">200 Н/м</span>
</div>
<div class="slider-row">
<span class="slider-lbl">Деформация $\\Delta l$:</span>
<input type="range" min="1" max="50" value="10" id="sl19x" oninput="upd19()">
<span class="slider-val" id="v19x">10 см</span>
</div>
<div class="idiag-result" id="res19">$F_\\text{упр} = 200 \\cdot 0{,}10 = 20{,}0\\,\\text{Н}$</div>
</div>
<!-- §19 spring canvas -->
<div class="idiag" style="margin-top:10px">
<h3> Пружина: визуализация деформации</h3>
<div class="cv-wrap">
<canvas id="cv19" style="height:160px"></canvas>
</div>
<p style="font-size:.78rem;color:var(--muted);margin-top:6px">Двигай ползунки выше — пружина меняет растяжение. Красная стрелка = сила упругости $F_\\text{упр}$.</p>
</div>
<!-- §19 life examples -->
<div class="section-title" style="margin-top:14px"> Закон Гука в жизни</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Подвеска авто</div><div class="li-desc">Пружинная подвеска сжимается на ямах → $F=k\\Delta l$ гасит удар</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Пружинные весы</div><div class="li-desc">Деформация пружины пропорциональна массе груза</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Матрас</div><div class="li-desc">Пружины деформируются равномерно — каждая по закону Гука</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Лук и стрела</div><div class="li-desc">Натягиваем тетиву → копим упругую энергию → стрела летит</div></div>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>Закон Гука: $F = k|\\Delta l|$ — работает только при <b>упругой</b> деформации (не слишком большой).</li>
<li>Сила упругости <b>противоположна</b> деформации (знак минус в $F_x = -kx$).</li>
<li>Природа силы упругости — <b>электромагнитная</b> (взаимодействие атомов тела).</li>
</ul>
</div>
<div class="student-box">
<div class="student-box-title"> Как это понять?</div>
<p>Повесь гирю на пружину — пружина растянется до равновесия: сила тяжести вниз = сила упругости вверх. Чем тяжелее гиря — тем больше растяжение. <b>Именно так работают пружинные весы</b>: шкала откалибрована по закону Гука, каждый лишний килограмм даёт одинаковое дополнительное растяжение.</p>
<p>Предел упругости важен в инженерии: строительные балки, мосты, пружины механизмов — всё рассчитывается так, чтобы деформация оставалась упругой. Нарушишь предел — конструкция не вернётся в исходное состояние, жди аварии.</p>
</div>
<div class="example-box">
<h3>Пример задачи</h3>
<div class="cond">На пружину жёсткостью $k = 500\\,\\text{Н/м}$ подвесили груз массой $m = 2\\,\\text{кг}$, $g = 10\\,\\text{м/с}^2$. Найдите деформацию пружины.</div>
<div class="sol">
<ol class="sol-steps">
<li><span class="step-n">1</span>Сила тяжести груза: $F_\\text{т} = mg = 2 \\cdot 10 = 20\\,\\text{Н}$</li>
<li><span class="step-n">2</span>При равновесии: $F_\\text{упр} = F_\\text{т} = 20\\,\\text{Н}$</li>
<li><span class="step-n">3</span>Деформация: $\\Delta l = F/k = 20/500 = 0{,}04\\,\\text{м} = 4\\,\\text{см}$</li>
</ol>
</div>
</div>
`);
html += secNav('p18', 'p20');
html += readButton('p19');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p19');
}
function build_p20(){
const box = document.getElementById('p20-body');
let html = '';
html += makeCard('theory', "Силы трения. Силы сопротивления среды", "§20", `
<div class="para-hero ph-20">
<div class="ph-label">§20 · Физика 9 кл</div>
<h2>Силы трения</h2>
<div class="ph-formula">$F_\\text{тр} = \\mu N$</div>
<div class="ph-desc">Трение скольжения пропорционально силе нормального давления. Коэффициент трения μ зависит от материала и состояния поверхностей, но не от площади контакта.</div>
<div class="ph-tags">
<span class="ph-tag">↔ против скорости</span>
<span class="ph-tag"> μ — безразмерный</span>
<span class="ph-tag"> качение &lt; скольжение</span>
</div>
</div>
<div class="section-title"> §20. Силы трения</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Трение скольжения</h3>
<div class="main-f">$F_\\text{тр} = \\mu N$</div>
<p>$\\mu$ — безразмерный коэффициент: чем глаже поверхности, тем меньше. Лёд–металл: $\\mu \\approx 0{,}03$. Резина–асфальт: $\\mu \\approx 0{,}7$. $N$ — с какой силой тело давит на поверхность (на горизонтали $N = mg$). Сила трения всегда направлена <b>против скорости</b> скольжения — никогда не разгоняет, только тормозит.</p>
</div>
<div class="fcard">
<h3>Трение покоя</h3>
<div class="main-f">$F_\\text{тр.пок} \\leq \\mu_\\text{пок} N$</div>
<p>Книга лежит на столе — ты слегка толкаешь, она не двигается. Трение покоя точно «отвечает» на твой толчок, уравновешивая его. Усиливаешь толчок — трение покоя растёт вместе с ним. Но есть предел: $F_\\text{тр.пок}^{max} = \\mu_\\text{пок} N$. Преодолел этот предел — книга тронулась, и дальше работает уже трение скольжения.</p>
</div>
<div class="fcard">
<h3>Горизонтальная поверхность</h3>
<div class="main-f">$N = mg;\\quad F_\\text{тр} = \\mu mg$</div>
<p>На горизонтальной поверхности вся тяжесть тела давит на неё перпендикулярно → $N = mg$ → $F_\\text{тр} = \\mu mg$. Сурприз: большой кубик и маленький кубик из того же материала и с той же массой имеют <b>одинаковое трение</b> — площадь не важна! Важны только материалы ($\\mu$) и вес ($N$).</p>
</div>
<div class="fcard">
<h3>Трение качения и сопротивление среды</h3>
<div class="main-f">$F_\\text{кач} \\ll F_\\text{скольж}$</div>
<p>Колесо катится — в точке контакта нет скольжения, трение мало. Именно поэтому колесо изобрели: перевезти груз на колёсах в 10–100 раз легче, чем волоком. Шарикоподшипник — то же самое: шарики катятся, не скользят → потери минимальны. В жидкости или воздухе сопротивление растёт со скоростью в квадрате: вдвое быстрее — в четыре раза больше тормозит.</p>
</div>
</div>
<div class="idiag">
<h3> Интерактив: $F_\\text{тр} = \\mu \\cdot N$</h3>
<div class="slider-row">
<span class="slider-lbl">Коэфф. трения $\\mu$:</span>
<input type="range" min="1" max="80" value="30" id="sl20mu" oninput="upd20()">
<span class="slider-val" id="v20mu">0.30</span>
</div>
<div class="slider-row">
<span class="slider-lbl">Масса $m$ (→ $N\\!=\\!mg$):</span>
<input type="range" min="1" max="50" value="10" id="sl20m" oninput="upd20()">
<span class="slider-val" id="v20m">10 кг</span>
</div>
<div class="idiag-result" id="res20">$F_\\text{тр} = 0{,}30 \\cdot 100 = 30{,}0\\,\\text{Н}$</div>
</div>
<!-- §20 friction canvas -->
<div class="idiag" style="margin-top:10px">
<h3> Диаграмма сил трения</h3>
<div class="cv-wrap">
<canvas id="cv20" style="height:150px"></canvas>
</div>
<p style="font-size:.78rem;color:var(--muted);margin-top:6px">Двигай ползунки — стрелки меняют масштаб. $N\\!=\\!mg$ (вертикаль), $F_\\text{тр}\\!=\\!\\mu N$ (горизонталь).</p>
</div>
<!-- §20 mu table -->
<div class="idiag" style="margin-top:12px">
<h3> Типичные значения коэффициента трения $\\mu$</h3>
<table class="mu-tbl">
<tr><th>Материалы</th><th>μ (скольжение)</th><th>μ (покой)</th></tr>
<tr><td>Лёд — металл</td><td>0.03</td><td>0.05</td></tr>
<tr><td>Дерево — дерево</td><td>0.30</td><td>0.45</td></tr>
<tr><td>Резина — асфальт</td><td>0.70</td><td>0.80</td></tr>
<tr><td>Сталь — сталь (смазка)</td><td>0.10</td><td>0.12</td></tr>
<tr><td>Кожа — асфальт</td><td>0.50</td><td>0.65</td></tr>
</table>
</div>
<!-- §20 life examples -->
<div class="section-title" style="margin-top:14px"> Трение в жизни</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Кроссовки</div><div class="li-desc">Рифлёная подошва → большой $\\mu$ → не скользишь при ходьбе</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Тормоза</div><div class="li-desc">$F_\\text{торм}=\\mu mg$ — чем больше $\\mu$, тем короче тормозной путь</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Лыжи</div><div class="li-desc">Смазка снижает $\\mu$ снега → скорость выше</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Болт и гайка</div><div class="li-desc">Трение покоя в резьбе удерживает соединение от раскручивания</div></div>
</div>
<div class="student-box">
<div class="student-box-title"> Как это понять?</div>
<p>Трение покоя — «умное»: оно подстраивается под приложенную силу. Толкаешь ящик с силой 10 Н — трение покоя ровно 10 Н. Усиливаешь до 30 Н — трение тоже 30 Н. Но как только преодолеешь максимум ($\\mu_\\text{пок} N$) — ящик трогается, и дальше тебя сопротивляет уже трение скольжения, которое обычно <em>меньше</em>. Именно поэтому сдвинуть тяжёлый предмет труднее, чем поддерживать его движение.</p>
<p>Трение — двуликое: мешает движению (гасит скорость, тратит энергию), но и <b>помогает</b>: без него ты не смог бы ходить, автомобиль — тормозить, болты — держаться в резьбе. Мир без трения — это ад на льду.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>$F_\\text{тр} = \\mu N$ — трение скольжения; направлено <b>против скорости</b>.</li>
<li>Трение покоя <b>изменяется</b> от 0 до максимума $\\mu_\\text{пок} N$.</li>
<li>Трение <b>не зависит</b> от площади контакта — только от материалов и нормальной силы.</li>
</ul>
</div>
<ol class="q-list">
<li>Почему трение покоя может быть меньше трения скольжения?</li>
<li>Брусок скользит по горизонтальной поверхности. Как направлена сила трения?</li>
<li>Почему в подшипниках используют шарики, а не скользящие втулки?</li>
</ol>
`);
html += secNav('p19', 'p21');
html += readButton('p20');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p20');
}
function build_p21(){
const box = document.getElementById('p21-body');
let html = '';
html += makeCard('theory', "Движение тела под действием силы тяжести", "§21", `
<div class="para-hero ph-21">
<div class="ph-label">§21 · Физика 9 кл</div>
<h2>Движение тела под действием силы тяжести</h2>
<div class="ph-formula">$t_\\text{пад} = \\sqrt{2h/g};\\quad v_\\text{пад} = \\sqrt{2gh}$</div>
<div class="ph-desc">Свободное падение, горизонтальный бросок, вертикальный бросок — всё это движение под действием только силы тяжести. Траектория горизонтального броска — парабола.</div>
<div class="ph-tags">
<span class="ph-tag">⬇ g = 10 м/с²</span>
<span class="ph-tag"> траектория — парабола</span>
<span class="ph-tag">⏱ время не зависит от v₀</span>
</div>
</div>
<div class="section-title"> §21. Движение под действием силы тяжести</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Свободное падение (вниз)</h3>
<div class="main-f">$v_y = gt;\\quad y = \\dfrac{gt^2}{2}$</div>
<p>Уронил камень с высоты 20 м: $t = \\sqrt{2 \\cdot 20 / 10} = 2$ с. Скорость при ударе: $v = 10 \\cdot 2 = 20$ м/с = 72 км/ч. Жёстко! Бросил вверх с той же высоты: время падения то же — только подождёшь дольше. Ускорение $g$ одинаково для пера и молотка (в вакууме). Это доказал Галилей.</p>
</div>
<div class="fcard">
<h3>Горизонтальный бросок</h3>
<div class="main-f">$x = v_0 t;\\quad y = \\dfrac{gt^2}{2}$</div>
<p>Два движения одновременно: по горизонтали — <b>равномерно</b> со скоростью $v_0$, по вертикали — <b>свободное падение</b> без начальной скорости. Они не мешают друг другу! Дальность: чем быстрее бросаешь и чем выше стол, тем дальше улетит. Стрела, вылетевшая горизонтально с коня, и монета, упавшая с той же высоты, ударятся о землю одновременно.</p>
</div>
<div class="fcard">
<h3>Бросок вертикально вверх</h3>
<div class="main-f">$v_y = v_0 - gt;\\quad y = v_0 t - \\dfrac{gt^2}{2}$</div>
<p>Бросил вверх со скоростью 20 м/с: поднимается $t_\\text{п} = 20/10 = 2$ с, максимальная высота $H = 20^2/(2 \\cdot 10) = 20$ м. Потом падает ещё 2 с — <b>полёт симметричен</b>: подъём = спуск. Скорость при возвращении равна начальной (в вакууме). В верхней точке $v = 0$, но $a = g \\ne 0$ — тело не зависает, оно всё время ускоряется вниз.</p>
</div>
<div class="fcard">
<h3>Ускорение свободного падения</h3>
<div class="main-f">$g \\approx 10\\,\\text{м/с}^2$</div>
<p>Не зависит от массы, размера или материала — это экспериментальный факт. Перо и молоток падают с одинаковым ускорением в вакууме. На Луне Армстронг это демонстрировал: перо и молоток упали одновременно! Используем $g = 10\\,\\text{м/с}^2$ для простоты (точнее: 9,8 м/с², разница ~2%).</p>
</div>
</div>
<div class="idiag">
<h3> Интерактив: свободное падение</h3>
<div class="slider-row">
<span class="slider-lbl">Высота $h$:</span>
<input type="range" min="1" max="125" value="20" id="sl21h" oninput="upd21()">
<span class="slider-val" id="v21h">20 м</span>
</div>
<div class="idiag-result" id="res21">$t = \\sqrt{2{\\cdot}20/10} = 2{,}0\\,\\text{с};\\quad v = \\sqrt{2{\\cdot}10{\\cdot}20} = 20{,}0\\,\\text{м/с}$</div>
</div>
<!-- §21 life examples -->
<div class="section-title" style="margin-top:14px"> Парабола вокруг нас</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Пас в футболе</div><div class="li-desc">Мяч летит по параболе: горизонталь — равномерно, вертикаль — ускорение $g$</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Фонтан</div><div class="li-desc">Струя воды — парабола. Дальность зависит от скорости и угла броска</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Баскетбол</div><div class="li-desc">Точный бросок — правильно рассчитанная парабола траектории</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Вулкан</div><div class="li-desc">Выброшенные камни летят по параболе — можно предсказать зону падения</div></div>
</div>
<!-- §21 parabola canvas — THE BIG ANIMATION -->
<div class="idiag">
<h3> Горизонтальный бросок vs. свободное падение — упадут <em>одновременно!</em></h3>
<div class="cv-wrap">
<canvas id="cv21" style="height:220px"></canvas>
</div>
<button class="cv-playbtn" onclick="startAnim21()"> Запустить анимацию</button>
<p style="font-size:.78rem;color:var(--muted);margin-top:6px"> Бросок горизонтально. Падает вертикально. По вертикали оба движутся <b>одинаково</b> — упадут в одно время!</p>
</div>
<div class="insight-box">
<div class="insight-title"> Галилей vs. интуиция</div>
<p>Интуиция подсказывает: брошенное горизонтально тело падает <b>дольше</b>, ведь оно летит дальше.</p>
<p><b>На самом деле:</b> горизонтальная скорость не влияет на вертикальное падение. Оба тела — брошенное и просто упавшее с той же высоты — ударятся об землю одновременно. Именно это доказал Галилей, сбрасывая тела с Пизанской башни.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>Время падения $t = \\sqrt{2h/g}$ — <b>не зависит</b> от начальной горизонтальной скорости!</li>
<li>При горизонтальном броске: по горизонтали — <b>равномерно</b> ($v_x = v_0$), по вертикали — <b>равноускоренно</b> без начальной скорости.</li>
<li>Свободное падение — движение <b>только под действием силы тяжести</b>.</li>
</ul>
</div>
<div class="student-box">
<div class="student-box-title"> Простыми словами</div>
<p>Если одновременно бросить один мяч горизонтально и уронить другой с той же высоты — они ударятся об пол <b>одновременно</b>. Горизонтальная скорость не влияет на вертикальное падение.</p>
<p>Это потому что горизонтальное и вертикальное движения <b>независимы</b>. Сила тяжести ускоряет только вертикальную составляющую скорости.</p>
</div>
<ol class="q-list">
<li>Что такое свободное падение? При каких условиях падение можно считать свободным?</li>
<li>Почему ускорения всех свободно падающих тел одинаковы?</li>
<li>Что такое горизонтальная дальность полёта? Как её вычислить?</li>
</ol>
`);
html += secNav('p20', 'p22');
html += readButton('p21');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p21');
}
function build_p22(){
const box = document.getElementById('p22-body');
let html = '';
html += makeCard('theory', "Движение тела, брошенного под углом к горизонту", "§22", `
<div class="para-hero ph-22">
<div class="ph-label">§22 · Физика 9 кл</div>
<h2>Бросок тела под углом к горизонту</h2>
<div class="ph-formula">$v_x = v_0\\cos\\alpha;\\quad v_y = v_0\\sin\\alpha - gt$</div>
<div class="ph-desc">Любой бросок — это два независимых движения: равномерное горизонтальное и равноускоренное вертикальное. Меняя угол броска, можно управлять дальностью и высотой.</div>
<div class="ph-tags">
<span class="ph-tag"> L = v₀²sin2α/g</span>
<span class="ph-tag">⬆ H = v₀²sin²α/2g</span>
<span class="ph-tag"> max L при α=45°</span>
</div>
</div>
<div class="section-title"> §22. Бросок тела под углом к горизонту</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Составляющие скорости</h3>
<div class="main-f">$v_x = v_0\\cos\\alpha;\\quad v_y = v_0\\sin\\alpha - gt$</div>
<p>При броске под углом $\\alpha$ начальная скорость делится на две: $v_x = v_0\\cos\\alpha$ — горизонтальная (постоянна весь полёт, сила тяжести не влияет), $v_y = v_0\\sin\\alpha$ — вертикальная (убывает из-за $g$, в верхней точке = 0). Например, бросок со скоростью 20 м/с под 30°: $v_x = 17{,}3$ м/с, $v_{y0} = 10$ м/с.</p>
</div>
<div class="fcard">
<h3>Дальность и высота</h3>
<div class="main-f">$L = \\dfrac{v_0^2 \\sin 2\\alpha}{g};\\quad H = \\dfrac{v_0^2 \\sin^2\\!\\alpha}{2g}$</div>
<p>Дальность $L = v_0^2\\sin 2\\alpha / g$: зависит от $\\sin 2\\alpha$, который максимален при $2\\alpha = 90°$, то есть при $\\alpha = 45°$ — золотой угол для максимальной дальности. При $\\alpha = 30°$ и $\\alpha = 60°$ дальность одинакова ($\\sin 60° = \\sin 120°$). Высота максимальна при $\\alpha = 90°$ (бросок строго вверх).</p>
</div>
<div class="fcard">
<h3>Полное время полёта</h3>
<div class="main-f">$T = \\dfrac{2v_0\\sin\\alpha}{g}$</div>
<p>Время полёта — только от вертикального движения: тело улетело вверх (время $v_{y0}/g$) и упало обратно (ещё столько же). Горизонтальная скорость на время <em>никак не влияет</em>: хоть 1 м/с, хоть 100 м/с горизонтально — вертикальный цикл тот же. Поэтому формула: $T = 2v_0\\sin\\alpha / g$.</p>
</div>
<div class="fcard">
<h3>Координаты в момент t</h3>
<div class="main-f">$x = v_0\\cos\\alpha\\cdot t$</div>
<div class="main-f">$y = v_0\\sin\\alpha\\cdot t - \\tfrac{gt^2}{2}$</div>
<p>В каждый момент $t$: горизонталь нарастает равномерно ($x = v_0\\cos\\alpha \\cdot t$), вертикаль — по параболе ($y = v_0\\sin\\alpha \\cdot t - gt^2/2$). Подставь $x$ вместо $t$ — получишь уравнение параболы: $y = x\\tan\\alpha - gx^2/(2v_0^2\\cos^2\\alpha)$. Вершина параболы — точка где $v_y = 0$, то есть $t = v_0\\sin\\alpha / g$.</p>
</div>
</div>
<div class="student-box">
<div class="student-box-title"> Как это понять?</div>
<p>Представь: ты бросаешь мяч. <b>По горизонтали</b> мяч летит с постоянной скоростью — как будто никакой гравитации нет. <b>По вертикали</b> — он тормозит (летит вверх) и потом разгоняется (падает вниз), как при свободном падении.</p>
<p>Оба движения происходят <b>одновременно и независимо</b>. Поэтому траектория — парабола.</p>
<p>Угол 45° — <b>золотой угол</b>. При нём sin2α = sin90° = 1 — максимально возможная дальность для данной скорости.</p>
</div>
<!-- Интерактив: бросок под углом -->
<div class="idiag">
<h3> Интерактив: бросок под углом</h3>
<div class="slider-row">
<span class="slider-lbl">Угол α:</span>
<input type="range" min="10" max="80" value="45" id="sl22a" oninput="upd22()">
<span class="slider-val" id="v22a">45°</span>
</div>
<div class="slider-row">
<span class="slider-lbl">v₀, м/с:</span>
<input type="range" min="5" max="30" value="20" id="sl22v" oninput="upd22()">
<span class="slider-val" id="v22v">20 м/с</span>
</div>
<div class="cv-wrap"><canvas id="cv22" style="height:200px"></canvas></div>
<div class="idiag-result" id="res22">L = — м | H = — м | T = — с</div>
</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Удар по мячу</div><div class="li-desc">Футболист выбирает угол удара, чтобы мяч улетел как можно дальше</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Фонтан</div><div class="li-desc">Струи воды — параболы. Угол сопла определяет форму дуги</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Артиллерия</div><div class="li-desc">Угол наклона ствола орудия рассчитывают по формуле дальности</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Баскетбол</div><div class="li-desc">Траектория броска — парабола. Игрок интуитивно решает задачу §22</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Ракета</div><div class="li-desc">Баллистические ракеты летят по параболе в безвоздушном пространстве</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Дождь</div><div class="li-desc">Капли вылетают из тучи с горизонтальной скоростью ветра + вертикальным ускорением g</div></div>
</div>
<div class="insight-box">
<div class="insight-title"> Парадокс: почему именно 45°?</div>
<p>$L = v_0^2\\sin 2\\alpha / g$. Функция $\\sin 2\\alpha$ максимальна при $2\\alpha = 90°$, то есть $\\alpha = 45°$.</p>
<p>Но в реальности воздух тормозит мяч — оптимальный угол смещается к 35–40°. Именно поэтому в футболе не бьют «под 45°».</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>Горизонтальная и вертикальная составляющие движения <b>независимы</b>.</li>
<li>Максимальная дальность — при $\\alpha = 45°$.</li>
<li>Траектория при броске под углом — <b>парабола</b>.</li>
<li>В верхней точке $v_y = 0$, но $v_x = v_0\\cos\\alpha \\neq 0$.</li>
</ul>
</div>
<ol class="q-list">
<li>Как направлена скорость тела в верхней точке траектории при броске под углом?</li>
<li>При каком угле броска дальность максимальна? Почему?</li>
<li>Что происходит с горизонтальной составляющей скорости в течение всего полёта?</li>
</ol>
`);
html += secNav('p21', 'p23');
html += readButton('p22');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p22');
}
function build_p23(){
const box = document.getElementById('p23-body');
let html = '';
html += makeCard('theory', "Закон всемирного тяготения", "§23", `
<div class="para-hero ph-23">
<div class="ph-label">§23 · Физика 9 кл</div>
<h2>Закон всемирного тяготения</h2>
<div class="ph-formula">$F = G\\dfrac{m_1 m_2}{r^2}$</div>
<div class="ph-desc">Каждое тело притягивает каждое другое тело с силой, прямо пропорциональной произведению масс и обратно пропорциональной квадрату расстояния между ними.</div>
<div class="ph-tags">
<span class="ph-tag">G = 6,67·10⁻¹¹ Н·м²/кг²</span>
<span class="ph-tag"> g = GM/R²</span>
<span class="ph-tag"> v₁ = 7,9 км/с</span>
</div>
</div>
<div class="section-title"> §23. Закон всемирного тяготения</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Закон всемирного тяготения</h3>
<div class="main-f">$F = G\\dfrac{m_1 m_2}{r^2}$</div>
<p>Два человека по 60 кг на расстоянии 1 м: $F = 6{,}67 \\cdot 10^{-11} \\cdot 60 \\cdot 60 / 1^2 \\approx 2{,}4 \\cdot 10^{-7}$ Н — в миллиарды раз меньше нейтона. Для людей гравитация ничтожна. Но для планет ($10^{24}$ кг) — главная сила во Вселенной. $r$ — расстояние между <b>центрами масс</b>, не между поверхностями.</p>
</div>
<div class="fcard">
<h3>Ускорение свободного падения</h3>
<div class="main-f">$g = \\dfrac{GM}{R^2}$</div>
<p>Сила тяжести = $GMm/R^2 = mg$, значит $g = GM/R^2$ — зависит только от планеты, не от падающего тела. Марс легче Земли и меньше: $g_\\text{Марс} = 3{,}7$ м/с². Юпитер огромен: $g_\\text{Юп} = 25$ м/с² — тебя «приплющит» в 2,5 раза сильнее. Чем выше над поверхностью (больше $r$) — тем слабее $g$.</p>
</div>
<div class="fcard">
<h3>Первая космическая скорость</h3>
<div class="main-f">$v_1 = \\sqrt{gR} \\approx 7{,}9\\,\\text{км/с}$</div>
<p>Если пушка на горе выстрелит горизонтально со скоростью 7,9 км/с — ядро начнёт «падать» к Земле, но Земля «убегает» под ней так же быстро. Ядро в вечном падении — орбита! Это минимальная орбитальная скорость: $mg = mv^2/R$ → $v_1 = \\sqrt{gR}$. Реальные спутники летят чуть выше — нет атмосферы.</p>
</div>
<div class="fcard">
<h3>Вторая космическая скорость</h3>
<div class="main-f">$v_2 = \\sqrt{2gR} \\approx 11{,}2\\,\\text{км/с}$</div>
<p>При скорости $v_2 \\approx 11{,}2$ км/с тело навсегда покидает Землю — кинетической энергии хватает, чтобы «выбраться» из гравитационной ямы. Именно с такой скоростью стартуют межпланетные зонды. Быстрее $v_2$ — улетаешь к другим планетам или из Солнечной системы. Медленнее — возвращаешься назад.</p>
</div>
</div>
<div class="student-box">
<div class="student-box-title"> Как это понять?</div>
<p>Ньютон заметил, что Луна падает на Земли так же, как яблоко — только «мимо». Луна движется так быстро по горизонтали, что, падая вниз, она «промахивается» мимо Земли. Это и есть орбита!</p>
<p>Закон работает <b>между любыми телами</b>: притягиваются две книги на столе, два облака, две галактики. Просто при малых массах сила крошечная.</p>
<p>Ключевой факт: сила падает как $1/r^2$. Увеличь расстояние в 2 раза — сила уменьшится в <b>4 раза</b>.</p>
</div>
<!-- Интерактив: закон тяготения -->
<div class="idiag">
<h3> Интерактив: сила тяготения</h3>
<div class="slider-row">
<span class="slider-lbl">m₁, кг:</span>
<input type="range" min="1" max="100" value="50" id="sl23m1" oninput="upd23()">
<span class="slider-val" id="v23m1">50 кг</span>
</div>
<div class="slider-row">
<span class="slider-lbl">m₂, кг:</span>
<input type="range" min="1" max="100" value="50" id="sl23m2" oninput="upd23()">
<span class="slider-val" id="v23m2">50 кг</span>
</div>
<div class="slider-row">
<span class="slider-lbl">r, м:</span>
<input type="range" min="1" max="20" value="5" id="sl23r" oninput="upd23()">
<span class="slider-val" id="v23r">5 м</span>
</div>
<div class="cv-wrap"><canvas id="cv23" style="height:160px"></canvas></div>
<div class="idiag-result" id="res23">F = — Н</div>
</div>
<!-- Таблица планет -->
<div class="section-title" style="margin-top:6px"> Данные планет Солнечной системы</div>
<table class="mu-tbl">
<tr><th>Планета</th><th>M, кг</th><th>R, км</th><th>g, м/с²</th></tr>
<tr><td>Меркурий</td><td>3,3·10²³</td><td>2 440</td><td>3,7</td></tr>
<tr><td>Венера</td><td>4,9·10²⁴</td><td>6 050</td><td>8,9</td></tr>
<tr><td><b>Земля</b></td><td><b>6,0·10²⁴</b></td><td><b>6 370</b></td><td><b>9,8</b></td></tr>
<tr><td>Марс</td><td>6,4·10²³</td><td>3 390</td><td>3,7</td></tr>
<tr><td>Юпитер</td><td>1,9·10²⁷</td><td>71 490</td><td>25</td></tr>
<tr><td>Луна</td><td>7,3·10²²</td><td>1 737</td><td>1,6</td></tr>
</table>
<div class="insight-box">
<div class="insight-title"> Почему Луна не падает на Землю?</div>
<p>Луна постоянно «падает» на Землю — сила тяжести притягивает её. Но скорость Луны (~1 км/с) настолько велика, что она успевает «промахнуться»: Земля «уходит из-под ног» так же быстро, как Луна к ней приближается. Это и есть орбита.</p>
<p>Это объяснение принадлежит Ньютону — он придумал «пушку на горе», из которой можно выстрелить так, что ядро облетит Землю.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>$F \\propto m_1 m_2$ — вдвое тяжелее тело: сила вдвое больше.</li>
<li>$F \\propto 1/r^2$ — вдвое дальше: сила <b>в четыре раза</b> меньше.</li>
<li>Первая космическая скорость: $v_1 \\approx 7{,}9\\,\\text{км/с}$.</li>
<li>$G = 6{,}67 \\cdot 10^{-11}\\,\\text{Н}{\\cdot}\\text{м}^2/\\text{кг}^2$ — запомнить значение!</li>
</ul>
</div>
<ol class="q-list">
<li>Как изменится сила тяготения, если расстояние между телами уменьшить в 3 раза?</li>
<li>Что такое первая космическая скорость и как она связана с $g$ и $R$?</li>
<li>Почему ускорение свободного падения на разных планетах разное?</li>
</ol>
`);
html += secNav('p22', 'p24');
html += readButton('p23');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p23');
}
function build_p24(){
const box = document.getElementById('p24-body');
let html = '';
html += makeCard('theory', "Вес. Невесомость и перегрузки", "§24", `
<div class="para-hero ph-24">
<div class="ph-label">§24 · Физика 9 кл</div>
<h2>Вес тела. Невесомость</h2>
<div class="ph-formula">$P = m(g \\pm a)$</div>
<div class="ph-desc">Вес — это сила, с которой тело давит на опору или растягивает подвес. При ускорении тело «тяжелеет» или «легчает». При свободном падении — полная невесомость.</div>
<div class="ph-tags">
<span class="ph-tag">⬆ лифт вверх: P > mg</span>
<span class="ph-tag">⬇ лифт вниз: P &lt; mg</span>
<span class="ph-tag"> a = g: P = 0</span>
</div>
</div>
<div class="section-title"> §24. Вес тела. Невесомость</div>
<div class="formula-grid">
<div class="fcard highlight">
<h3>Вес тела при ускорении</h3>
<div class="main-f">$P = m(g + a)$ — лифт вверх ($a > 0$)</div>
<div class="main-f">$P = m(g - a)$ — лифт вниз ($a > 0$)</div>
<p>Вес — это не то же самое, что сила тяжести! Вес $\\vec{P}$ — сила на опору, сила тяжести $\\vec{F}_\\text{т} = m\\vec{g}$ — всегда одна и та же.</p>
</div>
<div class="fcard">
<h3>Невесомость</h3>
<div class="main-f">$a = g \\Rightarrow P = 0$</div>
<p>Невесомость — не «нет гравитации», а «нет опоры». Стоишь на полу — пол давит снизу, ты его чувствуешь. Если пол исчезнет (лифт в свободном падении) — давить нечему, весы покажут 0. Твоя масса и $g$ никуда не делись, но опоры нет → веса нет → невесомость. Именно так на МКС: станция постоянно «падает» вокруг Земли.</p>
</div>
<div class="fcard">
<h3>Перегрузка</h3>
<div class="main-f">$Q = P/(mg) = (g+a)/g$</div>
<p>$Q = P/(mg)$: сколько «своих весов» ты ощущаешь. В покое $Q = 1$ (норма). Лифт разгоняется вверх: $Q > 1$ — ты тяжелее. Ракетный старт: $Q = 3{-}4$ — тело давит на кресло с утроенной силой. Отрицательная перегрузка ($Q < 0$): лифт падает быстрее $g$ — тебя отрывает от пола. Предел выносимости человека: ~9g кратковременно.</p>
</div>
<div class="fcard">
<h3>Пример: лифт</h3>
<div class="main-f">$m = 60\\,\\text{кг},\\; a = 2\\,\\text{м/с}^2$</div>
<p>Вверх: $P = 60(10+2) = 720\\,\\text{Н}$ (тяжелее)<br>
Вниз: $P = 60(10-2) = 480\\,\\text{Н}$ (легче)<br>
Без ускорения: $P = 60\\cdot10 = 600\\,\\text{Н}$</p>
</div>
</div>
<div class="student-box">
<div class="student-box-title"> Как это понять?</div>
<p>Ты стоишь в лифте. Лифт трогается вверх — ты чувствуешь, что стал <b>тяжелее</b>. Пол давит на тебя сильнее. Весы покажут больше. Это и есть увеличение веса: $P = m(g + a)$.</p>
<p>Лифт едет вниз с ускорением — ты чувствуешь, что стал <b>легче</b>. Если трос обрежут (свободное падение) — ты взлетишь к потолку. Вес = 0. Невесомость!</p>
<p><b>Ключевое:</b> вес и сила тяжести — разные вещи. Сила тяжести $mg$ всегда одна и та же. Вес зависит от ускорения.</p>
</div>
<!-- Интерактив: лифт -->
<div class="idiag">
<h3> Интерактив: лифт</h3>
<div class="slider-row">
<span class="slider-lbl">Масса m, кг:</span>
<input type="range" min="10" max="120" value="60" id="sl24m" oninput="upd24()">
<span class="slider-val" id="v24m">60 кг</span>
</div>
<div class="slider-row">
<span class="slider-lbl">Ускорение a:</span>
<input type="range" min="-10" max="10" value="0" id="sl24a" oninput="upd24()">
<span class="slider-val" id="v24a">0 м/с²</span>
</div>
<div class="cv-wrap"><canvas id="cv24" style="height:200px"></canvas></div>
<div class="idiag-result" id="res24">P = — Н | F_т = — Н</div>
</div>
<div class="life-grid">
<div class="life-item"><div class="li-icon"></div><div class="li-title">Старт ракеты</div><div class="li-desc">Космонавт при старте испытывает 3–4g. Тело весит в 3–4 раза больше нормы</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Лифт</div><div class="li-desc">Каждый день испытываешь перегрузку/невесомость при разгоне/торможении</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Самолёт</div><div class="li-desc">В «яме» воздушной ямы самолёт резко снижается — пассажиры чувствуют невесомость</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Американские горки</div><div class="li-desc">На верхней части петли — отрицательная перегрузка. Кровь приливает к голове</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">МКС</div><div class="li-desc">Станция находится в постоянном свободном падении вокруг Земли — отсюда невесомость</div></div>
<div class="life-item"><div class="li-icon"></div><div class="li-title">Прыжок с парашютом</div><div class="li-desc">Первые секунды свободного падения — невесомость. Парашют раскрылся — перегрузка</div></div>
</div>
<div class="insight-box">
<div class="insight-title"> МКС — почему невесомость?</div>
<p>Многие думают: на МКС невесомость, потому что «далеко от Земли» и нет гравитации. Но на высоте 400 км гравитация составляет ~88% от земной! Невесомость — потому что станция <b>постоянно падает</b> вокруг Земли. Это и есть орбитальный полёт.</p>
<p>Космонавты — парашютисты, которые никогда не приземляются.</p>
</div>
<div class="remember-box">
<div class="remember-box-title"> Запомни!</div>
<ul>
<li>Вес $P \\neq$ сила тяжести $F_\\text{т} = mg$. Вес зависит от ускорения, сила тяжести — нет.</li>
<li>Ускорение вверх → $P = m(g+a)$ — перегрузка.</li>
<li>Ускорение вниз → $P = m(g-a)$ — облегчение.</li>
<li>$a = g$ (свободное падение) → $P = 0$ — невесомость.</li>
</ul>
</div>
<ol class="q-list">
<li>Чем отличается вес тела от силы тяжести?</li>
<li>Почему космонавты на орбите испытывают невесомость, хотя гравитация там есть?</li>
<li>Человек массой $m = 70\\,\\text{кг}$ в лифте. Лифт движется вниз с $a = 3\\,\\text{м/с}^2$. Каков его вес?</li>
</ol>
`);
html += secNav('p23', 'final2');
html += readButton('p24');
box.innerHTML = html;
renderMath(box);
wireReadBtn('p24');
}
function build_final2(){
const box = document.getElementById('final2-body');
let html = '';
html += makeCard('theory', "Финал главы 2", "★", `
<div class="formula-grid" style="margin-bottom:20px">
<div class="fcard highlight"><h3>Законы Ньютона</h3>
<div class="main-f">$\\vec{F} = m\\vec{a}$</div>
<p>1-й: ИСО; 2-й: $\\vec{a} = \\vec{F}/m$; 3-й: $\\vec{F}_{12} = -\\vec{F}_{21}$</p>
</div>
<div class="fcard"><h3>Силы</h3>
<div class="main-f">$F_{\\text{упр}} = -kx$, $F_{\\text{тр}} = \\mu N$</div>
<p>Тяжести: $mg$ · Гравит.: $F = G m_1 m_2/r^2$</p>
</div>
<div class="fcard"><h3>Вес</h3>
<div class="main-f">$P = m(g \\pm a)$</div>
<p>Свободное падение → $P = 0$ (невесомость)</p>
</div>
</div>
<div class="section-title"><i class="fas fa-star"></i> Интегрированные задачи</div>
<div class="task-card">
<div class="task-num">Задача 1</div>
<div class="task-text">На тело массой $m = 2$ кг действует сила $F = 10$ Н в горизонтальном направлении. Сила трения $F_{\\text{тр}} = 4$ Н. Найдите модуль ускорения тела.</div>
<div class="task-hint">Равнодействующая $F_{\\text{рез}} = F - F_{\\text{тр}}$, ускорение $a = F_{\\text{рез}}/m$.</div>
<div class="ans-row"><input type="number" class="ans-inp" id="fin2-q1" step="any"><span class="unit-lbl">м/с²</span>
<button class="btn btn-pri" onclick="checkNum('fin2-q1', 3, 'м/с²', 0.05)">Проверить</button></div>
<div class="feedback" id="fb-fin2-q1"></div>
</div>
<div class="task-card">
<div class="task-num">Задача 2</div>
<div class="task-text">Под действием груза пружина с жёсткостью $k = 200$ Н/м растянулась на $x = 5$ см. Найдите массу груза. $g = 9{,}81$ м/с².</div>
<div class="task-hint">В равновесии $kx = mg$, отсюда $m = kx/g$.</div>
<div class="ans-row"><input type="number" class="ans-inp" id="fin2-q2" step="any"><span class="unit-lbl">кг</span>
<button class="btn btn-pri" onclick="checkNum('fin2-q2', 1.02, 'кг', 0.05)">Проверить</button></div>
<div class="feedback" id="fb-fin2-q2"></div>
</div>
<div class="task-card">
<div class="task-num">Задача 3</div>
<div class="task-text">Брусок массой $m = 5$ кг скользит по горизонтальной поверхности с коэффициентом трения $\\mu = 0{,}3$. Найдите силу трения скольжения. $g = 10$ м/с².</div>
<div class="task-hint">$F_{\\text{тр}} = \\mu mg$.</div>
<div class="ans-row"><input type="number" class="ans-inp" id="fin2-q3" step="any"><span class="unit-lbl">Н</span>
<button class="btn btn-pri" onclick="checkNum('fin2-q3', 15, 'Н', 0.1)">Проверить</button></div>
<div class="feedback" id="fb-fin2-q3"></div>
</div>
<div class="task-card">
<div class="task-num">Задача 4</div>
<div class="task-text">Тело свободно падает с высоты $h = 45$ м. Найдите время падения. $g = 10$ м/с².</div>
<div class="task-hint">$h = gt^2/2$, отсюда $t = \\sqrt{2h/g}$.</div>
<div class="ans-row"><input type="number" class="ans-inp" id="fin2-q4" step="any"><span class="unit-lbl">с</span>
<button class="btn btn-pri" onclick="checkNum('fin2-q4', 3, 'с', 0.05)">Проверить</button></div>
<div class="feedback" id="fb-fin2-q4"></div>
</div>
<div class="task-card">
<div class="task-num">Задача 5 (повышенный уровень)</div>
<div class="task-text">Космонавт массой $m = 80$ кг стоит на полу лифта. Лифт движется вверх с ускорением $a = 2{,}0$ м/с². Найдите вес космонавта. $g = 10$ м/с².</div>
<div class="task-hint">$P = m(g + a)$ при движении вверх с положительным ускорением (перегрузка).</div>
<div class="ans-row"><input type="number" class="ans-inp" id="fin2-q5" step="any"><span class="unit-lbl">Н</span>
<button class="btn btn-pri" onclick="checkNum('fin2-q5', 960, 'Н', 5)">Проверить</button></div>
<div class="feedback" id="fb-fin2-q5"></div>
</div>
`);
html += secNav('p24', null);
html += readButton('final2');
box.innerHTML = html;
renderMath(box);
wireReadBtn('final2');
}
/* ===== Search ===== */
const SEARCH_INDEX = (function(){
const arr=[];
PARAS.forEach(p=>arr.push({kind: p.id.startsWith('lr')?'Лабораторная':(p.final?'Финал':'Параграф'),title:p.num+' '+p.name,desc:p.sub||'',sec:p.id}));
return arr;
})();
function initSearch(){
const modal=document.getElementById('search-modal'),inp=document.getElementById('search-input'),out=document.getElementById('search-results'),btn=document.getElementById('search-btn');
if(!modal||!inp||!out) return;
let cur=0,rows=[];
function score(q,it){ const t=(it.title+' '+it.desc).toLowerCase(); if(t.includes(q)) return 100+(it.title.toLowerCase().startsWith(q)?50:0); let s=0; q.split(/\s+/).forEach(w=>{if(w&&t.includes(w))s+=10;}); return s; }
function rank(q){ q=q.trim().toLowerCase(); if(!q) return SEARCH_INDEX.slice(0,12); return SEARCH_INDEX.map(it=>({it,s:score(q,it)})).filter(x=>x.s>0).sort((a,b)=>b.s-a.s).slice(0,20).map(x=>x.it); }
function render(){ cur=0; if(!rows.length){out.innerHTML='<div class="search-empty">Ничего не найдено</div>';return;} out.innerHTML=rows.map((r,i)=>'<button class="search-row'+(i===0?' active':'')+'" data-i="'+i+'"><div class="sr-kind">'+r.kind+'</div><div class="sr-title">'+r.title+'</div>'+(r.desc?'<div class="sr-desc">'+(r.desc.length>90?r.desc.slice(0,90)+'…':r.desc)+'</div>':'')+'</button>').join(''); out.querySelectorAll('.search-row').forEach(b=>b.addEventListener('click',()=>{cur=+b.dataset.i;pick();})); }
function pick(){ const r=rows[cur]; if(!r) return; close(); goTo(r.sec); }
function move(d){ const items=out.querySelectorAll('.search-row'); if(!items.length) return; items[cur]&&items[cur].classList.remove('active'); cur=(cur+d+items.length)%items.length; items[cur].classList.add('active'); items[cur].scrollIntoView({block:'nearest'}); }
function open(){ modal.classList.add('show'); inp.value=''; rows=rank(''); render(); setTimeout(()=>inp.focus(),50); }
function close(){ modal.classList.remove('show'); }
btn&&btn.addEventListener('click',open);
modal.addEventListener('click',e=>{if(e.target===modal)close();});
inp.addEventListener('input',()=>{rows=rank(inp.value);render();});
inp.addEventListener('keydown',e=>{ if(e.key==='ArrowDown'){e.preventDefault();move(1);}else if(e.key==='ArrowUp'){e.preventDefault();move(-1);}else if(e.key==='Enter'){e.preventDefault();pick();}else if(e.key==='Escape'){e.preventDefault();close();} });
document.addEventListener('keydown',e=>{ if((e.ctrlKey||e.metaKey)&&(e.key==='k'||e.key==='K')){ e.preventDefault(); if(modal.classList.contains('show')) close(); else open(); } });
}
function initSidebarToggle(){
const side=document.getElementById('col-side'),back=document.getElementById('col-side-backdrop'),btn=document.getElementById('sidebar-btn');
if(!side||!btn) return;
function open(){ side.classList.add('open'); back.classList.add('show'); }
function close(){ side.classList.remove('open'); back.classList.remove('show'); }
btn.addEventListener('click',()=>{ if(side.classList.contains('open')) close(); else open(); });
back.addEventListener('click',close);
document.addEventListener('keydown',e=>{ if(e.key==='Escape') close(); });
}
function init(){
loadProgress(); initTheme(); initSidebarToggle(); initSearch();
buildParaSelector(); refreshProgressUI(); loadServerReadState(); goTo(PARAS[0].id);
setTimeout(()=>achievement('start'), 600);
if(window.LS&&window.LS.xp){
window.LS.xp.load().then(function(s){ if(s&&s.xp>STATE.xp){ STATE.xp=s.xp; STATE.level=calcLevel(STATE.xp); saveProgress(); refreshProgressUI(); if(STATE.current) buildSidebar(STATE.current); } });
}
}
document.addEventListener('DOMContentLoaded', init);
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink