@font-face{font-family:"Archivo";src:url("fonts/archivo.ttf") format("truetype");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{--bg:#fff;--fg:#231F20;--mut:#5B5758;--g:#4FA526;--gd:#237435;--gl:#EEF7E7;--note:#FFF1CC}
@media (prefers-color-scheme:dark){:root{--bg:#141714;--fg:#ECEFEA;--mut:#A9B0A6;--g:#5DB832;--gd:#8FD46A;--gl:#1E2A1B;--note:#3A3220;color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:"Archivo","Helvetica Neue",Arial,sans-serif;font-size:17px;line-height:1.6}
a{color:var(--gd)}a:hover{color:var(--fg)}
:focus-visible{outline:3px solid var(--g);outline-offset:2px}
.wrap{max-width:820px;margin:0 auto;padding-inline:20px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--fg);color:var(--bg);padding:10px 14px;font-weight:800}.skip:focus{left:12px}
.top{border-bottom:3px solid var(--fg)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--fg)}
.brand img{width:58px;height:auto}
.brand small{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.brand b{display:block;font-weight:900;font-stretch:72%;font-size:28px;line-height:1;color:var(--gd)}
.back{font-weight:700}
main{padding-block:32px 56px}
h1{font-weight:900;font-stretch:66%;font-size:clamp(32px,5vw,48px);line-height:1.05;margin:0 0 20px}
h2{font-size:20px;font-weight:800;margin:30px 0 8px;padding-bottom:6px;border-bottom:2px solid var(--g)}
h3{font-size:16px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;color:var(--gd)}
p{margin:0 0 12px;max-width:68ch}
.lead{background:var(--gl);padding:14px 16px}
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:12px}
.todo{background:var(--note);padding:8px 12px;font-weight:700}
.hint{font-size:14px;color:var(--mut)}
footer{border-top:3px solid var(--fg);padding-block:18px 30px}
footer .wrap{display:flex;gap:20px;flex-wrap:wrap}
@media (max-width:560px){.cols{grid-template-columns:1fr}.brand b{font-size:24px}}