/* The stage is reserved before the artwork loads; the converter never shifts. */
.converter-dock:has(.coffee-scene) { position: relative; margin-top: 170px; }
.converter-dock { row-gap: 12px; padding-bottom: 10px; }
.converter-dock .convert-btn { min-height: 48px !important; height: 48px; }
.converter-dock .free-limit-notice {
  grid-column: 1 / -1; grid-row: 3; width: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; justify-content: center;
  gap: 4px 10px; flex-wrap: wrap; color: var(--muted); font-size: 11px;
}
.converter-dock .free-limit-copy { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px 6px; flex: 0 1 auto; }
.converter-dock .free-limit-copy strong { font-size: inherit; font-weight: 500; color: inherit; }
.converter-dock #btn-limit-upgrade { margin: 0; padding: 2px 0; min-height: 24px; font-size: 11px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.converter-dock #btn-limit-upgrade:hover { color: var(--primary); }
.converter-dock .conversion-options-content { grid-row: 4; }
@media (max-width: 1100px) {
  .converter-dock .free-limit-notice { grid-row: 5; }
  .converter-dock .conversion-options-content { grid-row: 6; }
}
.converter-coffee-scene { position: absolute; width: 390px; height: 165px; bottom: 100%; left: calc(50% - 195px); }
.coffee-stage {
  position: absolute; width: 230px; height: 166px; left: 0; bottom: -17px;
  pointer-events: none; user-select: none; z-index: 1;
}
.coffee-stage svg { display: block; width: 100%; height: 100%; overflow: visible; }
.coffee-scene .keep-free-button { position: absolute; right: 0; bottom: 15px; z-index: 2; width: auto; min-height: 42px; }
/* Avoid a first-paint flash while JS/artwork loads; fail open if JS is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  .coffee-scene:not([data-coffee-state]) .keep-free-button,
  .coffee-scene[data-coffee-state="pending"] .keep-free-button {
    visibility: hidden;
    animation: coffee-button-fallback 0s 10s forwards;
  }
  .coffee-scene[data-coffee-state="pending"] .coffee-stage { visibility: hidden; }
}
@keyframes coffee-button-fallback { to { visibility: visible; } }
@media (max-width: 640px) {
  .converter-dock:has(.coffee-scene) { margin-top: 145px; }
  .converter-coffee-scene { width: min(330px, 100%); height: 140px; left: 50%; transform: translateX(-50%); }
  .coffee-stage { width: 190px; height: 137px; left: -6px; bottom: -14px; }
  .coffee-scene .keep-free-button { font-size: 11px; padding: 0 10px; bottom: 13px; max-width: 165px; }
}