/* Sponsor: a pink pill led by the author's face, and the dialog it opens.
   Colours follow the page's used color-scheme: the landing is dark, the family pages
   are light, and the comparison page follows the system. */
.sp-pill,.sp-dialog{
  --sp-ink:light-dark(#c2185b,#ffb3cd);--sp-heart:light-dark(#ff4f88,#ff7aa6);
  --sp-line:light-dark(#ffc2d6,#6b2c47);--sp-soft:light-dark(#fff1f5,#2f1822);--sp-ring:light-dark(#fff,#3d1a2b);
  --sp-grad-a:light-dark(#ffe6ef,#3d1a2b);--sp-grad-b:light-dark(#fff0e0,#3a2318);
  --sp-surface:light-dark(#fff,#10241b);--sp-text:light-dark(#202721,#f4f7f1);--sp-muted:light-dark(#5b665e,#a9bdb0);
  --sp-border:light-dark(#d8dfd6,#2f4a3d);--sp-hover:light-dark(#eff4eb,#1a3226);--sp-halo:light-dark(#ffd9e5,#4a1e31);
  box-sizing:border-box;font-family:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;letter-spacing:0;text-transform:none
}
.sp-pill *,.sp-dialog *{box-sizing:border-box}
.sp-pill{display:inline-flex;flex:none;align-items:center;gap:9px;height:38px;margin:0;padding-block:0;padding-inline:6px 15px;border:1px solid var(--sp-line);border-radius:999px;background:linear-gradient(135deg,var(--sp-grad-a),var(--sp-grad-b));color:var(--sp-ink);font-size:13px;font-weight:700;line-height:1;white-space:nowrap;cursor:pointer;box-shadow:0 1px 2px rgb(194 24 91/.12)}
.sp-pill:hover{color:var(--sp-ink)}
.sp-pill:focus-visible,.sp-close:focus-visible,.sp-tip:focus-visible,.sp-company:focus-visible{outline:2px solid var(--sp-ink);outline-offset:2px}
.sp-face{position:relative;flex:none;width:26px;height:26px}
.sp-face img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--sp-ring),0 0 0 2.5px var(--sp-line)}
.sp-face svg{position:absolute;inset-inline-end:-4px;bottom:-3px;width:12px;height:12px;fill:var(--sp-heart);stroke:var(--sp-ring);stroke-width:2.5;paint-order:stroke;overflow:visible;transform-origin:50% 60%}
.sp-end{display:flex;align-items:center;gap:16px}
@media(max-width:1120px){.site-header>.sp-pill{width:38px;padding:0;justify-content:center}.site-header>.sp-pill .sp-label{display:none}}
@media(max-width:760px){.site-header>.sp-pill{margin-inline-start:auto}}
.prompt .sp-pill{order:2}
@media(max-width:720px){.sp-pill{width:38px;padding:0;justify-content:center}.sp-label{display:none}}

.sp-dialog{width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--sp-border);border-radius:16px;background:var(--sp-surface);color:var(--sp-text);box-shadow:0 30px 90px rgb(0 0 0/.35);overflow:auto;font-size:14px;line-height:1.5;text-align:start}
.sp-dialog::backdrop{background:rgb(0 0 0/.45);backdrop-filter:blur(6px)}
.sp-dialog p,.sp-dialog h2,.sp-dialog h3,.sp-dialog ol{margin:0}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding-block:14px 0;padding-inline:24px 14px}
.sp-dialog h2{font:700 22px/1.2 Georgia,"Times New Roman",serif;letter-spacing:-.03em;color:var(--sp-text)}
.sp-close{display:grid;place-items:center;width:36px;height:36px;margin:0;padding:0;border:0;border-radius:50%;background:none;color:var(--sp-muted);cursor:pointer}
.sp-close:hover{background:var(--sp-hover);color:var(--sp-text)}
.sp-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.sp-sheet{display:flex;flex-direction:column;gap:14px;padding-block:4px 22px;padding-inline:24px}
.sp-hero{position:relative;display:grid;place-items:center;height:136px;background:radial-gradient(closest-side,var(--sp-halo),transparent)}
.sp-portrait{position:relative;width:112px;height:112px}
.sp-portrait img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--sp-surface),0 0 0 6px var(--sp-line),0 10px 24px rgb(255 79 136/.3)}
.sp-portrait svg{position:absolute;inset-inline-end:-2px;bottom:2px;width:34px;height:34px;fill:var(--sp-heart);stroke:var(--sp-surface);stroke-width:2;paint-order:stroke;overflow:visible;transform-origin:50% 60%;filter:drop-shadow(0 3px 6px rgb(255 79 136/.35))}
.sp-portrait ellipse{fill:#fff;stroke:none;opacity:.6}
.sp-spark{position:absolute;color:var(--sp-heart);opacity:.75}
.sp-s1{top:22px;inset-inline-start:calc(50% - 84px);font-size:14px}
.sp-s2{top:12px;inset-inline-start:calc(50% + 66px);font-size:10px}
.sp-s3{bottom:20px;inset-inline-start:calc(50% - 76px);font-size:11px}
.sp-lead{font-size:14px;line-height:1.65}
.sp-ask{font-size:14.5px;font-weight:700;line-height:1.5;color:var(--sp-ink)}
.sp-how{padding:12px 14px;border:1px dashed var(--sp-line);border-radius:14px;background:var(--sp-soft)}
.sp-how h3{margin-block-end:8px;font-family:inherit;font-size:12px;font-weight:700;line-height:1.3;color:var(--sp-ink)}
.sp-steps{display:flex;flex-direction:column;gap:6px;padding:0;list-style:none;counter-reset:sp-step}
.sp-steps li{display:flex;align-items:baseline;gap:8px;margin:0;padding:0;font-size:13px;line-height:1.45;counter-increment:sp-step}
.sp-steps li::before{content:counter(sp-step);display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--sp-ink);color:var(--sp-soft);font-size:11px;font-weight:700;line-height:1;transform:translateY(-1px)}
.sp-tips{display:flex;flex-direction:column;gap:10px}
.sp-dialog a.sp-tip,.sp-dialog a.sp-tip:hover{display:flex;align-items:center;gap:12px;padding-block:12px;padding-inline:12px 18px;border-radius:999px;color:#fff;text-decoration:none}
.sp-dialog a.sp-tip{box-shadow:0 6px 16px var(--tip-glow)}
.sp-dialog a.sp-tip:hover{box-shadow:0 8px 22px var(--tip-glow-hover)}
.sp-kofi{--tip-glow:rgb(32 32 32/.28);--tip-glow-hover:rgb(32 32 32/.38)}
.sp-dialog a.sp-kofi{border:1px solid light-dark(#202020,rgb(255 255 255/.2));background:#202020}
.sp-ofuse{--tip-glow:rgb(38 125 160/.3);--tip-glow-hover:rgb(38 125 160/.42)}
.sp-dialog a.sp-ofuse{border:1px solid #267da0;background:#267da0}
.sp-dialog .sp-mark{display:block;flex:none;width:38px;height:30px;object-fit:contain}
.sp-arrow,.sp-company svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sp-arrow{flex:none;width:18px;height:18px}
.sp-arrow:dir(rtl){transform:scaleX(-1)}
.sp-copy{display:flex;flex:1;flex-direction:column;gap:1px;min-width:0}
.sp-copy strong{font-size:13.5px}
.sp-copy small{font-size:12px;line-height:1.4}
.sp-tip .sp-copy strong{font-size:15px}
.sp-tip .sp-copy small{color:#fff}
.sp-dialog a.sp-company{display:flex;align-items:flex-start;gap:10px;padding:8px 12px;border-radius:12px;color:var(--sp-muted);text-decoration:none}
.sp-dialog a.sp-company:hover{background:var(--sp-hover);color:var(--sp-text)}
.sp-company svg{flex:none;width:16px;height:16px;margin-block-start:2px}
.sp-company .sp-copy strong{font-size:12.5px;color:var(--sp-text)}
.sp-thanks{font-size:12.5px;line-height:1.5;color:var(--sp-muted);text-align:center}

@media(prefers-reduced-motion:no-preference){
  .sp-pill{transition:transform .18s ease,box-shadow .18s ease}
  .sp-pill:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgb(255 79 136/.28)}
  .sp-face svg,.sp-portrait svg{animation:sp-beat 2.8s ease-in-out infinite}
  .sp-pill:hover .sp-face svg,.sp-pill:focus-visible .sp-face svg{animation:sp-bounce .6s ease-in-out infinite}
  .sp-spark{animation:sp-twinkle 2.4s ease-in-out infinite}
  .sp-s2{animation-delay:.8s}
  .sp-s3{animation-delay:1.6s}
  .sp-dialog[open]{animation:sp-arrive .32s cubic-bezier(.2,.8,.2,1)}
  .sp-tip{transition:transform .18s ease,box-shadow .18s ease}
  .sp-tip:hover{transform:translateY(-1px)}
}
@keyframes sp-beat{0%,70%,100%{transform:scale(1)}78%{transform:scale(1.18)}86%{transform:scale(.96)}93%{transform:scale(1.1)}}
@keyframes sp-bounce{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-2px) scale(1.18) rotate(-8deg)}}
@keyframes sp-twinkle{0%,100%{opacity:.2;transform:scale(.7)}50%{opacity:.9;transform:scale(1)}}
@keyframes sp-arrive{from{opacity:0;transform:translateY(14px) scale(.98)}}