:root{--acc:#4f8cff;--red:#e5303a}
*{box-sizing:border-box}
body{margin:0;background:#101014;color:#f2f2f5;font:16px/1.5 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
main{max-width:720px;margin:0 auto;padding:20px 18px 40px}
h1{font-size:26px;margin:4px 0 2px}h2{font-size:19px;margin:28px 0 8px}
.sub{color:#9a9aa6;margin:0 0 10px}
ol{padding-left:0;list-style:none;counter-reset:s}
ol>li{counter-increment:s;background:#1c1c22;border-radius:14px;padding:12px 14px 12px 52px;margin:10px 0;position:relative}
ol>li::before{content:counter(s);position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;font-weight:700;text-align:center;line-height:28px}
.key{display:inline-block;background:#2a2a33;border-radius:6px;padding:0 6px;font-weight:600}
.box{background:#2a2112;border-left:4px solid #e8b730;border-radius:8px;padding:10px 12px;margin:12px 0}
.ok{background:#12291c;border-left-color:#2fbf71}
img{max-width:100%;border-radius:10px;margin:8px 0;display:block}
.pair{display:flex;gap:10px;flex-wrap:wrap}.pair figure{flex:1;min-width:240px;margin:0}
figcaption{color:#9a9aa6;font-size:13px}
a{color:var(--acc)}
.back{display:inline-block;margin-bottom:8px}
@media print{body{background:#fff;color:#111}ol>li{background:#f1f2f6}.key{background:#e4e6ee}.sub,figcaption{color:#555}
 .box{background:#fff6e0}.ok{background:#e9f8ef}.back{display:none}main{max-width:none;padding:0}h2{break-after:avoid}ol>li,figure{break-inside:avoid}}