*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#eae7df;color:#26352e;font-family:system-ui,sans-serif}canvas{display:block;width:100%;height:100%;touch-action:none}#viewer{position:absolute;inset:0}header{position:absolute;top:20px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:15px;pointer-events:none}header>*{pointer-events:auto}header a{font-size:12px;color:inherit;text-decoration:none;background:#f9f7f0df;padding:10px 13px;border-radius:20px}header div{text-align:center}header strong{font-family:Georgia,serif;font-size:24px;font-weight:400}header strong span{font:10px system-ui;border:1px solid #8f9a8c;border-radius:100%;padding:5px;vertical-align:middle}small{display:block;margin-top:4px;font-size:10px;letter-spacing:.06em}aside{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);text-align:center;background:#fbfaf4ee;border:1px solid #fff;border-radius:18px;padding:12px 16px;box-shadow:0 8px 35px #26352e15}aside p{margin:0 0 9px;font-size:12px}nav{display:flex;gap:4px;justify-content:center}button{font:inherit;font-size:12px;border:0;border-radius:20px;padding:10px 17px;background:transparent;color:inherit;cursor:pointer}button[aria-pressed=true]{background:#344f40;color:white}button:hover{background:#dce3d6}button[aria-pressed=true]:hover{background:#344f40}.options{display:flex;align-items:center;justify-content:center;gap:15px;font-size:11px;padding-top:9px}.options label{display:flex;align-items:center;gap:4px}.options button{font-size:11px;padding:3px}input{accent-color:#344f40}.options span{color:#6d756a}#status{position:absolute;left:50%;top:45%;transform:translateX(-50%);font-size:13px}#fallback{position:absolute;inset:90px 0 155px;text-align:center}#fallback img{width:100%;height:90%;object-fit:contain}#fallback p{font-size:13px}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #b26948;outline-offset:3px}@media(max-width:600px){header{top:12px;left:12px;right:12px}header a{font-size:10px;padding:9px}header strong{font-size:21px}small{font-size:9px}aside{bottom:12px;padding:10px 9px;width:calc(100% - 24px)}nav button{padding:10px 12px;font-size:11px}.options{gap:14px}.options span{display:none}aside p{font-size:11px;max-width:310px;margin:0 auto 8px}}@media(max-height:440px){header{top:8px}header small{display:none}aside{bottom:8px;padding:7px 12px}aside p,.options{display:none}}