.fpd-dialog {
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 28px;
  padding: 0;
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: min(92dvh, 900px);
  color: #153c32;
  background: #fffdf4;
  box-shadow: 0 24px 90px rgba(8, 32, 26, .3);
  font-family: inherit;
  overscroll-behavior: contain;
}
.fpd-dialog::backdrop { background: rgba(12, 35, 29, .65); backdrop-filter: blur(7px); }
.fpd-dialog *, .fpd-dialog *::before, .fpd-dialog *::after { box-sizing: border-box; }
.fpd-dialog [hidden] { display: none !important; }
.fpd-dialog button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fpd-dialog button:focus-visible { outline: 3px solid #2166a9; outline-offset: 4px; }
.fpd-dialog h2:focus { outline: none; }
.fpd-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 24px 0; }
.fpd-kicker { color: #557063; background: #e9efe1; padding: 7px 12px; border-radius: 99px; font-size: 12px; font-weight: 800; letter-spacing: .035em; }
.fpd-close { flex-shrink: 0; display: grid; place-items: center; border: 1px solid #cdd9cc; background: #fffdf4; width: 44px; height: 44px; border-radius: 50%; color: #153c32; font-size: 30px !important; line-height: 1; }
.fpd-close:hover { background: #edf2e6; }
.fpd-content { padding: 26px 32px 24px; }
.fpd-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.4; color: #5c7266; }
.fpd-progress-copy strong { white-space: nowrap; }
.fpd-progress { height: 7px; background: #e5eadc; border-radius: 20px; overflow: hidden; margin: 10px 0 27px; }
.fpd-progress span { display: block; height: 100%; background: #58a765; border-radius: inherit; transition: width .25s ease; }
.fpd-dialog h2 { font-family: var(--font-display, 'Chillax'), sans-serif; font-size: 28px; line-height: 1.2; letter-spacing: -.035em; margin: 0; }
.fpd-expression { margin-top: 24px; padding: 26px 14px; border: 1px solid #e1e8d9; border-radius: 20px; background: #f0f4e5; text-align: center; font-size: 43px; font-weight: 800; line-height: 1.1; letter-spacing: -.04em; }
.fpd-instruction { margin: 20px 0 13px; font-size: 14px; line-height: 1.5; color: #617063; }
.fpd-answers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.fpd-answer { min-height: 68px; padding: 12px; border: 2px solid #cdd9cc; border-radius: 16px; color: #153c32; background: white; font-size: 26px !important; font-weight: 800 !important; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.fpd-answer:hover:not(:disabled) { transform: translateY(-2px); border-color: #527b5b; background: #f3f7e9; }
.fpd-answer.fpd-try-again { border-color: #c79842; background: #fff4ce; }
.fpd-answer:disabled { opacity: .55; cursor: default; }
.fpd-answer.fpd-correct { border-color: #438550; background: #dcefcf; opacity: 1; }
.fpd-feedback { min-height: 42px; margin: 18px 0 12px; font-size: 14px; line-height: 1.5; color: #756039; }
.fpd-feedback.fpd-success { color: #2e713d; font-weight: 750; }
.fpd-primary { min-height: 54px; width: 100%; display: block; padding: 13px 20px; border: 1px solid #c94436; border-bottom-width: 4px; border-radius: 15px; background: #ef5544; color: white; font-weight: 800 !important; font-size: 19px !important; line-height: 1.35; box-shadow: 0 7px 18px #d65f3919; transition: background .15s ease, transform .15s ease; }
.fpd-primary:hover { background: #df4938; transform: translateY(-1px); }
.fpd-primary:active { transform: translateY(2px); }
.fpd-footnote { text-align: center; margin: 19px 0 0; font-size: 12px; color: #64766a; }
.fpd-result { text-align: center; }
.fpd-completed { display: inline-block; color: #3c784a; font-size: 12px; font-weight: 800; margin: 0 0 12px; }
.fpd-result h2 { font-size: 36px; }
.fpd-result-intro { margin: 12px 0 19px; color: #5a7063; line-height: 1.5; font-size: 15px; }
.fpd-card { margin: 0 auto; width: 176px; }
.fpd-card img { display: block; width: 100%; height: auto; border-radius: 13px; box-shadow: 0 13px 25px #244c3530; }
.fpd-card figcaption { display: flex; flex-direction: column; gap: 3px; font-size: 14px; margin-top: 13px; line-height: 1.3; }
.fpd-card figcaption span { font-size: 12px; color: #64766a; }
.fpd-demo-disclaimer { max-width: 330px; margin: 18px auto 20px; font-size: 12px; line-height: 1.5; color: #63776a; }
.fpd-restart { min-height: 44px; border: 0; background: transparent; color: #3f6654; text-decoration: underline; text-underline-offset: 4px; font-size: 13px !important; margin-top: 7px; }
@media(max-width: 480px) {
  .fpd-dialog { width: calc(100vw - 24px); border-radius: 22px; max-height: calc(100dvh - 24px); }
  .fpd-header { padding: 14px 16px 0; }
  .fpd-content { padding: 23px 20px 20px; }
  .fpd-dialog h2 { font-size: 25px; }
  .fpd-expression { font-size: 39px; padding: 24px 10px; }
  .fpd-answers { gap: 9px; }
  .fpd-answer { min-height: 64px; padding: 9px; }
  .fpd-feedback { min-height: 63px; }
  .fpd-result h2 { font-size: 31px; }
  .fpd-result-intro { font-size: 14px; margin-bottom: 16px; }
  .fpd-card { width: 152px; }
}
@media(prefers-reduced-motion: reduce) {
  .fpd-dialog *, .fpd-dialog *::before, .fpd-dialog *::after { transition: none !important; animation: none !important; }
}