:root{--bg:#f6f8fb;--card:#fff;--ink:#0b1220;--mut:#64748b;--line:#e2e8f0;--pri:#1d4ed8;--tint:#eff6ff;--top:#0b1426;--ok:#ecfdf5;--okb:#10b981;--code:#0f172a;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0b1220;--card:#121b2e;--ink:#e8eef9;--mut:#93a1b8;--line:#223049;--tint:#12213f;--top:#050a15;--ok:#0b2a22;--code:#050a15;--pri:#3b82f6}}
:root[data-theme="dark"]{--bg:#0b1220;--card:#121b2e;--ink:#e8eef9;--mut:#93a1b8;--line:#223049;--tint:#12213f;--top:#050a15;--ok:#0b2a22;--code:#050a15;--pri:#3b82f6}
html{scroll-padding-top:90px;scroll-behavior:smooth}*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 "Plus Jakarta Sans",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
#pg{position:fixed;top:0;left:0;height:3px;background:var(--pri);width:0;z-index:20}
.top{background:var(--top);color:#cbd5e1;font-size:11px;padding:8px 16px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.top b{color:#fff}
.on{background:#064e3b;color:#6ee7b7;border-radius:4px;padding:1px 8px;font-weight:700;font-size:10px}
header{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.bar{max-width:1120px;margin:auto;padding:10px 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{display:flex;gap:10px;align-items:center}.logo i{background:var(--pri);color:#fff;font-style:normal;font-weight:800;border-radius:8px;width:34px;height:34px;display:grid;place-items:center;font-size:13px}
.logo b{display:block;font-size:15px;line-height:1.1}.logo small{color:var(--pri);font-size:10px}
nav{display:flex;gap:2px;flex:1;flex-wrap:wrap}nav a{font-weight:600;font-size:12.5px;padding:7px 11px;border-radius:8px}nav a:hover,nav a.act{background:var(--tint);color:var(--pri)}nav .yt{color:#dc2626}
.search{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:8px;padding:7px 12px;font:12px inherit;font-family:inherit;width:220px}
main{max-width:1120px;margin:auto;padding:20px 16px 40px}
.strip{background:var(--tint);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:11.5px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:var(--mut)}.strip b{color:var(--pri)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.hero{display:grid;grid-template-columns:2fr 1fr;gap:18px;margin:18px 0}
.fi{height:250px;position:relative;display:flex;align-items:flex-end;padding:20px;color:#fff}.fi:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(5,10,21,.88))}
.fi div{position:relative;z-index:1}.fi small{color:#7dd3fc;font-weight:700;font-size:11px}.fi h1{font-size:24px;line-height:1.2;margin:4px 0 0}
.bd{font-size:9.5px;font-weight:800;padding:3px 8px;border-radius:5px;color:#fff;background:var(--pri);text-transform:uppercase}.bd.r{background:#dc2626}.bd.o{background:#f59e0b}
.bds{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.fb{padding:16px 20px}.fb p{margin:0 0 14px;color:var(--mut)}
.meta{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--mut);flex-wrap:wrap}
.btn{background:var(--pri);color:#fff;border:0;border-radius:7px;padding:8px 16px;font:700 11.5px inherit;font-family:inherit;cursor:pointer;display:inline-block}
.side h3{margin:0 0 10px;font-size:11px;letter-spacing:.04em}.sc{padding:16px;margin-bottom:14px;display:block}
.cat{font-size:10px;font-weight:800;color:var(--pri);text-transform:uppercase}.sc h4{margin:4px 0 6px;font-size:14px;line-height:1.3}.sc p{margin:0;color:var(--mut);font-size:11.5px}
.ad{margin:20px 0;border:1.5px dashed var(--line);border-radius:12px;background:var(--tint);text-align:center;padding:14px;font-size:11.5px;color:var(--mut)}.ad small{display:block;font-weight:800;letter-spacing:.06em;font-size:9.5px}
h2.sh{font-size:19px;margin:6px 0 2px}.sub{color:var(--mut);font-size:12.5px;margin:0 0 16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.g .im{height:110px;position:relative}.g .bd{background:var(--card);color:var(--ink);border:1px solid var(--line)}.g .in{padding:12px 14px}
.tags{display:flex;gap:8px;align-items:center;font-size:10.5px;color:var(--mut)}.lv{border:1px solid;border-radius:4px;padding:0 6px;font-weight:600}
.g h3{font-size:14.5px;line-height:1.3;margin:8px 0 4px}.g p{font-size:11.5px;color:var(--mut);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px}
.art{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}
.ab{padding:28px 30px}.ab h1{font-size:28px;line-height:1.2;margin:8px 0}.ab h2{font-size:21px;margin:30px 0 10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.ab p{margin:0 0 14px}.lead{color:var(--mut);font-size:15px}
.crumb{font-size:11.5px;color:var(--mut)}.crumb a{color:var(--pri)}
table{width:100%;border-collapse:collapse;font-size:12.5px;border:1px solid var(--line);border-radius:10px;overflow:hidden;display:block;overflow-x:auto}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}th{background:var(--tint);font-size:11px;text-transform:uppercase;color:var(--mut)}
.step{display:flex;gap:14px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.step i{flex:none;width:28px;height:28px;border-radius:50%;background:var(--pri);color:#fff;display:grid;place-items:center;font:700 12px inherit;font-style:normal}
.step b{display:block;font-size:14.5px}.step span{color:var(--mut);font-size:12.5px}
pre{background:var(--code);color:#e2e8f0;border-radius:10px;padding:14px;overflow-x:auto;font:12px/1.55 ui-monospace,Menlo,Consolas,monospace;position:relative;margin:0 0 14px}
pre button{position:absolute;top:8px;right:8px;background:#1e293b;color:#cbd5e1;border:0;border-radius:6px;font-size:10px;padding:3px 8px;cursor:pointer}
.tip{background:var(--ok);border-left:4px solid var(--okb);border-radius:10px;padding:12px 16px;margin:14px 0}.tip b{display:block}
.vid{background:var(--code);color:#cbd5e1;border-radius:14px;overflow:hidden;margin:20px 0}.vid .pl{height:190px;display:grid;place-items:center;background:linear-gradient(135deg,#1e293b,#0f172a)}
.vid .pl span{width:64px;height:44px;background:#dc2626;border-radius:12px;display:grid;place-items:center;color:#fff;font-size:18px}.vid div.t{padding:12px 16px;font-size:12.5px}.vid a{color:#f87171;font-weight:700}
details{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:10px}summary{font-weight:700;cursor:pointer}details p{margin:8px 0 0;color:var(--mut)}
.toc{position:sticky;top:90px;padding:16px;margin-bottom:14px}.toc a{display:block;padding:4px 0;font-size:12.5px;color:var(--mut)}.toc a:hover{color:var(--pri)}
.about{max-width:720px;margin:auto;padding:30px}
footer{text-align:center;color:var(--mut);font-size:11.5px;padding:20px}
@media(max-width:860px){.hero,.art{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.search{width:100%}.toc{position:static}.ab{padding:20px 16px}}
@media(max-width:540px){.grid{grid-template-columns:1fr}}
:focus-visible{outline:2px solid var(--pri);outline-offset:2px}

/* smaller type */
body{font-size:13px}
nav a{font-size:12px;transition:background .2s,color .2s}
.logo b{font-size:14px}.logo i{transition:transform .3s}.logo:hover i{transform:rotate(-8deg) scale(1.08)}
.fi h1{font-size:20px}.fb p{font-size:12.5px}
h2.sh{font-size:16px}.sub{font-size:12px}
.g h3,.sc h4{font-size:13px}.g p,.sc p{font-size:11.5px}
.ab h1{font-size:23px}.ab h2{font-size:17px}.lead{font-size:13.5px}
.step b{font-size:13px}.step span{font-size:12px}
table{font-size:12px}pre{font-size:11.5px}
.strip{font-size:11px}.btn{font-size:11px}
/* motion */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
#app.in{animation:fade .35s ease}
.grid>.g{animation:rise .45s cubic-bezier(.2,.7,.2,1) both}
.grid>.g:nth-child(2){animation-delay:.06s}.grid>.g:nth-child(3){animation-delay:.12s}.grid>.g:nth-child(4){animation-delay:.18s}.grid>.g:nth-child(5){animation-delay:.24s}.grid>.g:nth-child(6){animation-delay:.3s}
.card{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s}
a.card:hover{transform:translateY(-4px);box-shadow:0 14px 28px -12px rgba(15,23,42,.28);border-color:var(--pri)}
.hero .card:hover:not(a){box-shadow:0 14px 28px -12px rgba(15,23,42,.25)}
.im,.fi{overflow:hidden;transition:filter .3s}
.im:before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.g:hover .im:before{transform:translateX(120%)}.g:hover .im{filter:saturate(1.2) brightness(1.08)}
.g h3{transition:color .2s}.g:hover h3,.sc:hover h4{color:var(--pri)}
.meta b,.btn{transition:transform .2s,box-shadow .2s,background .2s}
.g:hover .meta b,.sc:hover .meta b{transform:translateX(4px)}
.btn:hover{background:#1e40af;transform:translateY(-1px);box-shadow:0 6px 14px -4px rgba(29,78,216,.55)}.btn:active{transform:scale(.96)}
.step{transition:transform .2s,border-color .2s,background .2s}.step:hover{transform:translateX(4px);border-color:var(--pri);background:var(--card)}
.step i{transition:transform .25s}.step:hover i{transform:scale(1.15)}
details{transition:border-color .2s,background .2s}details[open]{border-color:var(--pri);background:var(--card)}details[open] p{animation:rise .3s both}
summary{transition:color .2s}summary:hover{color:var(--pri)}
.toc a{transition:color .2s,padding-left .2s}.toc a:hover{padding-left:6px}
.search{transition:border-color .2s,box-shadow .2s,width .25s}.search:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px rgba(29,78,216,.18)}
@media(min-width:861px){.search:focus{width:280px}}
.on{animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.55}}
pre button{transition:background .2s}pre button:hover{background:var(--pri)}
/* footer */
footer{background:#050a15;color:#8b9bb5;text-align:left;font-size:12px;padding:0;margin-top:20px}
.fw{max-width:1120px;margin:auto;padding:36px 16px 0}
.fg{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:28px}
@media(max-width:860px){.fg{grid-template-columns:1fr 1fr}}@media(max-width:540px){.fg{grid-template-columns:1fr}}
footer h5{color:#fff;font-size:11px;letter-spacing:.04em;margin:6px 0 14px;text-transform:uppercase}
footer .fl{display:block;padding:5px 0;color:#8fa3c4;transition:color .2s,transform .2s}footer .fl:hover{color:#fff;transform:translateX(4px)}
footer .lg{display:flex;gap:10px;align-items:center;color:#fff;font-weight:700;font-size:15px;margin-bottom:12px}
footer .lg i{background:var(--pri);font-style:normal;font-size:12px;font-weight:800;border-radius:8px;width:32px;height:32px;display:grid;place-items:center}
footer p{margin:0 0 12px;line-height:1.6}footer b{color:#fff}.dim{color:#5d6f8f;font-size:11px}
.fb2{border-top:1px solid #16213a;margin-top:28px;padding:20px 0 24px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;color:#5d6f8f}
.fb2 a{color:#8fa3c4;transition:color .2s}.fb2 a:hover{color:#fff}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

.tg{border:1px solid var(--line);background:var(--bg);color:var(--ink);width:34px;height:34px;border-radius:8px;cursor:pointer;font-size:15px;transition:transform .3s,background .2s}.tg:hover{background:var(--tint);transform:rotate(25deg)}
.vband{background:#0b1426;color:#fff;border-radius:16px;padding:22px;margin:26px 0}
.vh{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.vh small{color:#f87171;font-weight:800;font-size:10px;letter-spacing:.05em}.vh h2{margin:4px 0 0;font-size:18px}
.btn.red{background:#dc2626}.btn.red:hover{background:#b91c1c}.btn.dk{background:#0b1220}.btn.dk:hover{background:#000}
.vg{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}@media(max-width:700px){.vg{grid-template-columns:1fr}}
.vc{background:#121c33;border:1px solid #1f2d4a;border-radius:12px;padding:10px;display:block;transition:transform .25s,border-color .25s}.vc:hover{transform:translateY(-4px);border-color:#ef4444}
.vim{height:110px;border-radius:8px;position:relative;overflow:hidden;margin-bottom:10px}.vim .bd{position:absolute;right:8px;bottom:8px}
.pb{position:absolute;inset:0;margin:auto;width:40px;height:28px;background:#dc2626cc;border-radius:8px;display:grid;place-items:center;font-size:12px;transition:transform .25s}.vc:hover .pb{transform:scale(1.2)}
.vc small{color:#60a5fa;font-weight:800;font-size:9.5px}.vc b{display:block;font-size:12.5px;line-height:1.35;margin-top:2px}.vc:hover b{color:#f87171}
.cb{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:0 0 6px}@media(max-width:700px){.cb{grid-template-columns:1fr}}
.cbk{padding:16px}.cbh{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.cbh h3{margin:0;font-size:14px}.cbh a{color:var(--pri);font-size:11.5px;font-weight:700}
.mini{display:block;border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin-bottom:10px;transition:border-color .2s,background .2s,transform .2s}.mini:hover{border-color:var(--pri);background:var(--tint);transform:translateX(3px)}
.mini b{display:block;font-size:12.5px;line-height:1.35;margin:2px 0}.mini:hover b{color:var(--pri)}.mm{font-size:10.5px;color:var(--mut)}
.news{background:linear-gradient(120deg,#1d4ed8,#2563eb);color:#fff;border-radius:16px;padding:28px;margin:22px 0 0}.news h2{font-size:21px;line-height:1.25;margin:10px 0 8px;max-width:520px}.news p{max-width:520px;margin:0 0 16px;opacity:.9;font-size:12.5px}
.nf{display:flex;gap:10px;flex-wrap:wrap;max-width:560px}.nf input{flex:1;min-width:200px;border:0;border-radius:8px;padding:11px 14px;font:12.5px inherit;font-family:inherit;color:#0b1220}.nf input:focus{outline:3px solid #ffffff66}.nf .btn{padding:11px 18px}
#nm{margin-top:10px;font-size:12px;min-height:16px}
html{scroll-behavior:smooth}
.fi .bds{position:absolute}

/* ===== centered narrower layout ===== */
:root{--gut:clamp(16px,4.5vw,40px);--max:960px}
.bar,main,.fw{max-width:calc(var(--max) + 2*var(--gut));padding-left:var(--gut);padding-right:var(--gut)}
.top{padding-left:var(--gut);padding-right:var(--gut)}
.top>span:first-child{max-width:var(--max)}
.mb{display:none}
.logo{flex:none}
nav{flex:1}
.hero{grid-template-columns:1.9fr 1fr}
@media(min-width:1500px){:root{--max:1000px}}

/* ===== tablet ===== */
@media(max-width:860px){
 .bar{gap:10px 8px}
 .logo{margin-right:auto}
 .mb{display:grid;gap:4px;align-content:center;justify-items:center;width:38px;height:38px;border:1px solid var(--line);background:var(--bg);border-radius:9px;cursor:pointer;padding:0}
 .mb span{display:block;width:16px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,opacity .2s}
 .mb[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 .mb[aria-expanded=true] span:nth-child(2){opacity:0}
 .mb[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
 .tg{width:38px;height:38px}
 nav{order:5;flex:0 0 100%;display:none;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px;margin-top:2px}
 nav.open{display:flex;animation:rise .25s both}
 nav a{padding:12px 14px;font-size:14px;border-radius:9px}
 .search{order:6;flex:0 0 100%;width:100%!important;font-size:14px;padding:10px 14px}
 .hero{grid-template-columns:1fr}
 .side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.side h3{grid-column:1/-1;margin-bottom:0}.sc{margin:0}
 .art{grid-template-columns:1fr}.toc{display:none}
}

/* ===== phones ===== */
@media(max-width:600px){
 body{font-size:13.5px}
 .top{font-size:10.5px;padding-top:6px;padding-bottom:6px}.top>span:first-child{display:none}.top{justify-content:flex-end}
 main{padding-top:14px;padding-bottom:28px}
 .strip{flex-direction:column;gap:4px;font-size:11px}
 .fi{height:210px;padding:16px}.fi h1{font-size:18px}.fb{padding:14px 16px}
 .fb .meta{flex-direction:column;align-items:stretch;gap:12px}.fb .meta .btn{text-align:center;padding:11px}
 .side{grid-template-columns:1fr}
 .grid,.vg,.cb{grid-template-columns:1fr}
 .g .im{height:130px}
 .g:hover,a.card:hover,.vc:hover,.step:hover,.mini:hover{transform:none}
 .vband{padding:16px;border-radius:14px;margin:20px 0}.vh h2{font-size:16px}.vh .btn{width:100%;text-align:center}
 .news{padding:20px;border-radius:14px}.news h2{font-size:18px}
 .nf{flex-direction:column}.nf input{font-size:16px;min-width:0;width:100%}.nf .btn{width:100%;padding:13px}
 .ab{padding:18px 14px;border-radius:12px}.ab h1{font-size:20px}.ab h2{font-size:16px;margin-top:24px}
 .step{padding:12px;gap:10px}
 pre{font-size:11px;padding:12px}
 th,td{padding:8px 10px;font-size:11.5px}
 .fg{grid-template-columns:1fr 1fr;gap:22px 16px}.fg>div:first-child{grid-column:1/-1}
 .fb2{flex-direction:column;gap:8px;text-align:center;align-items:center}
 .about{padding:20px 16px}
 .btn,.mini,.sc,nav a,footer .fl{min-height:40px}
}
@media(max-width:380px){.fg{grid-template-columns:1fr}}
@media(hover:none){a.card:hover,.g:hover{transform:none;box-shadow:none}.g:hover .im:before{transform:translateX(-120%)}}