:root { color-scheme: light; --bg:#f4efe8; --focus: rgba(20,20,20,.38); }
* { box-sizing:border-box; }
html, body { margin:0; padding:0; background:var(--bg); }
body { font-family: Arial, Helvetica, sans-serif; }
.canon-shell { width:100%; display:flex; justify-content:center; }
.canon-page { position:relative; width:min(100vw, 1440px); line-height:0; overflow:hidden; background:#f4efe8; }
.canon-page > img { width:100%; height:auto; display:block; user-select:none; -webkit-user-drag:none; }
.hotspot { position:absolute; display:block; z-index:5; border-radius:2px; text-decoration:none; }
.hotspot:focus-visible { outline:3px solid var(--focus); outline-offset:2px; background:rgba(255,255,255,.12); }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (min-width:1441px){ body{ background:#e8e2da; } .canon-page{ box-shadow:0 0 40px rgba(0,0,0,.06); } }