.dk-help {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 1040;
  width: 308px;
  color: #073d78;
  font-family: var(--font-ui);
}
.dk-help:not([hidden]) .dk-help-toggle {
  animation: dk-help-button-in 650ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dk-help:not([hidden]) .dk-help-card:not([hidden]) {
  transform-origin: bottom right;
  animation: dk-help-unfold 750ms 350ms cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dk-help:not([hidden]) .dk-help-prompt {
  animation: dk-help-prompt-in 450ms 950ms ease-out both;
}
@keyframes dk-help-button-in {
  0% { opacity: 0; transform: translateY(36px) scale(0.4) rotate(-25deg); }
  55% { opacity: 1; transform: translateY(-8px) scale(1.1) rotate(8deg); }
  78% { transform: translateY(3px) scale(0.96) rotate(-3deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes dk-help-unfold {
  0% { opacity: 0; transform: translateY(28px) scale(0.25) rotate(6deg); }
  65% { opacity: 1; transform: translateY(-4px) scale(1.025) rotate(-0.6deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}
@keyframes dk-help-prompt-in {
  from { opacity: 0; transform: translateX(12px) rotate(-8deg); }
  to { opacity: 1; transform: translateX(0) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .dk-help:not([hidden]) .dk-help-toggle,
  .dk-help:not([hidden]) .dk-help-card:not([hidden]),
  .dk-help:not([hidden]) .dk-help-prompt { animation: none; }
}
.dk-help-card {
  position: relative;
  padding: 20px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 36px #073d7830;
  max-height: calc(100dvh - 132px);
  overflow-y: auto;
}
.dk-help-card[hidden] { display: none; }
.dk-help-close {
  position: absolute;
  top: 6px;
  right: 10px;
  border: 0;
  background: transparent;
  color: #4178ac;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.dk-help-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.dk-help-heading img { width: 138px; height: 138px; object-fit: cover; object-position: center top; border-radius: 50%; }
.dk-help-handwriting { color: #006ba6; font: italic 30px/1.1 "Segoe Print", cursive; transform: rotate(-8deg); border-bottom: 3px solid #006ba6; padding-bottom: 8px; }
.dk-help-card h2 { font-size: 20px; line-height: 1.3; font-weight: 700; margin: 0 0 6px; }
.dk-help-card p { font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
.dk-help-card .dk-help-direct { font-size: 16px; font-weight: 700; }
.dk-help-direct a { color: #0097f5; font-size: 30px; text-decoration: none; white-space: nowrap; }
.dk-help-call { display: flex; justify-content: center; align-items: center; gap: 14px; border-radius: 24px; padding: 10px 8px; background: #009ff3; color: white; font-size: 14px; font-weight: 700; text-decoration: none; }
.dk-help-call:hover { background: #007dcc; color: white; }
.dk-help-call > span[aria-hidden] { font-size: 26px; line-height: 1; }
.dk-help-launcher { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-top: 30px; }
.dk-help-prompt { color: #fff; font: italic 20px/1.2 "Segoe Print", cursive; text-shadow: 0 1px 4px #073d78; transform: rotate(-8deg); }
.dk-help-toggle { display: grid; place-items: center; width: 72px; height: 72px; border: 0; border-radius: 50%; background: #0097f5; color: white; font-size: 42px; cursor: pointer; box-shadow: 0 4px 18px #073d7826; }
.dk-help button:focus-visible, .dk-help a:focus-visible { outline: 3px solid #073d78; outline-offset: 4px; }
@media (max-width: 600px) {
  .dk-help { right: 12px; bottom: 12px; width: min(308px, calc(100vw - 24px)); }
  .dk-help-launcher { margin-top: 14px; }
  .dk-help-toggle { width: 56px; height: 56px; font-size: 32px; }
  .dk-help-card { max-height: calc(100dvh - 100px); }
  .dk-help-heading img { width: 100px; height: 100px; }
}