:root { color-scheme: light; font: 16px/1.6 system-ui,sans-serif; color: #221f1c; background: #f4efe6; }
* { box-sizing: border-box; }
body { max-width: 1120px; margin: auto; padding: 24px; }
h1 { font: 500 clamp(28px,5vw,44px)/1.1 Georgia,serif; margin-bottom: 12px; }
p { max-width: 78ch; }
a { color: #993516; text-underline-offset: 3px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 12px; }
button { background: transparent; color: inherit; border: 1px solid #9c9282; border-radius: 24px; padding: 9px 16px; font: inherit; cursor: pointer; }
button[aria-pressed=true] { background: #bc3b18; color: white; border-color: #bc3b18; }
:focus-visible { outline: 3px solid #bc3b18; outline-offset: 3px; }
.viewer { background: #ece9e2; border: 1px solid #d6cdbd; border-radius: 12px; height: clamp(300px,58vw,620px); overflow: hidden; position: relative; }
.viewer img { width: 100%; height: 100%; object-fit: contain; }
.viewer canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.help { color: #60594e; font-size: 14px; }
#status { min-height: 1.6em; }
@media (max-width:480px) { body { padding: 16px; } button { padding: 8px 12px; font-size: 14px; } }

.viewer [hidden] { display: none; }