/* Temporary Paper Heatmap preview. */
.logo-heatmap-preview{display:flex;justify-content:center;align-items:center;gap:60px;margin:0 auto 24px;flex-wrap:wrap}
.logo-heatmap-preview figure{margin:0;min-width:170px;padding:0}
.logo-heatmap-preview .hero-logo-interactive{width:180px}
.logo-heatmap-preview .hero-logo-preview{width:100%}
.logo-heatmap-preview .hero-logo-interactive:focus-visible{outline:2px solid var(--electric-blue);outline-offset:14px;border-radius:5px}
.paper-heatmap-host{mask-image:radial-gradient(ellipse at center,#000 40%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at center,#000 40%,transparent 75%);position:absolute;inset:-40px;z-index:0;pointer-events:none;opacity:0;transition:opacity .35s}
.paper-heatmap-host canvas{display:block;width:100%;height:100%}
.effect-active .paper-heatmap-host{opacity:1}
.heatmap-status{display:block;max-width:170px;color:var(--muted);font-size:11px}
@media(max-width:760px){.logo-heatmap-preview{gap:30px 20px}.logo-heatmap-preview figure{min-width:140px}.logo-heatmap-preview .hero-logo-interactive{width:160px}}
@media(prefers-reduced-motion:reduce){.paper-heatmap-host{transition:none}}

/* Solid white lettering contrasts with the active Heatmap in either theme. */
.logo-heatmap-preview .effect-active .hero-logo-preview{filter:brightness(0) invert(1)}

.heatmap-status:empty{display:none}
/* Keep the comparison halos within the page on narrow screens. */
.hero:has(.logo-heatmap-preview){overflow-x:clip}