:root {
    --paper: #f6fbfc;
    --panel: #eaf5f6;
    --line: #badce3;
    --ink: #2b6178;
    --soft: #4d7d8b;
    --accent: #168396;
    --violet: #797abb;
    --focus: #7b58bb;
    --wrap: 1170px;
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; color: var(--ink); background: var(--paper); font: 400 16px/1.76 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { max-width: var(--wrap); padding: 0 clamp(22px,4.2vw,68px) 80px; margin: 0 auto; }
a, a:link, a:visited, a:hover, a:active { color: inherit; font-weight: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1 { margin: 0 0 25px; font-size: 40px; line-height: 1.18; letter-spacing: -.035em; font-weight: 740; overflow-wrap: anywhere; }
h2 { margin: 0 0 22px; font-size: 28px; line-height: 1.28; letter-spacing: -.025em; font-weight: 710; }
p { font-size: 16px; margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
.opening { padding: clamp(35px,5vw,69px) 0 45px; border-bottom: 4px solid var(--line); position: relative; }
.opening::after { content: ''; position: absolute; height: 4px; left: 0; bottom: -4px; width: 27%; background: var(--accent); }
.lead { max-width: 93ch; font-size: 16px; color: var(--soft); line-height: 1.87; }
.opening .index { display: block; margin-bottom: 17px; color: var(--accent); font-size: 12px; font-weight: 680; letter-spacing: .08em; }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: 32px; border-top: 1px solid var(--line); }
.highlights-double { grid-template-columns: repeat(2, minmax(0,1fr)); }
.highlights p { border-left: 2px solid var(--line); padding: 15px 16px 0; margin: 0; line-height: 1.58; }
.highlights p:first-child { padding-left: 0; border-left: 0; padding-right: 16px; }
.highlights p:last-child { padding-right: 0; }
.units { counter-reset: unit; }
.unit { counter-increment: unit; padding: 35px 0 39px; border-bottom: 1px solid var(--line); }
.unit h2 { position: relative; padding-left: 43px; }
.unit h2::before { content: counter(unit, decimal-leading-zero); position: absolute; top: 9px; left: 0; color: var(--accent); font-size: 12px; line-height: 1.5; font-weight: 780; letter-spacing: .08em; }
.prose { padding-left: 43px; }
.prose p { max-width: 105ch; }
.unit:nth-child(even) h2::before { color: var(--violet); }
.formula { padding: 22px 28px; margin: 25px 0 0 43px; background: var(--panel); border-left: 4px solid var(--accent); }
.formula p { margin: 0; font-weight: 590; }
.figure-data { margin: 27px 0 3px 43px; border-collapse: collapse; width: calc(100% - 43px); font-size: 15px; }
.figure-data td, .figure-data th { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; font-weight: 440; }
.figure-data th { color: var(--ink); font-weight: 680; background: var(--panel); }
.note { padding: 32px 0 28px 43px; border-bottom: 1px solid var(--line); }
.note p { max-width: 103ch; }
.references { padding: 30px 0 0 43px; }
.references h2 { margin-bottom: 16px; }
.references p { font-size: 16px; color: var(--soft); padding-left: 17px; border-left: 2px solid var(--line); margin-bottom: 12px; }
@media (max-width: 800px) {
    .highlights, .highlights-double { grid-template-columns: 1fr; }
    .highlights p,.highlights p:first-child,.highlights p:last-child { border-left: 0; border-bottom: 1px solid var(--line); padding: 10px 0; }
    .unit h2 { padding-left: 0; }
    .unit h2::before { position: static; display: block; margin-bottom: 8px; }
    .prose, .references,.note { padding-left: 0; }
    .formula { margin-left: 0; }
    .figure-data { margin-left: 0; width: 100%; }
}
@media (max-width: 480px) {
    main { padding: 0 17px 58px; }
    .opening { padding-top: 28px; }
    .unit { padding: 27px 0 30px; }
    .formula { padding: 17px; }
    .figure-data td,.figure-data th { padding: 8px; }
}