* { box-sizing: border-box; }
body { margin: 0; background: #e4e4e4; color: #222; font: 14px/1.4 Arial, sans-serif; }
.toolbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem; padding: .45rem; background: #fff; border-bottom: 1px solid #bbb; }
.toolbar button, .toolbar a { display: inline-block; border: 1px solid #888; border-radius: 3px; padding: .35rem .55rem; background: #fff; color: #124b85; font: inherit; text-decoration: none; cursor: pointer; }
.toolbar button:disabled { opacity: .45; cursor: default; }
.toolbar a[hidden] { display: none; }
#pages { white-space: nowrap; }
#status { margin: .65rem; text-align: center; }
#page { padding: .5rem; text-align: center; }
canvas { display: block; max-width: 100%; height: auto; margin: 0 auto; background: white; box-shadow: 0 1px 5px #999; }
@media (max-width: 400px) { .toolbar { gap: .25rem; font-size: 12px; } .toolbar button, .toolbar a { padding: .3rem; } }
#preview-button { display: block; max-width: 100%; border: 0; padding: 0; margin: 0 auto; background: transparent; cursor: pointer; }
#preview-button:focus-visible { outline: 3px solid #124b85; outline-offset: 3px; }
#preview { display: block; max-width: 100%; height: auto; margin: 0 auto; box-shadow: 0 1px 5px #999; }
#preview-button[hidden], canvas[hidden] { display: none; }