A tour in the host’s clothes

One stylesheet of the page’s own restyles the scrim, the message and the halo, with a quieter halo on the hole that is only shown.

The story

const story = {
  id: 'styled',
  steps: [
    {
      id: 'order',
      // Shown, not opened: the halo on this hole has no data-open, so it
      // gets the quieter glow the stylesheet gives that state.
      target: '[data-order]',
      message: 'This is the order being paid for. The halo marks it without handing it over.',
    },
    {
      id: 'voucher',
      target: { elements: '[data-voucher]', interactive: true },
      message: 'Type a voucher code. This hole is open, and its halo says so at full glow.',
      validate: (el) => (el as HTMLInputElement).value.trim() !== '',
      error: 'Nothing typed yet.',
    },
  ],
} satisfies LekoStory