/* the class card at the bottom right (classfloat.py, class-float.js): tall, about a fifth of a phone screen */
.clf{position:fixed;right:12px;bottom:calc(16px + var(--clf-lift,0px));z-index:80;width:184px;border-radius:22px;
  background:#2f5d34;color:#fff;text-align:center;box-shadow:0 6px 24px rgba(47,93,52,.25);animation:clf-in .4s ease}
.clf *{letter-spacing:normal;text-transform:none}
.clf[hidden],.nlp-on .clf{display:none}
.clf-a{display:block;padding:22px 16px 20px;color:#fff;text-decoration:none}
.clf-img{display:block;width:64px;height:64px;margin:0 auto 12px;border-radius:50%;object-fit:cover;object-position:center 25%;
  border:2px solid #e7f1f7}
.clf-h{display:block;text-wrap:balance;font-size:21px;font-weight:450;line-height:1.25}
.clf-h[hidden]{display:none}
.clf-d{display:block;margin-top:10px;font-size:12px;line-height:1.6;opacity:.88}
.clf .clf-c{display:block;margin-top:14px;padding:9px 0;border-radius:999px;background:#e7f1f7;color:#2f5d34;
  font-size:13px;letter-spacing:.04em}
.clf-x{position:absolute;top:4px;right:4px;z-index:1;width:36px;height:36px;border:0;background:none;color:#fff;font-size:18px;
  line-height:1;cursor:pointer}
@keyframes clf-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.clf{animation:none}}