body{font-family:Noto Sans JP,sans-serif;background-color:#333;color:#f0f0f0;margin:0;padding:20px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh;box-sizing:border-box}.app-container{background-color:#444;padding:25px;border-radius:12px;box-shadow:0 8px 16px #0000004d;width:100%;max-width:900px}header{text-align:center;margin-bottom:25px;border-bottom:1px solid #555;padding-bottom:15px}header h1{margin:0 0 5px;font-size:2em;color:#6cf}header p{margin:0;font-size:1em;color:#bbb}.controls-area{display:flex;flex-direction:column;gap:20px;margin-bottom:30px;align-items:center}.upload-section{display:flex;justify-content:center}input[type=file]{display:none}.button-like-label{background-color:#5cb85c;color:#fff;padding:12px 20px;border-radius:6px;cursor:pointer;font-weight:500;text-align:center;transition:background-color .3s ease}.button-like-label:hover,.button-like-label:focus{background-color:#4cae4c}.action-button{background-color:#007bff;color:#fff;padding:12px 25px;border:none;border-radius:6px;font-size:1.1em;font-weight:500;cursor:pointer;transition:background-color .3s ease;width:auto;align-self:center}.action-button:hover:not(:disabled){background-color:#0056b3}.action-button:disabled{background-color:#6c757d;cursor:not-allowed;opacity:.7}.image-display-area{display:flex;gap:20px;justify-content:space-around;margin-top:20px;flex-wrap:wrap}.image-wrapper{display:flex;flex-direction:column;align-items:center;background-color:#3a3a3a;padding:15px;border-radius:8px;box-shadow:0 4px 8px #0003;flex-basis:calc(33.333% - 20px);flex-grow:1;min-width:250px;margin-bottom:15px}.image-wrapper h3{margin-top:0;margin-bottom:10px;color:#e0e0e0;font-size:1.2em}.image-container{width:100%;height:250px;background-color:#2c2c2c;border:1px solid #555;border-radius:6px;display:flex;justify-content:center;align-items:center;overflow:hidden}.image-container img{max-width:100%;max-height:100%;height:auto;width:auto;object-fit:contain;border-radius:4px}.placeholder-text{color:#888;font-style:italic;text-align:center;padding:10px}.modal{position:fixed;z-index:1001;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:#0009;display:flex;justify-content:center;align-items:center}.modal-content{background-color:#4f4f4f;padding:25px;border:1px solid #888;border-radius:10px;width:auto;max-width:500px;box-shadow:0 5px 15px #00000080;position:relative;display:flex;flex-direction:column;align-items:center}.modal-close-button{color:#aaa;position:absolute;top:10px;right:15px;font-size:28px;font-weight:700;background:none;border:none;cursor:pointer;padding:0;line-height:1}.modal-close-button:hover,.modal-close-button:focus{color:#fff;text-decoration:none}.modal-title{margin-top:0;margin-bottom:20px;color:#e0e0e0;font-size:1.5em;text-align:center;width:100%;padding-left:35px;padding-right:35px;box-sizing:border-box}.direction-selector{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:20px}.direction-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:150px;height:150px;background-color:#3a3a3a;padding:10px;border-radius:8px;box-shadow:inset 0 0 5px #0000004d}.direction-cell{background-color:#555;color:#f0f0f0;border:1px solid #666;border-radius:4px;font-size:1.8em;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color .2s ease,transform .1s ease;padding:0;-webkit-user-select:none;user-select:none}.direction-cell:hover:not(:disabled){background-color:#6a6a6a}.direction-cell:active:not(:disabled){transform:scale(.95)}.direction-cell[aria-pressed=true]{background-color:#6cf;color:#222;border-color:#5bb0e0;box-shadow:0 0 8px #66ccff80}.direction-cell:disabled{opacity:.5;cursor:not-allowed}.modal-actions{margin-top:25px;display:flex;justify-content:center;width:100%}.modal-button{padding:10px 20px;font-size:1em}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000000b3;display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1000;color:#f0f0f0}.spinner{border:6px solid #f3f3f3;border-top:6px solid #66ccff;border-radius:50%;width:50px;height:50px;animation:spin 1s linear infinite;margin-bottom:15px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-message{background-color:#dc3545;color:#fff;padding:12px;border-radius:6px;text-align:center;margin-top:15px;margin-bottom:15px}footer{text-align:center;margin-top:30px;padding-top:15px;border-top:1px solid #555;font-size:.9em;color:#aaa}.sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;width:1px!important;white-space:nowrap!important}@media (max-width: 768px){.app-container{padding:15px;margin:10px}header h1{font-size:1.8em}.image-display-area{flex-direction:column;align-items:center}.image-wrapper{width:90%;max-width:400px;min-width:unset;flex-basis:auto}.direction-grid{width:120px;height:120px}.direction-cell{font-size:1.5em}.modal-content{width:90%;padding:20px}.modal-actions{flex-direction:column;align-items:center;gap:10px}.modal-button{width:80%}}@media (max-width: 500px){.image-wrapper{min-width:95%}.image-container{height:200px}}