/*
 * Static-demo overrides.
 *
 * The live site reveals headings word by word once its JavaScript marks a
 * section as revealed. The demo ships without that runtime, so the words are
 * simply shown.
 */
.mask-word > span { transform: none !important; }

/* The "design preview" toast. */
.demo-toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tabbar-space, 0px) + 1.25rem);
  z-index: 200;
  transform: translate(-50%, 1rem);
  max-width: min(26rem, calc(100vw - 2rem));
  padding: 0.85rem 1.1rem;
  border-radius: 1rem;
  background: #141414;
  color: #fff;
  font: 500 0.9375rem/1.45 var(--font-sans, system-ui, sans-serif);
  box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
}
.demo-toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }
.demo-toast strong { color: #f590b4; font-weight: 600; }