article > p .qbtn {
  opacity:.4; transition:opacity .15s;
  border-right: none;
  border-radius:.4rem;
}
article > p:hover .qbtn { opacity:1; }

article > p.is-quoted .qbtn,
article > p:hover .qbtn {
  border-radius:.4rem 0 0 .4rem;
}
article > p .qbtn,
article > p.is-quoted .qbtn::after,
article > p:hover .qbtn::after {
  color: var(--fg2);
  background: var(--bg2);
  border:1px solid var(--border);
  vertical-align: text-bottom;
  padding:.25rem .35rem;
  margin-left: 1ch;
  cursor:pointer;
}
article > p:hover .qbtn::after,
article > p.is-quoted .qbtn::after {
  position: absolute;
  margin-top: calc(-.25rem + -1px);
  content: attr(data-paragraph);
  font-variant-numeric: tabular-nums;
  margin-left: .35rem;
  border-radius: 0 .4rem .4rem 0;
  border-left: none;
}
article > p.is-quoted .qbtn,
article > p.is-quoted .qbtn::after {
  background-color: var(--accent);
  color: var(--accent-fg);
}
article > p.is-quoted {
  position: relative;
  isolation: isolate;
}

article > p.is-quoted::before {
  content: "";
  position: absolute;
  inset: -1rem;
  background: var(--shade-hard);
  box-shadow: inset 0 0 1rem .25rem var(--border);
  z-index: -1;
  pointer-events: none;
}

.tooltip {
  position:fixed; inset:auto 1rem 1rem auto;
  padding:.5rem .65rem;
  border:1px solid var(--border);
  border-radius:.5rem;
  color: var(--fg2);
  background:var(--bg2);
  box-shadow:0 4px 24px var(--sh);
  transform:translateY(8px); opacity:0; pointer-events:none;
  transition:transform .18s, opacity .18s;
}
.tooltip.show { transform:translateY(0); opacity:1; }
.visually-hidden{
  position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}