/* Base */ * { box-sizing: border-box; } /* Paint the page field on so it fills the whole canvas, including the overscroll/rubber-band area. A centered paper band (matching .page's exact width) sits in a page-edge field, so the gutters line up with the sheet. */ html { --sheet-width: min(var(--content-width), 100%); /* The root color paints the overscroll canvas. The fixed body stripe below keeps paper constrained to the sheet while these darker gutters continue above and below it. */ background-color: var(--page-edge); background-image: linear-gradient( to right, var(--page-edge) calc(50% - var(--sheet-width) / 2), var(--paper) calc(50% - var(--sheet-width) / 2), var(--paper) calc(50% + var(--sheet-width) / 2), var(--page-edge) calc(50% + var(--sheet-width) / 2) ); } /* Expanded mode runs the sheet full-bleed, so the whole canvas is paper. */ html:has(body.is-wide) { --sheet-width: 100%; } body { position: relative; margin: 0; min-height: 100vh; background: transparent; color: var(--ink); font-family: var(--font-body); font-size: var(--text-body); line-height: var(--line-reading); } body::before { content: ""; position: fixed; inset-block: 0; left: 50%; z-index: 0; width: var(--sheet-width); transform: translateX(-50%); background: var(--paper); pointer-events: none; } button, input, textarea { font: inherit; } button { border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } button:disabled { cursor: default; opacity: 0.58; }