html {
    color-scheme: dark;
}

body {
    margin: 0;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 2rem;
    background:
        radial-gradient(ellipse 70% 55% at 50% 45%, #1c1710 0%, transparent 70%),
        #0d0b08;
}

/* The mark is a 17x24 pixel grid. Sizing it to whole multiples keeps every
   pixel square; a fractional scale renders some rows a pixel taller than
   others and the edges go ragged. */
.mark {
    width: 136px;
    height: 192px;
    image-rendering: pixelated;
}

@media (max-width: 420px) {
    .mark { width: 102px; height: 144px; }
}

@media (prefers-reduced-motion: no-preference) {
    .mark { animation: fade 1.2s ease-out both; }
    @keyframes fade {
        from { opacity: 0; }
        to { opacity: 1; }
    }
}