/* All visual rules are opt-in. Plain/system/blue/normal use the existing app untouched. */
html[data-theme=light] { color-scheme: light; }
html[data-theme=dark] { color-scheme: dark; }
html[data-size=small], html[data-size=small] body { font-size: 15px; }
html[data-size=large], html[data-size=large] body { font-size: 20px; }
html[data-background] body { min-height: 100vh; background-color: var(--bg); }
html[data-background=dots] body { background-image: radial-gradient(circle, var(--line) 1px, transparent 1px); background-size: 18px 18px; }
html[data-background=grid] body { background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 32px 32px; }
html[data-background=diagonal] body { background-image: repeating-linear-gradient(45deg, transparent 0 22px, var(--line) 22px 23px); }
html[data-background=waves] body { background-image: repeating-radial-gradient(ellipse at 0 0, transparent 0 38px, var(--line) 39px 40px, transparent 41px 60px); }
html[data-background=checks] body { background-image: conic-gradient(var(--line) 25%, transparent 0 50%, var(--line) 0 75%, transparent 0); background-size: 64px 64px; }
html[data-background=rings] body { background-image: repeating-radial-gradient(circle at center, transparent 0 28px, var(--line) 29px 30px, transparent 31px 48px); }
html[data-background=photo] body { background-image: var(--appearance-photo); background-size: cover; background-position: center; background-attachment: fixed; }
/* Solid surfaces protect every heading, footnote and form even over an arbitrary photo. */
html[data-background] main { background: var(--card); border-radius: 16px; }
html[data-background] .top { background: var(--card); }
@media print {
  html[data-background] body { background-image: none; }
}