body.viewport {
	background: var(--jqx-industrial-canvas, var(--jqx-body-background-color));
	color: var(--jqx-text-color);
	font-family: var(--jqx-font-family);
	font-size: 13px;
	margin: 0;
	padding: 16px;
}

.fp-demo {
	max-width: 1100px;
}

.fp-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.fp-demo h2 {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 10px;
}

.fp-demo h3 {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--jqx-text-tertiary-color);
	margin: 26px 0 10px;
}

.fp-note {
	font-size: 12px;
	line-height: 1.6;
	color: var(--jqx-text-secondary-color);
	margin: 0 0 14px;
	max-width: 100ch;
}

.fp-note code {
	font-family: Consolas, Monaco, monospace;
	font-size: 11.5px;
	color: var(--jqx-industrial-accent-text);
}

/* Faceplates sit side by side on a real screen and wrap rather than shrink - a
   faceplate narrower than its columns stops being readable at all. */
.fp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 14px;
	align-items: stretch;
}

.fp-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
}

.fp-hint {
	font-size: 11.5px;
	color: var(--jqx-text-tertiary-color);
}

.fp-button {
	background: transparent;
	border: 1px solid var(--jqx-border);
	border-radius: var(--jqx-border-radius);
	color: var(--jqx-text-secondary-color);
	cursor: pointer;
	font-family: inherit;
	font-size: 11px;
	height: 30px;
	letter-spacing: .06em;
	padding: 0 14px;
	text-transform: uppercase;
}

.fp-button:hover {
	border-color: var(--jqx-border-hover);
	color: var(--jqx-text-color);
}

.fp-button:focus-visible {
	outline: 2px solid var(--jqx-industrial-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--jqx-industrial-focus-halo);
}

#log {
	font-family: Consolas, Monaco, monospace;
	font-size: 11.5px;
	background: var(--jqx-industrial-panel-background, var(--jqx-surface));
	border: 1px solid var(--jqx-industrial-panel-border, var(--jqx-border));
	border-radius: 3px;
	padding: 8px 10px;
}