#demo {
	background-color: var(--glass-dialog-dark);
}

/* Keyed to the form as well as the popup, so it dresses the same below
   the threshold, where menu.js moves it into the nav sheet (see
   demo.css) — the popup keeps the declaration too, so its own box is
   the environment it always was. The page body switches to the
   redesign's sans; the form keeps the shared serif look it has
   everywhere else. */
#demo,
.demo-body {
	color: var(--parchment-a82);
	font-family: var(--font-serif);
}

.demo-body .button {
	border: var(--emphasis) solid var(--parchment-a82);
	color: inherit;
}

.demo-body .button:hover {
	background-color: var(--parchment-a82);
	color: var(--ink);
}

.demo-body form input,
.demo-body form textarea {
	border-bottom: var(--hairline) solid var(--parchment-a82);
}

.demo-body form input::placeholder,
.demo-body form textarea::placeholder {
	color: var(--parchment-a50);
}

/* The mobile nav sheet (menu.js) dressed for the ink pages; base
   styles in style.css. It takes the nav bar's own glass rather than
   this dialog's, so the sheet and the bar it grows from are the same
   color, and its sweeping bottom edge takes the bar's hairline.
   (Only the product page loads this file — the problem page is
   parchment and keeps the light sheet, matching its light bar.) */
#menu {
	background-color: var(--glass-dark);
	color: var(--parchment-a82);
	font-family: var(--font-serif);
	border-bottom-color: var(--ink-700);
}

#menu nav a:hover {
	border-bottom-color: var(--parchment-a82);
}

/* The focus stroke (style.css) in this sheet's parchment. */
#menu nav a:focus-visible {
	border-bottom-color: var(--parchment-a82);
}

#menu nav a.active {
	border-bottom-color: var(--brand-primary);
}