/* Optional patterns selected only by an explicit comparison URL. */
html[data-pattern="dots"] body::before,.sample.dots{background-image:radial-gradient(circle,#3b2c2929 .8px,transparent 1px);background-size:24px 24px}
html[data-pattern="ruled"] body::before,.sample.ruled{background-image:linear-gradient(#3b2c2910 1px,transparent 1px);background-size:100% 36px}
html[data-pattern="pinstripe"] body::before,.sample.pinstripe{background-image:linear-gradient(90deg,#3b2c290c 1px,transparent 1px);background-size:16px 100%}
html[data-pattern="crosses"] body::before,.sample.crosses{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M28 32h8m-4-4v8' fill='none' stroke='%233b2c29' stroke-opacity='.12'/%3E%3C/svg%3E");background-size:64px 64px}
html[data-pattern="wide"] body::before,.sample.wide{background-image:linear-gradient(#3b2c2910 1px,transparent 1px),linear-gradient(90deg,#3b2c2910 1px,transparent 1px);background-size:80px 80px}
.sample.grid{background-image:linear-gradient(#69736b0e 1px,transparent 1px),linear-gradient(90deg,#69736b0e 1px,transparent 1px);background-size:36px 36px}