/* ---- Mr. Fluff: the layer, his bubble, the loading line. Shared by both pages. ---- */
#fluff { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.fluff-bubble {
  position: fixed; z-index: 5; transform: translate(-50%, -100%); pointer-events: none;
  max-width: 230px; padding: 9px 13px; border-radius: 14px; background: #f4ecdc; color: #1b2650;
  font: 600 17px/1.25 'Caveat', 'Segoe Script', cursive; text-align: center; box-shadow: 0 8px 26px rgba(0, 0, 0, .35);
  opacity: 0; transition: opacity .2s;
}
.fluff-bubble::after { content: ''; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; background: #f4ecdc; transform: translateX(-50%) rotate(45deg); border-radius: 2px; }
.fluff-bubble.show { opacity: 1; }
.fluff-loading {
  position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 5; margin: 0; pointer-events: none;
  font: 400 15px/1 'Cormorant Garamond', Georgia, serif; font-style: italic; color: #8b92a8; opacity: .85; white-space: nowrap;
}