*{box-sizing:border-box}body{margin:0;font:17px/1.55 system-ui,sans-serif;background:#0c1222;color:#e6ebf5}
a{color:#7fb0ff}header,footer{padding:14px 24px;background:#111a30;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
header b{font-size:20px}header b a{color:#fff;text-decoration:none}.flag{display:inline-block;width:26px;height:16px;background:repeating-linear-gradient(#b22234 0 2px,#fff 2px 4px);position:relative;vertical-align:middle;margin-right:6px}.flag:before{content:"";position:absolute;left:0;top:0;width:11px;height:8px;background:#3c3b6e}
main{max-width:960px;margin:auto;padding:24px}.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:#16213d;border-radius:12px;padding:18px;border:1px solid #233258;transition:transform .2s}.card:hover{transform:translateY(-4px)}
.lead{border-color:#b22234}.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}.tabs button{background:#1d2a4b;color:#e6ebf5;border:0;border-radius:20px;padding:8px 14px;cursor:pointer}
.tabs button.on{background:#b22234}.step{display:none;background:#16213d;border-radius:12px;padding:20px;animation:in .45s ease}.step.on{display:block}
@keyframes in{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.step li{opacity:0;animation:in .4s ease forwards}.step li:nth-child(2){animation-delay:.2s}.step li:nth-child(3){animation-delay:.4s}.step li:nth-child(4){animation-delay:.6s}.step li:nth-child(5){animation-delay:.8s}
.nav{display:flex;justify-content:space-between;margin-top:14px}.nav button,.btn{background:#2b5cb8;color:#fff;border:0;border-radius:8px;padding:9px 16px;cursor:pointer}
.bar{height:6px;background:#1d2a4b;border-radius:3px;overflow:hidden}.bar i{display:block;height:100%;background:#7fb0ff;transition:width .4s}
.box{background:#16213d;border-radius:12px;padding:18px;margin:18px 0}label{display:block;margin:6px 0}.ok{color:#7ee08a}.bad{color:#ff8a8a}
input[type=number]{width:110px;padding:6px;border-radius:6px;border:0}.small{font-size:14px;color:#9aa6c0}
.hero{display:block;width:100%;height:auto;max-height:220px;object-fit:cover;border-radius:14px;margin-bottom:18px;box-shadow:0 8px 30px #0006}
.ref img{vertical-align:middle;opacity:.9;transition:opacity .2s}.ref img:hover{opacity:1}
a.tab{background:#1d2a4b;color:#e6ebf5;border-radius:20px;padding:8px 14px;text-decoration:none}a.tab.on{background:#b22234}
.nextl{margin-top:24px;padding:14px;background:#111a30;border-radius:10px}table{width:100%;border-collapse:collapse}td,th{border-bottom:1px solid #233258;padding:8px;text-align:left}
.code{position:relative;margin:10px 0}.code pre{background:#0d1117;color:#e6edf3;padding:14px;border-radius:8px;overflow:auto;font-size:13px;white-space:pre-wrap}.cp{position:absolute;right:8px;top:8px;background:#2f81f7;color:#fff;border:0;border-radius:6px;padding:4px 10px;cursor:pointer}
.bad{border-left:4px solid #d33;padding:6px 10px;background:rgba(220,50,50,.08)}.good{border-left:4px solid #2a2;padding:6px 10px;background:rgba(40,170,40,.08)}.rel{margin-top:18px}.rel a{display:inline-block;margin:3px 8px 3px 0}
details{margin:8px 0}summary{cursor:pointer;font-weight:600}
.tb{background:#1c2a4a;color:#dfe7ff;border:0;border-radius:16px;padding:7px 12px;margin:3px;cursor:pointer}.tb.on{background:#2f81f7;font-weight:700}