*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#fff;color:#111;font-family:Arial,Helvetica,sans-serif}
header,footer{position:fixed;left:3%;right:3%;display:flex;justify-content:space-between;gap:20px;font-size:12px;z-index:2;pointer-events:none}header{top:26px}footer{bottom:25px}header a{pointer-events:auto;color:inherit;text-decoration:none}
main{height:100%;position:relative}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}canvas:active{cursor:grabbing}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.sr-only:focus-within{width:auto;height:auto;clip-path:none;left:20px;top:70px;z-index:3;background:#fff;padding:15px}.sr-only button{margin:4px}
dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;overflow:hidden}dialog::backdrop{background:transparent}#preview-image{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#000;box-shadow:0 18px 75px #0003;outline:none}#close{position:absolute;right:25px;top:20px;border:0;border-radius:50%;background:#ffffffb3;color:#111;font:26px Arial;width:34px;height:34px;cursor:pointer}body.preview-open canvas{cursor:default}a:focus-visible,button:focus-visible{outline:1px solid;outline-offset:5px}#fallback{position:absolute;top:45%;width:100%;text-align:center}
canvas{transition:filter 220ms ease}body.preview-open canvas{filter:blur(5px)}#preview-name{position:absolute;left:0;right:0;top:calc(50% + var(--preview-half-height, 0px) + 18px);margin:0;text-align:center;font-size:12px;letter-spacing:.02em;pointer-events:none}#preview-image img,#preview-image video{display:block;width:100%;height:100%;object-fit:contain}@media(prefers-reduced-motion:reduce){canvas{transition:none}}
@media(max-width:600px){header span:nth-child(2){display:none}footer{font-size:10px;left:5%;right:5%}header{left:5%;right:5%}}