/* Layout idea: violet brand header like the landing page, then a calm light reading page with a sticky contents list beside one paper column. */
:root{
  --brand:#2a1a78;
  --brand-2:#3a2594;
  --bg:#eef1f7;
  --paper:#ffffff;
  --text:#172036;
  --muted:#59627a;
  --accent:#4b3fd6;
  --tint:#e9e7ff;
  --yellow:#ffc93c;
  --line:rgba(23,32,54,.12);
  --display:'Fredoka','Trebuchet MS',system-ui,sans-serif;
  --body:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.65 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
svg{display:block}
.wrap{width:min(1120px,100% - 40px);margin-inline:auto}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}

.top{background:radial-gradient(700px 360px at 92% -10%,rgba(255,201,60,.22),transparent 62%),radial-gradient(600px 360px at -5% 110%,rgba(255,107,170,.22),transparent 60%),var(--brand);color:#f6f3ff}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 0}
.logo{display:flex;align-items:center;gap:10px;font:600 26px/1 var(--display);color:#f6f3ff;text-decoration:none}
.logo svg{width:38px;height:38px}
.nav nav{display:flex;gap:22px;font-weight:500}
.nav nav a{color:#cbc2ff;text-decoration:none}
.nav nav a:hover,.nav nav a[aria-current]{color:#fff}
.nav nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:8px}
.title{padding:36px 0 64px}
.title h1{font-size:clamp(38px,5.4vw,60px)}
.title p{margin:12px 0 0;color:#cbc2ff;font-size:17px}

.draft{display:flex;gap:12px;align-items:flex-start;margin:-28px 0 28px;padding:16px 20px;border-radius:18px;background:#fff7dc;border:1.5px solid #e8c25a;color:#4a3700;font-size:15.5px;position:relative}
.draft b{font-weight:700}
.todo{background:#fff1bd;border-bottom:2px dashed #c9951a;border-radius:4px;padding:0 4px;color:#4a3700;font-weight:500}

.page{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start;padding-bottom:80px}
.toc{position:sticky;top:20px;font-size:15px}
.toc b{display:block;font:600 16px/1 var(--display);margin-bottom:12px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;counter-reset:t}
.toc a{display:flex;gap:10px;padding:7px 10px;border-radius:10px;color:var(--muted);text-decoration:none;line-height:1.3}
.toc a::before{counter-increment:t;content:counter(t);font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700;min-width:1.2em}
.toc a:hover{background:var(--paper);color:var(--text)}
@media(max-width:860px){.page{grid-template-columns:1fr;gap:24px}.toc{position:static;background:var(--paper);border-radius:20px;padding:18px;border:1px solid var(--line)}}

article{background:var(--paper);border-radius:28px;border:1px solid var(--line);padding:clamp(24px,4vw,48px);box-shadow:0 1px 2px rgba(23,32,54,.06)}
article section{max-width:66ch;scroll-margin-top:20px}
article section+section{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
article h2{font-size:28px;margin-bottom:14px;display:flex;gap:12px;align-items:baseline}
article h2 .n{font:700 15px/1 var(--body);color:var(--accent);background:var(--tint);border-radius:99px;padding:6px 10px;flex:none;transform:translateY(-3px)}
article h3{font-size:20px;margin:24px 0 8px}
article p{margin:0 0 14px;text-wrap:pretty}
article ul{margin:0 0 14px;padding-left:22px}
article li{margin:6px 0}
article li::marker{color:var(--accent)}

.short{background:var(--tint);border-radius:22px;padding:24px 26px;max-width:66ch;margin-bottom:44px}
.short h2{font-size:24px;margin-bottom:12px}
.short ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.short li{display:flex;gap:12px;margin:0}
.short svg{width:22px;height:22px;flex:none;margin-top:3px;color:#0f6b41}

.tbl{overflow-x:auto;margin:8px 0 18px;border:1px solid var(--line);border-radius:16px}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15.5px;line-height:1.5}
th,td{text-align:left;vertical-align:top;padding:12px 14px;border-top:1px solid var(--line)}
thead th{border-top:0;background:#f5f6fb;font:600 15px/1.3 var(--display)}
td:first-child{font-weight:700;width:26%}

.never{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 16px;padding:0;list-style:none}
.never li{margin:0;font:700 14px/1 var(--body);padding:9px 12px;border-radius:99px;background:#fdecec;color:#8a1c1c}

footer{border-top:1px solid var(--line);padding:32px 0 48px;color:var(--muted);font-size:15px}
.foot{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot a{color:var(--muted)}