@font-face{font-family:Manrope;src:url('./fonts/Manrope-Regular.ttf') format('truetype');font-weight:400;font-display:swap}
:root{color-scheme:dark;font-family:Manrope,system-ui,sans-serif;background:#101715;color:#f8f7f2}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible{outline:3px solid #82c5ff;outline-offset:4px}button[hidden],[hidden]{display:none!important}
#viewer,#stage,#markers{position:absolute;inset:0}#viewer{height:100%;height:100dvh}#stage{touch-action:none;outline:none}canvas{display:block;width:100%;height:100%}#markers{pointer-events:none}
.icon-button{position:absolute;z-index:3;display:flex;align-items:center;justify-content:center;width:48px;height:48px;padding:12px;border:1px solid #ffffff4d;border-radius:50%;background:#142226b8;color:#fff;box-shadow:0 2px 12px #0002;backdrop-filter:blur(10px)}.icon-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:#29444c}.icon-button:active{background:#3b5962}
#fullscreen{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right))}
.archive button{position:absolute;left:0;top:0;pointer-events:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;will-change:transform}
.archive button::before{content:"";position:absolute;width:32px;height:32px;border-radius:50%;background:#213238d9;border:1px solid #ffffffcf;box-shadow:0 2px 7px #0003;pointer-events:none;transition:background .12s}
.archive button svg{position:relative;width:20px;height:20px;color:#fff;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.archive .arrow::before{width:36px;height:36px;background:#ffffffe6;border-color:#fff}.archive .arrow svg{width:23px;height:23px;color:#28383d;stroke-width:2.5}.archive button:hover::before{background:#375361}.archive .arrow:hover::before{background:#dce5e9}.archive button:focus-visible{outline:none}.archive button:focus-visible::before{outline:3px solid #82c5ff;outline-offset:3px}
#notice{position:absolute;z-index:4;top:50%;left:50%;transform:translate(-50%,-50%);max-width:min(360px,calc(100% - 40px));width:max-content;padding:24px 28px;background:#142226ed;border:1px solid #ffffff26;border-radius:20px;text-align:center;box-shadow:0 16px 60px #0004;backdrop-filter:blur(12px)}#notice p{margin:12px 0 0;line-height:1.6}#retry{position:static;min-height:44px;margin-top:18px;padding:10px 18px;border:1px solid #ffffff80;border-radius:12px;background:#244a55}.spinner{display:block;width:26px;height:26px;margin:auto;border:2px solid #ffffff30;border-top-color:#f4eddb;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
#hint{position:absolute;z-index:2;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 36px);margin:0;padding:10px 16px;border-radius:20px;background:#142226c9;color:#f8f7f2;font-size:12px;line-height:1.6;text-align:center;pointer-events:none;transition:opacity 1s}.hint-hidden{opacity:0}.noscript{position:absolute;inset:0;display:grid;place-items:center;padding:30px;background:#101715;text-align:center}
#photo{position:fixed;inset:0;width:100%;max-width:none;height:100%;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:#101715f8;color:#fff;overflow:hidden}#photo::backdrop{background:#101715}#photo-close{top:max(16px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:5}
#photo-stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;touch-action:none;user-select:none;padding:max(68px,env(safe-area-inset-top)) 16px max(92px,env(safe-area-inset-bottom))}#photo-image{display:block;flex:none;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transform-origin:center;will-change:transform;user-select:none;-webkit-user-drag:none}#photo-image.zoomed{cursor:grab}#photo-image.zoomed:active{cursor:grabbing}
#photo-tools{position:absolute;z-index:4;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;border:1px solid #ffffff38;border-radius:26px;background:#17292fe6;overflow:hidden;backdrop-filter:blur(12px)}#photo-tools button{position:static;min-width:48px;min-height:48px;border:0;background:transparent;font-size:22px}#photo-tools button:hover{background:#ffffff18}#photo-tools #zoom-reset{min-width:72px;font-size:12px}#photo-message{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 60px);text-align:center;line-height:1.7;pointer-events:none}#photo-caption{position:absolute;left:max(20px,env(safe-area-inset-left));bottom:90px;max-width:min(600px,calc(100% - 40px));background:#101715d9;padding:14px 18px;border-radius:12px}#photo-caption p{margin:6px 0 0;font-size:14px;line-height:1.7}
@media(prefers-reduced-motion:reduce){*,*::before{transition:none!important;animation:none!important}}
@media(max-width:480px){#photo-stage{padding-right:0;padding-left:0}#hint{font-size:11px}#notice{padding:22px}}