@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@500;700&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;color:#eee9f6;font:15px/1.55 "IBM Plex Sans",ui-sans-serif,system-ui,sans-serif}
body{
  background:
    radial-gradient(900px 480px at 8% -18%,rgba(124,92,191,.28),transparent 55%),
    radial-gradient(720px 380px at 100% 0%,rgba(192,38,211,.12),transparent 50%),
    #030308;
}
a{color:#b794f6;text-decoration:none}
a:hover{color:#e9d5ff}
header{
  position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(5,5,8,.72);backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:.28em;font-size:12px;color:#eee9f6}
.brand img{width:40px;height:40px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 0 14px rgba(192,38,211,.55))}
.links{display:flex;gap:8px}
.links a{
  border:1px solid rgba(255,255,255,.1);color:#8a8496;padding:6px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}
.links a.on{border-color:#7c5cbf;color:#fff;background:rgba(124,92,191,.22)}
main{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:48px 24px 88px}
.kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6a6478;margin-bottom:12px}
h1{
  font-size:clamp(32px,5vw,48px);font-weight:700;margin:0 0 12px;letter-spacing:-.04em;
  background:linear-gradient(90deg,#fff 10%,#d8b4fe 48%,#e879f9);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lead{color:#9a93a8;margin:0 0 28px;max-width:640px}
.card{
  border:1px solid rgba(139,108,201,.28);
  background:linear-gradient(180deg,rgba(124,92,191,.08),rgba(8,7,13,.94));
  padding:28px 28px 8px;border-radius:22px;animation:fadeUp .55s cubic-bezier(.22,1,.36,1) both;
}
.sec{margin:0 0 26px;padding:0 0 22px;border-bottom:1px solid rgba(255,255,255,.06)}
.sec:last-child{border:0}
.sec h2{margin:0 0 10px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:#c4b5fd}
.sec p,.sec li{color:#c5bed4;margin:0 0 10px}
.sec p:last-child,.sec ul:last-child{margin-bottom:0}
.sec ul{margin:0 0 10px;padding:0 0 0 18px}
.sec strong{color:#eee9f6}
.updated{color:#6a6478;font-size:12px;letter-spacing:.08em;margin-top:8px}
footer{margin-top:28px;color:#5c5866;font-size:12px;display:flex;gap:16px;flex-wrap:wrap}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:720px){header,main{padding-left:16px;padding-right:16px}.card{padding:20px 16px 8px}}