*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Google Sans','Heebo',Arial,sans-serif;background:#f1f2ff;color:#2f2a5c;line-height:1.7;font-size:18px}
a{color:#4a2fc4}

.lg-logo img{height:44px;display:block}
.lg-back{color:#fff;text-decoration:none;border:1.5px solid rgba(255,255,255,.55);padding:8px 20px;border-radius:99px;font-weight:500}
.lg-back:hover{background:rgba(255,255,255,.14)}
.lg-main{width:min(820px,calc(100% - 32px));margin:clamp(24px,5vw,56px) auto}
article{background:#fff;border-radius:28px;padding:clamp(24px,5vw,56px);box-shadow:0 30px 70px -40px rgba(54,34,121,.5)}
h1{font-size:clamp(30px,5vw,44px);color:#362279;line-height:1.2;margin-bottom:6px}
h2{font-size:clamp(20px,3vw,26px);color:#362279;margin:34px 0 8px}
p{margin:10px 0}
ul{margin:10px 0;padding-inline-start:22px}
li{margin:6px 0}
.lg-date{color:#7a76a3;font-size:15px}
.lg-draft{background:#fff4d6;border:1px solid #f0d78a;color:#6a5313;padding:12px 16px;border-radius:14px;font-size:15px;margin-bottom:20px}
.todo{background:#fff1a8;border-radius:6px;padding:0 6px;color:#5a4a00}
.lg-foot{text-align:center;padding:0 16px 40px;color:#6d68a0;font-size:15px}
.lg-foot a{color:inherit}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* same floating header as the main site */
body{padding-top:92px}
.lg-head{position:fixed;inset:14px 14px auto 14px;max-width:1280px;margin-inline:auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:10px clamp(16px,2.4vw,30px);border-radius:999px;color:#fff;
  background:rgba(32,19,76,.94);border:1px solid rgba(255,255,255,.1);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 18px 50px -22px rgba(20,8,60,.75)}
.lg-logo img{height:44px;width:auto;display:block}
.lg-nav{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px);margin-inline:auto}
.lg-nav a{color:rgba(255,255,255,.85);text-decoration:none;font-size:16px;font-weight:500;padding:6px 2px;position:relative;transition:color .3s}
.lg-nav a:hover{color:#fff}
.lg-nav a::after{content:"";position:absolute;inset:auto 0 0 0;height:2px;border-radius:2px;transform:scaleX(0);transition:transform .45s cubic-bezier(.22,.9,.24,1);
  background:linear-gradient(90deg,rgba(190,170,255,0),rgba(190,170,255,.9) 28%,#fff 50%,rgba(190,170,255,.9) 72%,rgba(190,170,255,0))}
.lg-nav a:hover::after{transform:scaleX(1)}
.lg-actions{display:flex;align-items:center;gap:12px}
.lg-home{display:none;color:#fff;text-decoration:none;font-weight:500;font-size:15px;border:1.5px solid rgba(255,255,255,.55);padding:7px 16px;border-radius:99px}
.lg-wa{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;border:1.5px solid rgba(255,255,255,.55);transition:background .3s,transform .4s}
.lg-wa svg{width:22px;height:22px}.lg-wa:hover{background:rgba(255,255,255,.16);transform:scale(1.08) rotate(-8deg)}
@media (max-width:900px){
  .lg-head{inset:10px 10px auto 10px;border-radius:26px;padding:8px 14px}
  .lg-nav{display:none}
  .lg-home{display:inline-block}
  .lg-logo img{height:38px}
  .lg-wa{width:40px;height:40px}
}
.lg-nav a::after{background:linear-gradient(90deg,#9f86f2,#d8a8f7)}