:root{
  --purple:#B197FC; --purple-dark:#5C3FD6;
  --green:#69DB7C; --yellow:#FFD43B; --red:#FF6B6B;
  --paper:#FFF9F2; --card:#FFFFFF; --card2:#EDE8F5;
  --ink:#2B2640; --ink-soft:#5C5378; --ink-faint:#A09BB8;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Baloo 2',sans-serif;background:var(--paper);color:var(--ink);font-weight:500;line-height:1.65}
h1,h2,h3,.fredoka{font-family:'Fredoka',sans-serif}
a{color:var(--purple-dark)}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}

.l-top{position:sticky;top:0;z-index:10;display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:rgba(255,249,242,.9);backdrop-filter:blur(8px);border-bottom:1px solid rgba(43,38,64,.07)}
.l-top a.brand img{height:30px;width:auto}
.l-top .back{font-weight:700;font-size:.95rem;color:var(--ink-soft);text-decoration:none}
.l-top .back:hover{color:var(--ink)}

.l-wrap{max-width:760px;margin:0 auto;padding:48px 24px 80px}
.l-wrap h1{font-size:clamp(1.9rem,5vw,2.6rem);font-weight:700;line-height:1.1;margin-bottom:8px}
.l-updated{color:var(--ink-faint);font-weight:700;font-size:.92rem;margin-bottom:28px}

.draft-banner{background:#FFF4D6;border:2px solid var(--yellow);border-radius:16px;padding:16px 20px;margin-bottom:32px;
  color:#7a5b00;font-weight:600;font-size:.95rem}
.draft-banner b{color:#5a4300}

.l-wrap h2{font-size:1.4rem;font-weight:700;margin:34px 0 10px;color:var(--ink)}
.l-wrap h3{font-size:1.12rem;font-weight:700;margin:22px 0 8px;color:var(--ink)}
.l-wrap p{color:var(--ink-soft);margin-bottom:14px;font-size:1.02rem}
.l-wrap ul,.l-wrap ol{color:var(--ink-soft);margin:0 0 16px 0;padding-left:26px}
.l-wrap li{margin-bottom:8px;font-size:1.02rem}
.l-wrap strong{color:var(--ink)}
.fill{background:var(--card2);color:var(--purple-dark);font-weight:700;padding:1px 8px;border-radius:6px;font-size:.94em}
.l-wrap .lead{font-size:1.1rem;color:var(--ink);font-weight:600;margin-bottom:22px}

.l-toc{background:var(--card);border:2px solid rgba(43,38,64,.08);border-radius:18px;padding:20px 24px;margin-bottom:32px}
.l-toc h2{margin:0 0 10px;font-size:1.05rem}
.l-toc ol{margin:0;padding-left:22px}
.l-toc li{margin-bottom:5px;font-size:.98rem}

.l-foot{border-top:1px solid rgba(43,38,64,.1);padding:30px 24px 50px;text-align:center;color:var(--ink-faint);font-weight:700;font-size:.9rem}
.l-foot .mini{display:flex;gap:16px;justify-content:center;margin-bottom:12px;flex-wrap:wrap}
.l-foot .mini a{color:var(--ink-soft);text-decoration:none}
.l-foot .mini a:hover{color:var(--ink)}
.l-foot .socials{display:flex;gap:12px;justify-content:center;margin:6px 0 14px}
.l-foot .socials a{width:36px;height:36px;border-radius:50%;background:var(--card2);display:grid;place-items:center;color:var(--purple-dark);transition:.2s}
.l-foot .socials a:hover{background:var(--purple-dark);color:#fff;transform:translateY(-3px)}
.l-foot .socials svg{width:18px;height:18px;fill:currentColor}
.l-foot .entity{display:block;margin-top:6px;font-size:.82rem;color:var(--ink-faint);font-weight:600}