*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden}body{background:#191919;color:#eee;font-family:Arial,Microsoft YaHei,sans-serif}#app{position:relative;height:100dvh}h1{position:absolute;top:max(32px,env(safe-area-inset-top));left:5%;margin:0;font-size:22px;font-weight:500;z-index:2}#viewer{position:absolute;inset:0;touch-action:none}canvas{display:block;width:100%;height:100%}#thumbnails{position:absolute;left:5%;right:5%;bottom:max(45px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;gap:12px;max-width:650px;margin:auto}.thumbnail{padding:0;width:76px;aspect-ratio:1;border:2px solid transparent;border-radius:3px;background:transparent;cursor:pointer;overflow:visible}.thumbnail img{display:block;width:100%;height:100%;object-fit:contain}.thumbnail.selected{border-color:#75e5ff;box-shadow:0 0 10px #18b9ee88,0 0 22px #18b9ee33}.thumbnail:focus-visible{outline:3px solid white;outline-offset:5px}#status{position:absolute;top:50%;left:0;right:0;text-align:center;pointer-events:none;font-size:14px;color:#aaa}#status button{pointer-events:auto;color:#18b9ee;background:none;border:0;cursor:pointer;font:inherit}@media(max-width:600px){h1{font-size:20px;top:8%}#viewer{inset:0}.thumbnail{width:clamp(48px,12vw,66px)}#thumbnails{bottom:6%;gap:14px}}@media(max-height:480px){h1{top:18px}#viewer{inset:0}#thumbnails{bottom:16px}.thumbnail{width:54px}}.viewer-tools{position:absolute;right:5%;bottom:max(150px,calc(env(safe-area-inset-bottom) + 130px));display:flex;flex-direction:column;gap:10px;z-index:3}.tool{display:grid;place-items:center;width:34px;height:34px;padding:8px;border:0;border-radius:0;background:transparent;color:#bbb;cursor:pointer}.tool svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.tool.active{color:#75e5ff}.tool:not(.active) .pause-mark{display:none}.tool:disabled{opacity:.4;cursor:default}.tool:focus-visible{outline:2px solid #75e5ff;outline-offset:4px}@media(max-width:600px){.viewer-tools{bottom:calc(6% + 94px)}}@media(max-height:480px){.viewer-tools{bottom:90px;gap:8px}.tool{width:30px;height:30px}}