:root {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #18202b;
	background: #f6f7f9;
}

* { box-sizing: border-box; }

body { margin: 0; }

.demo {
	max-width: 1120px;
	margin: 0 auto;
	padding: clamp(1rem, 3vw, 2.5rem);
}

.intro { max-width: 760px; }
.eyebrow { color: #245c85; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
h1 { margin: .3rem 0 .8rem; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.1; }
p { line-height: 1.5; }

.controls {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid #d8dee5;
	border-radius: 12px;
	background: #fff;
}

.controls label { display: flex; align-items: center; gap: .8rem; font-weight: 650; }
.controls input[type="color"] { width: 3.5rem; height: 2.5rem; padding: .15rem; cursor: pointer; }
.controls input[type="range"] { width: 9rem; }

.previews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.preview { min-width: 0; padding: 1rem; border: 1px solid #d8dee5; border-radius: 12px; background: #fff; }
.preview h2 { margin: 0; font-size: 1.15rem; }
.preview p { min-height: 2.8em; margin: .35rem 0 .7rem; font-size: .9rem; }
.canvas-frame { overflow: hidden; border: 1px solid #bdc8d1; border-radius: 8px; }
.checkerboard { background-color: #fff; background-image: linear-gradient(45deg, #dce2e8 25%, transparent 25%), linear-gradient(-45deg, #dce2e8 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #dce2e8 75%), linear-gradient(-45deg, transparent 75%, #dce2e8 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
canvas { display: block; width: 100%; height: auto; }
button { margin-top: 1rem; padding: .7rem 1rem; border: 0; border-radius: 7px; background: #164b70; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #0c3858; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #ff8d36; outline-offset: 3px; }
.status { margin: 1rem 0; font-size: .9rem; color: #344454; }
footer { padding-top: 1rem; border-top: 1px solid #d8dee5; font-size: .85rem; }
footer a { color: #164b70; }

@media (max-width: 700px) {
	.previews { grid-template-columns: 1fr; }
	.preview p { min-height: 0; }
	.controls label { flex-wrap: wrap; }
}