.app-container{max-width:800px;margin:0 auto;padding:20px}h1{text-align:center}.search-container{display:flex;justify-content:center;margin-bottom:20px}.search-container input[type=text]{width:500px;padding:8px;font-size:16px}.search-container button{padding:8px 16px;font-size:16px;margin-left:10px}.image-list{display:flex;flex-direction:column;gap:20px;align-items:center}.image-container{position:relative;overflow:auto;max-height:100dvh}.controls{position:fixed;bottom:10px;right:10px;z-index:10;display:flex;flex-direction:column}.controls button{margin-bottom:5px;padding:10px;background-color:#fff;border:none;border-radius:50%;box-shadow:0 2px 5px #0003;cursor:pointer;transition:background-color .3s}.controls button:hover{background-color:#f0f0f0}.controls button:focus{outline:none}@media (max-width: 600px){.controls{bottom:20px;right:20px}}.image-wrapper{position:relative;display:inline-block;transition:transform .3s ease;cursor:grab}.image-wrapper:active{cursor:grabbing}.image-wrapper img{display:block;max-width:100%;height:auto}.annotation{position:absolute;width:20px;height:20px;background-color:#007bffcc;border-radius:50% 50% 50% 0;transform:translate(-50%,-50%) rotate(-45deg);pointer-events:none;animation:bounce 1.5s infinite;box-shadow:0 0 6px #007bff80}.annotation:before{content:"";position:absolute;top:50%;left:50%;width:9px;height:9px;background-color:#fff;border-radius:50%;transform:translate(-50%,-50%)}.annotation:after{content:"";position:absolute;top:50%;left:50%;width:24px;height:24px;border:2px solid rgba(0,123,255,.5);border-radius:50%;transform:translate(-50%,-50%);animation:ripple 1.5s infinite}@keyframes bounce{0%,to{transform:translate(-50%,-50%) rotate(-45deg) translateY(0)}50%{transform:translate(-50%,-50%) rotate(-45deg) scale(1.2)}}@keyframes ripple{0%{transform:translate(-50%,-50%) scale(.8);opacity:.7}to{transform:translate(-50%,-50%) scale(1.5);opacity:0}}.image-modal-backdrop{position:fixed;inset:0;background-color:#00000080;display:flex;justify-content:center;align-items:center;z-index:9999;cursor:pointer}.image-modal-content{position:relative;width:95dvw;height:95dvh;background-color:#fff;border-radius:8px;overflow:hidden;cursor:default;display:flex;flex-direction:column}.modal-close-btn{position:absolute;top:15px;right:15px;background-color:#0009;color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:18px;cursor:pointer;z-index:10001;transition:background-color .3s ease;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{background-color:#000c}.modal-floor-label{position:absolute;top:15px;left:15px;background-color:#0009;color:#fff;padding:8px 16px;border-radius:20px;font-weight:700;z-index:10001;font-size:14px}.modal-image-wrapper{position:relative;display:inline-block;-webkit-user-select:none;user-select:none}.modal-image-wrapper img{display:block;max-width:none;height:auto}.modal-annotation{width:24px;height:24px;box-shadow:0 0 8px #007bff99}.modal-annotation:before{width:11px;height:11px}.modal-annotation:after{width:28px;height:28px}@media (max-width: 768px){.image-modal-content{width:100dvw;height:100dvh;border-radius:0}.modal-controls{bottom:15px;right:15px}.modal-controls button{width:45px;height:45px;font-size:16px}.modal-close-btn,.modal-floor-label{top:10px}.modal-close-btn{right:10px;width:35px;height:35px;font-size:16px}.modal-floor-label{left:10px;font-size:12px;padding:6px 12px}}@font-face{font-family:OCRB;src:url(/assets/OCRB-DM4N871Y.ttf) format("truetype")}.canvas-text{font-family:OCRB,sans-serif}
