:root{--bg:#0b1220;--t:#fff;--m:rgba(255,255,255,.7);--b:rgba(255,255,255,.14);--s:rgba(255,255,255,.08);--r:16px}

*{box-sizing:border-box}body{margin:0;font-family:system-ui,Arial;background:radial-gradient(1000px 600px at 15% 5%,rgba(59,130,246,.35),transparent 60%),radial-gradient(800px 500px at 85% 20%,rgba(34,197,94,.25),transparent 55%),var(--bg);color:var(--t)}

.c{max-width:1050px;margin:auto;padding:22px 14px 44px;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}

.h{grid-column:1/-1;border:1px solid var(--b);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));border-radius:var(--r);padding:14px}

h1{margin:0 0 6px;font-size:clamp(1.4rem,3.2vw,2.2rem);letter-spacing:-.02em}p{margin:0;color:var(--m);line-height:1.5}code{background:rgba(255,255,255,.10);padding:2px 6px;border:1px solid var(--b);border-radius:10px}

.p{border:1px solid var(--b);background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.06));border-radius:var(--r);overflow:hidden}

.p h2{margin:0;padding:12px 14px;border-bottom:1px solid var(--b);display:flex;justify-content:space-between;align-items:baseline;font-size:1.05rem}

.p h2 span{color:var(--m);font-weight:700}

ul{list-style:none;margin:0;padding:12px;display:grid;gap:10px}

a{display:flex;justify-content:space-between;gap:12px;padding:12px;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(0,0,0,.18);color:inherit;text-decoration:none;transition:.15s}

a:hover{transform:translateY(-2px);background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}

b{font-size:.98rem}i{font-style:normal;color:var(--m);font-size:.88rem}

.off{opacity:.6;cursor:not-allowed}a:focus{outline:3px solid rgba(255,255,255,.7);outline-offset:3px}