/* Black-and-white "printed card" look: grainy paper, black ink, serif type, a black title banner. */
:root { color-scheme: light; --ink: #111; --paper: #f3f1ec; --line: #111; }

body { font-family: Georgia, "Times New Roman", serif; line-height: 1.5; max-width: 900px; margin: 0 auto;
       padding: 0 16px 32px; color: var(--ink); background-color: var(--paper);
       /* paper grain: a tiny noise texture drawn by SVG, tiled over the page */
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

h1 { background: var(--ink); color: var(--paper); text-align: center; padding: 6px 12px; margin: 16px 0 8px;
     border: 3px double var(--paper); outline: 2px solid var(--ink); }
h2 { border-bottom: 2px dotted var(--line); padding-bottom: 4px; margin-top: 32px; }
a, summary { color: var(--ink); font-style: italic; }

textarea, input, select, button { font: inherit; }
textarea, input, select { background: #fff; border: 1px solid var(--ink); border-radius: 0; }
textarea, pre, code { font-family: ui-monospace, Consolas, monospace; font-size: 0.9em; }
textarea { max-width: 100%; box-sizing: border-box; }
pre { overflow-x: auto; padding: 8px; border: 1px solid var(--line); background: #fff; }

button { padding: 4px 12px; margin: 4px 4px 4px 0; border: 1px solid var(--ink); border-radius: 0;
         background: var(--ink); color: var(--paper); font-weight: bold; cursor: pointer; }
button:hover { background: var(--paper); color: var(--ink); }

table { border-collapse: collapse; }
td, th { padding: 4px 8px; text-align: left; vertical-align: top; }
th { font-variant: small-caps; letter-spacing: 0.05em; }
table[border] td, table[border] th { border: 1px solid var(--line); }
details { margin: 16px 0; }
summary { cursor: pointer; }