:root{color-scheme:dark;--bg:#080f1e;--panel:#111d31;--line:#2a3c53;--muted:#b6c6da;--cyan:#6cebdc;--gold:#ffcf7b}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:radial-gradient(ellipse at 90% 0,#17304e 0,transparent 45%),var(--bg);color:#f0f5ff;font:17px/1.7 system-ui,sans-serif}a{color:var(--cyan)}a,button,input,select{touch-action:manipulation}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.skip{position:absolute;top:-90px}.skip:focus{top:10px;z-index:10;background:var(--bg);padding:10px}header{border-bottom:1px solid var(--line);background:#080f1ef2}header .wrap{display:flex;justify-content:space-between;align-items:center;padding-block:18px;gap:20px}.brand{font-weight:800;font-size:23px;text-decoration:none;color:white}.brand span{color:var(--cyan)}.wrap{max-width:1160px;margin:auto;padding:0 28px}.hero{padding-block:80px 45px;position:relative}.eyebrow,.kicker{color:var(--cyan);font-size:12px;letter-spacing:.17em;font-weight:800;text-transform:uppercase}h1{font-size:clamp(42px,7.5vw,85px);line-height:1.04;letter-spacing:-.055em;max-width:900px;margin:22px 0}h1 em{font-style:normal;color:var(--cyan)}.lead{font-size:21px;color:var(--muted);max-width:760px}.badge{display:inline-block;border:1px solid var(--line);border-radius:30px;padding:5px 13px;font-size:13px;color:var(--muted);margin:5px 6px 5px 0}nav.toc{display:flex;gap:10px;flex-wrap:wrap;padding-block:20px 30px}nav.toc a{border:1px solid var(--line);border-radius:25px;padding:7px 14px;text-decoration:none;font-size:14px}section.lesson{padding:48px 0;border-top:1px solid var(--line)}h2{font-size:clamp(28px,4vw,42px);line-height:1.2;letter-spacing:-.03em;margin:12px 0 20px}h3{font-size:21px;line-height:1.3}.intro{max-width:850px}p{max-width:83ch}p,li{color:var(--muted)}strong{color:#fff}.grid{display:grid;grid-template-columns:1fr 1fr;gap:25px;align-items:start}.panel{background:linear-gradient(130deg,#15263b,#101a2b);border:1px solid var(--line);border-radius:20px;padding:25px;margin-block:20px}.formula{border-left:3px solid var(--cyan);padding:15px 20px;background:#6cebdc09;color:var(--cyan);font-size:20px;overflow-wrap:anywhere}.note{border-left:3px solid var(--gold);padding:10px 18px;background:#ffcf7b09}label{display:block;font-size:15px;font-weight:600;margin-block:15px 5px}input[type=range]{width:100%;accent-color:var(--cyan);min-height:34px}input[type=number],select{font:inherit;border:1px solid #536b87;border-radius:8px;background:#080f1e;color:white;padding:9px;width:100%;min-height:45px}button,.button{font:600 15px system-ui;border:1px solid #526680;border-radius:10px;background:#1a2c43;color:white;padding:12px 18px;cursor:pointer;display:inline-block;text-decoration:none;margin:6px 6px 6px 0}button:hover,.button:hover{background:#2b4561}button.primary,.button.primary{background:var(--cyan);color:#072225;border-color:var(--cyan)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.metric{background:#080f1e;border:1px solid var(--line);border-radius:12px;padding:15px;min-width:0}.metric span{display:block;color:var(--muted);font-size:12px}.metric b{font-size:clamp(17px,1.8vw,24px);color:var(--cyan);overflow-wrap:anywhere}.diagram{width:100%;height:auto;display:block;background:#080f1e;border-radius:12px}.diagram text{font:14px system-ui;fill:#b6c6da}.diagram .bright{fill:#fff}.caption{font-size:14px;color:var(--muted);margin-block:10px}.toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.error{color:#ffb6a5;min-height:1.7em}details{border:1px solid var(--line);padding:14px 20px;border-radius:12px;margin:15px 0}summary{cursor:pointer;font-weight:650}table{width:100%;border-collapse:collapse}td,th{padding:10px;text-align:left;border-bottom:1px solid var(--line)}.table-wrap{overflow-x:auto}footer{padding:40px 0;border-top:1px solid var(--line);color:var(--muted)}.small{font-size:14px}.progress{height:4px;background:var(--cyan);width:0;position:fixed;top:0;left:0;z-index:5}output{font-variant-numeric:tabular-nums}.quiz-result{color:var(--gold)}@media(max-width:750px){.grid{grid-template-columns:1fr}.wrap{padding-inline:20px}.hero{padding-top:48px}.panel{padding:18px}.metrics{grid-template-columns:1fr}header .wrap{align-items:flex-start}header a:last-child{font-size:13px}.lesson{scroll-margin-top:15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
