/* The Buzz landing page uses Arial/Helvetica. Keep this identity independent
   of the demo event's configurable font and its canvas renderer. */
.demo-sticker {
  position: fixed;
  z-index: 10; /* Below the existing skip link (20). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  padding: 10px;
  border: 2px solid #101010;
  border-radius: 14px;
  background: #E9DEFF;
  color: #101010;
  box-shadow: 3px 4px 0 #101010;
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.2;
  text-decoration: none;
}
.demo-sticker-mark { display: block; width: 36px; height: 36px; flex: 0 0 36px; }
.demo-sticker-copy { display: grid; gap: 4px; flex: 1 1 64px; min-width: min-content; }
.demo-sticker-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.demo-sticker-question { font-size: 14px; font-weight: 700; letter-spacing: -.035em; }
.demo-sticker-cta {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 999px;
  background: #101010;
  color: white;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}
.demo-sticker-cta-label { min-width: 0; }
.demo-sticker-arrow { font-size: 22px; font-weight: 400; line-height: 1; flex: none; }
.demo-sticker:hover .demo-sticker-cta { background: #303030; }
.demo-sticker:focus-visible { outline: 3px solid #153250; outline-offset: 6px; }

/* Reserve scrolling room even before reveal, so the reveal cannot move the
   scroll threshold. Extra room grows with the bar when text is enlarged. */
body[data-demo-sticker] { padding-bottom: var(--demo-sticker-clearance, 114px); }
html:has(body[data-demo-sticker]) { scroll-padding-bottom: var(--demo-sticker-clearance, 114px); }
body[data-demo-sticker] :is(input, textarea, button, summary, a) { scroll-margin-bottom: var(--demo-sticker-clearance, 114px); }

/* Fit the sticker in the original centered page's existing margin. Leave all
   page/container/workspace dimensions untouched. Windows without enough spare
   margin use the compact bar, rather than shifting or covering the demo. */
@media (min-width: 1440px) and (min-height: 501px) {
  body[data-demo-sticker] { padding-bottom: 0; }
  html:has(body[data-demo-sticker]) { scroll-padding-bottom: 24px; }
  .demo-sticker {
    --demo-badge-size: clamp(128px, calc((100vw - 1120px) / 2 - 40px), 180px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 8px;
    left: auto;
    right: max(16px, calc((100vw - 1536px) / 2));
    top: clamp(104px, 14dvh, 144px);
    bottom: auto;
    width: var(--demo-badge-size);
    height: var(--demo-badge-size);
    padding: 0 6px 8px;
    border-radius: 14px;
    box-shadow: 3px 4px 0 #101010;
    transform: rotate(-2deg);
    animation: demo-sticker-settle 9s ease-in-out infinite;
  }
  .demo-sticker-mark { position: absolute; left: 50%; top: calc(var(--demo-badge-size) * -.12); width: calc(var(--demo-badge-size) * .23); height: calc(var(--demo-badge-size) * .23); transform: translateX(-50%); }
  /* The label's row spans exactly the space between logo and headline. */
  .demo-sticker-copy { grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 0; min-width: 0; min-height: 0; padding-top: calc(var(--demo-badge-size) * .11); }
  .demo-sticker-eyebrow { align-self: center; font-size: calc(var(--demo-badge-size) * .085); letter-spacing: .06em; line-height: 1.15; text-align: center; white-space: nowrap; }
  .demo-sticker-question { font-size: calc(var(--demo-badge-size) * .125); letter-spacing: -.04em; line-height: 1.1; text-align: center; }
  .demo-sticker-question-line { display: block; }
  .demo-sticker-cta { margin: 0; padding: 4px; gap: 2px; font-size: clamp(11px, calc(var(--demo-badge-size) * .07), 12px); letter-spacing: -.02em; min-height: 44px; }
  .demo-sticker-cta-label { white-space: nowrap; }
  .demo-sticker-arrow { font-size: 16px; }
  .demo-sticker:hover, .demo-sticker:focus-within { animation: none; }
}
@keyframes demo-sticker-settle {
  0%, 86%, 100% { transform: translateX(0) rotate(-2deg); }
  89% { transform: translateX(8px) rotate(-1deg); }
  93% { transform: translateX(-3px) rotate(-3deg); }
  97% { transform: translateX(0) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .demo-sticker { animation: none; }
}