*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#f5f5f5;display:flex;flex-direction:column}.container{max-width:100%;height:120vh;display:flex;flex-direction:column;padding:20px;gap:20px;overflow:hidden}.camera-section{flex:0 0 auto;display:flex;flex-direction:column;gap:15px}.camera-container{position:relative;width:100%;height:30vh;background-color:#000;overflow:hidden;border-radius:12px}#camera{width:100%;height:100%;object-fit:cover;cursor:pointer}.focus-area{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:300px;height:150px;border:3px solid #fff;border-radius:15px;box-shadow:0 0 0 9999px #00000080}.controls{display:flex;gap:15px;padding:0 10px}button{flex:1;padding:15px;border:none;border-radius:12px;background-color:#007aff;color:#fff;font-size:18px;font-weight:600;cursor:pointer;transition:background-color .2s}button:disabled{background-color:#ccc;cursor:not-allowed}button:active{background-color:#0056b3}.word-display{background-color:#fff;padding:15px;border-radius:12px;box-shadow:0 2px 4px #0000001a;margin:0 10px;text-align:center}.word-display p{font-size:16px;line-height:1.5;color:#666;margin:0}.word-display span{display:block;font-weight:700;color:#007aff;font-size:24px;margin-top:5px}.translation-section{flex:1;display:flex;flex-direction:column;background-color:#fff;border-radius:12px;box-shadow:0 2px 4px #0000001a;overflow:hidden;position:relative;min-height:200px;max-height:calc(60vh - 20px)}.translation-header{padding:15px;border-bottom:1px solid #eee;background-color:#f8f9fa}.translation-header h3{margin:0;color:#333;font-size:18px}.translation-container{position:relative;flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}.translation-frame{width:100%;height:100%;border:none;transition:opacity .3s ease;background:#fff}.loading-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;background:#fffffff2;padding:20px;border-radius:12px;box-shadow:0 4px 6px #0000001a;z-index:1000;display:flex;flex-direction:column;align-items:center;gap:12px}.loading-spinner{border:3px solid #f3f3f3;border-top:3px solid #007AFF;border-radius:50%;width:32px;height:32px;animation:spin 1s linear infinite}.loading-container div:last-child{color:#666;font-size:14px;font-weight:500}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.translation-frame.loading{opacity:.3;transition:opacity .3s ease}.result-container{background-color:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 4px #0000001a}.word-display,.translation-display{margin-bottom:15px}.translation-display{min-height:100px;max-height:300px;overflow-y:auto;padding:10px;background-color:#f8f9fa;border-radius:8px}.translation-display p{margin-bottom:10px;line-height:1.6;color:#333}.placeholder{color:#999;font-style:italic}.translation-item{margin-bottom:15px;padding:10px;background-color:#fff;border-radius:6px;box-shadow:0 1px 3px #0000001a}.translation-item .word{font-weight:600;color:#007aff;margin-bottom:5px}.translation-item .meaning{color:#333;margin-bottom:5px}.translation-item .example{color:#666;font-style:italic;font-size:.9em}