:root{--cream:#FFF4E2;--ink:#21063D;--ink-2:#4A3566;--purple:#360B60;--yellow:#FFC400;--white:#FFF;--line:rgba(33,6,61,.14);
--display:"Fredoka","Nunito","Segoe UI",system-ui,sans-serif;--body:"Nunito","Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--body)}
.nav{position:sticky;top:0;background:rgba(255,244,226,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.wrap{max-width:760px;margin:0 auto;padding-inline:20px}
.logo{font:700 1.5rem var(--display);text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:.4em}
.logo i{width:.75em;height:.75em;border-radius:50%;background:var(--yellow);box-shadow:-.45em .3em 0 -.1em #00D67F}
.nav a.back{font:700 .9rem var(--body);color:var(--ink-2);text-decoration:none}
main{padding-block:48px 80px}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,5vw,3rem)}
h2{font-size:1.45rem;margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--line)}
h3{font-size:1.1rem;margin-top:1.6em}
p,li{color:var(--ink);margin:.7em 0}
.meta{color:var(--ink-2);font-size:.95rem;margin:.6em 0 1.5em}
.box{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin:1.2em 0}
.box.key{border-color:var(--ink);border-width:2px}
.box p{margin:.35em 0}
table{border-collapse:collapse;width:100%;font-size:.95rem;margin:1em 0}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font:700 .8rem var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2)}
.tbl{overflow-x:auto}
a{color:var(--purple)}
.toc{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:16px 22px;columns:2;column-gap:24px;font-size:.95rem}
.toc a{display:block;text-decoration:none;padding:.2em 0;break-inside:avoid}
@media(max-width:600px){.toc{columns:1}}
mark{background:var(--yellow);padding:0 .25em;border-radius:4px}
footer{border-top:1px solid var(--line);padding-block:28px;font-size:.85rem;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}