.halftone{--halftone-ink:#f5f5f4;width:100%;position:relative}.halftone canvas{aspect-ratio:1;width:100%;color:var(--halftone-ink);display:block}.halftone-cue{--cue-x:-50%;white-space:nowrap;transform:translate(var(--cue-x), calc(-100% - 4px));opacity:0;transition:opacity .42s var(--concept-ease,ease), transform .42s var(--concept-ease,ease);position:absolute}.halftone-cue[data-side=left]{--cue-x:calc(-100% + 18px)}.halftone-cue[data-side=right]{--cue-x:-18px}.route-cue{font:400 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#0e1a2a;background:#a5f3fc;border-radius:999px;padding:5px 9px;display:inline-block}.halftone-cue[data-shown]{opacity:1;transform:translate(var(--cue-x), calc(-100% - 8px))}.halftone-replay{border:1px solid color-mix(in srgb, currentColor 30%, transparent);min-height:44px;color:inherit;font:500 13px/1 var(--body);cursor:pointer;background:0 0;border-radius:999px;margin:12px 0 0 auto;padding:0 16px;display:block}.halftone-replay[hidden]{display:none}@media (prefers-reduced-motion:reduce){.halftone-cue{transition:none}}