:root{--primary-color: #4a90e2;--primary-hover-color: #357abd;--background-color: #f4f5f7;--surface-color: #ffffff;--text-color: #333333;--border-color: #dddddd;--error-color: #d9534f;--secondary-color: #6c757d;--secondary-hover-color: #5a6268}*{box-sizing:border-box}body{font-family:Noto Sans JP,sans-serif;background-color:var(--background-color);color:var(--text-color);margin:0;padding:24px;display:flex;justify-content:center;align-items:flex-start;min-height:100vh}#app-container{width:100%;max-width:700px;background-color:var(--surface-color);border-radius:12px;padding:24px;box-shadow:0 4px 12px #0000001a;text-align:center;position:relative}h1{font-size:2rem;margin-top:0;margin-bottom:8px;color:var(--primary-color)}p{margin-top:0;margin-bottom:24px;font-size:1rem;line-height:1.6}#controls{margin-bottom:24px;display:flex;justify-content:center;gap:12px}button{background-color:var(--primary-color);color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease,transform .1s ease;min-width:150px}button:hover{background-color:var(--primary-hover-color)}button:active{transform:scale(.98)}button:disabled{background-color:#ccc;cursor:not-allowed}#switch-camera-button{background-color:var(--secondary-color)}#switch-camera-button:not(:disabled):hover{background-color:var(--secondary-hover-color)}#vision-container{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}#video-wrapper{position:relative;width:100%;padding-top:75%;background:#000;border-radius:8px;overflow:hidden}#video-feed{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}#prompt-section{display:flex;flex-direction:column;gap:12px}.action-buttons{display:flex;gap:12px}.action-buttons button{flex:1}#record-button{background-color:var(--secondary-color)}#record-button:not(:disabled):hover{background-color:var(--secondary-hover-color)}#record-button.recording{background-color:var(--error-color);animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 #d9534fb3}70%{box-shadow:0 0 0 10px #d9534f00}to{box-shadow:0 0 #d9534f00}}textarea{width:100%;padding:12px;font-family:Noto Sans JP,sans-serif;font-size:1rem;border:1px solid var(--border-color);border-radius:8px;resize:vertical;min-height:60px}textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #4a90e24d}#history-header{display:flex;justify-content:space-between;align-items:center;margin-top:32px;margin-bottom:16px;border-bottom:2px solid var(--primary-color);padding-bottom:8px}#history-title{margin:0;font-size:1.5rem;color:var(--text-color);text-align:left}.history-actions{display:flex;gap:8px}.history-actions button{min-width:auto;padding:8px 16px;font-size:.9rem}#export-history-button{background-color:var(--secondary-color)}#export-history-button:hover:not(:disabled){background-color:var(--secondary-hover-color)}#clear-history-button{background-color:var(--error-color)}#clear-history-button:hover:not(:disabled){background-color:#c9302c}#history-container{display:flex;flex-direction:column;gap:24px;margin-top:16px}.history-item{background-color:#f9f9f9;border:1px solid var(--border-color);border-radius:12px;padding:16px;text-align:left;box-shadow:0 2px 4px #0000000d}.history-item img{display:block;width:100%;height:auto;border-radius:8px;margin-bottom:16px}.history-item .prompt-text{font-weight:700;margin-bottom:8px;color:var(--text-color)}.history-item .response-wrapper{position:relative;padding-right:50px}.speak-button{position:absolute;top:-4px;right:0;background-color:var(--secondary-color);color:#fff;border:none;border-radius:50%;width:40px;height:40px;font-size:1.2rem;cursor:pointer;display:flex;justify-content:center;align-items:center;transition:background-color .3s ease,transform .1s ease;padding:0;min-width:unset}.speak-button:hover:not(:disabled){background-color:var(--secondary-hover-color)}.speak-button:active:not(:disabled){transform:scale(.95)}.speak-button.speaking{background-color:var(--error-color)}.history-item .response-text{margin:0;white-space:pre-wrap;font-size:1rem;line-height:1.7}#loading-indicator{position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fffc;display:flex;justify-content:center;align-items:center;z-index:1000;border-radius:12px}.spinner{width:40px;height:40px;border:4px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hidden{display:none!important}