Build it

Centre the empty-state message in the results panel

EasyAlignment

A search returned nothing and the 'no results' card sat in the top-left corner of a 600×360 panel, looking like a rendering bug rather than a message.

Centre .empty inside .panel on both axes. It must stay centred whatever size the panel becomes.

Hint

Two axes, two decisions. Which property is holding the box on each one?

Live preview1000×700

Your stylesheet

checked in a real browser, four ways

The fixture — markup and base stylesheet

You cannot change either of these. They are what your selectors have to reach, and they are the same ones the judge renders.

<div class="panel"><div class="empty"></div></div>

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: #0b0b0f; color: #e8e8ef; font: 16px/1.4 system-ui, -apple-system, sans-serif; }
.panel { width: 600px; height: 360px; background: #16161d; padding: 24px; }
.empty { width: 220px; height: 96px; background: #2a2a36; }