#warning {
		animation:        showWarning 0.5s 2s forwards;
		backdrop-filter:  blur(0.25em);
		background-color: rgb(255 0 0 / 75%);
		border-radius:    1em;
		bottom:           1em;
		display:          grid;
		filter:           drop-shadow(0 0.5em 1em rgb(0 0 0 / 50%));
		font-size:        85%;
		margin-left:      1em;
		max-width:        60ch;
		opacity:          0;
		padding:          1em 1.5em;
		position:         fixed;
		right:            1em;
		row-gap:          0.75em;
		text-transform:   initial;
		z-index:          3; /* In front of `nav.webc` */
	}

	@keyframes showWarning { to { opacity: 1 } }
	@keyframes hideWarning { to { visibility: hidden } }

	#warning.closed { animation: hideWarning 0.5s forwards }

	#warning * {
		color:       white;
		font-size:   inherit;
		font-weight: lighter;
		stroke:      white;
		text-box:    initial;
	}

	#warning header {
		align-items:     center;
		column-gap:      1em;
		display:         flex;
		justify-content: space-between;
	}

	#warning h2 { font-weight: bold }

	#warning button {
		block-size:  0.75em;
		display:     flex;
		inline-size: 0.75em;
	}

	#warning button:focus {
		outline-color:  white;
		outline-offset: 0.5em;
		outline-style:  solid;
		outline-width:  0.1em;
	}

	#warning button:focus:not(:focus-visible) { outline-color: transparent }

	#warning svg { stroke-width: 0.1em }

	/* Hide if it supports all the modern stuff we’re using. */
	@layer {
		@media (width >= 0) {
			@supports
				(aspect-ratio: 1) and
				(color: color-mix(in srgb, red, red)) and
				(container-type: size) and
				(grid-template-columns: subgrid) and
				(margin-inline: 0) and
				(text-box: trim-both) and
				(text-wrap: balance) and
				(top: 1cap) and
				(top: 1dvh) and
				(top: 1lh) and
				(top: 1rcap) and
				(top: 1rex) and
				(top: 1rlh) and
				selector(:has(*)) and
				selector(:is(*)) and
				selector(:where(*)) and
				selector(&)
			{
				#warning { visibility: hidden }
			}
		}
	}