.sophie-template-link {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 30;
  padding: 8px 13px;
  border: 1px solid #252522;
  border-radius: 10px;
  background: #faf5eb;
  box-shadow: 0 2px 7px #2b251d29;
  color: #191713;
  font: 600 12px/1.25 system-ui, sans-serif;
  text-decoration: none;
  transition: translate .2s ease, background-color .2s ease;
}
.sophie-template-link:is(:hover, :focus-visible) {
  translate: 0 -2px;
  background: #d9c7f7;
}
.sophie-preview-dialog {
  width: min(420px, calc(100% - 36px));
  padding: 24px;
  border: 1px solid #2b251d;
  border-radius: 14px;
  background: #faf5eb;
  box-shadow: 0 12px 36px #2b251d40;
  color: #191713;
  font: 16px/1.5 system-ui, sans-serif;
}
.sophie-preview-dialog::backdrop { background: #251e1a60; }
.sophie-preview-dialog h2 { margin: 0 40px 6px 0; font-size: 21px; }
.sophie-preview-dialog p { margin: 0; }
.sophie-preview-dialog button {
  float: right;
  width: 34px;
  height: 34px;
  border: 1px solid #2b251d;
  border-radius: 50%;
  background: #d9c7f7;
  font: 23px/1 system-ui, sans-serif;
  cursor: pointer;
}
@media (max-width: 809.98px) {
  .sophie-template-link { bottom: auto; top: 5px; right: 8px; padding: 5px 9px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .sophie-template-link { transition: none; }
}