:root{
  --bg:#ffffff; --txt:#111111; --mut:#666666; --line:#e6e6e6; --card:#ffffff; --card2:#f5f5f5;
  --hg1:#7c5cff; --hg2:#ff5ca8;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#fff;color:var(--txt);
  font-family:"Inter","Tahoma","Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  line-height:1.7;-webkit-text-size-adjust:100%}
a{color:var(--hg1);text-decoration:none}
.wrap{max-width:760px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:50;-webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  background:rgba(255,255,255,.7);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;height:56px}
.brand{font-weight:800;font-size:19px;display:inline-flex;align-items:center;gap:8px;
  background:linear-gradient(90deg,var(--hg1),var(--hg2));-webkit-background-clip:text;background-clip:text;color:transparent}
main.wrap{padding-top:26px;padding-bottom:50px}
.breadcrumb{font-size:13px;color:var(--mut);margin-bottom:8px}
.breadcrumb a{color:var(--mut)}
h1{font-size:30px;line-height:1.25;margin:6px 0 8px}
.lead{color:var(--mut);font-size:16px;margin:0 0 22px}
article h2{font-size:21px;margin:30px 0 8px;color:var(--txt)}
article p{color:#2a2a2a;margin:0 0 16px}
.updated{font-size:12px;color:var(--mut);margin-top:30px;border-top:1px solid var(--line);padding-top:12px}
.rel{margin-top:24px;background:var(--card2);border:1px solid var(--line);border-radius:14px;padding:16px}
.rel h3{margin:0 0 8px;font-size:15px;color:var(--txt)}
.rel a{display:block;padding:6px 0;font-weight:600}
/* article index cards */
.cards{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
@media(min-width:680px){.cards{grid-template-columns:1fr 1fr}}
.card{display:block;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--card);
  box-shadow:0 4px 14px rgba(17,17,17,.05)}
.card h3{margin:0 0 6px;font-size:17px;color:var(--txt)}
.card p{margin:0;color:var(--mut);font-size:14px}
.card:hover{border-color:var(--hg1)}
footer{border-top:1px solid var(--line);padding:24px 0 40px;color:var(--mut);font-size:13px}
.flinks{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.flinks a{color:var(--mut)}