:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;color:#ffffffe6;background-color:transparent;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:transparent}#root{width:100%;min-height:100vh;background-color:transparent}a{font-weight:500;color:#f0a500;text-decoration:inherit}a:hover{color:#e09600}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#f0a500;color:#fff;cursor:pointer;transition:border-color .25s,background-color .25s}button:hover{background-color:#e09600}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center;background-color:transparent}.app{width:100%;min-height:100vh;background-color:transparent;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;display:flex;flex-direction:column;align-items:center}*{margin:0;padding:0;box-sizing:border-box}body{color:#ffffffe6;line-height:1.6}h1,h2,h3,h4,h5,h6{font-weight:600}.app:before,.app:after{content:"";position:absolute;width:100%;height:100%;background-image:url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23f0a500' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");z-index:-1;pointer-events:none}body{background-color:#3d5e94;margin:0;padding:0;background-image:url(/img1.jpg);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}.translator-container{display:flex;flex-direction:column;align-items:center;max-width:1200px;width:100%;margin:0 auto;padding:20px;min-height:100vh;position:relative;z-index:1;background-color:transparent}.translator-container:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-color:#3d5e941a;z-index:-1}.translator-container>*{background-color:transparent}.translator-header{display:flex;align-items:center;margin-bottom:40px;width:100%;background-color:#2d4a7acc;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:20px 25px;border-radius:10px;box-shadow:0 4px 12px #0000004d}.logo{color:#f0a500;font-size:32px;font-weight:700;margin:0}.beta-tag{background-color:#f0a500;color:#fff;font-size:14px;padding:3px 10px;border-radius:10px;margin-left:12px;font-weight:500}.panels-container{display:flex;justify-content:center;align-items:stretch;width:100%;gap:20px;margin-bottom:40px;position:relative;background-color:transparent}.panel{flex:1;background-color:#ffffff26;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 4px 12px #0003;overflow:hidden;display:flex;flex-direction:column;max-width:500px;border:1px solid rgba(255,255,255,.3)}.panel-header{padding:20px;border-bottom:1px solid rgba(255,255,255,.3);display:flex;justify-content:space-between;align-items:center;background-color:#fff3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.panel-header label{font-weight:500;font-size:18px;color:#ffffffe6}.language-selector{padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background-color:#ffffff14;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:16px;outline:none;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 8px #0000001a}.language-selector:hover{background-color:#ffffff1f;border-color:#ffffff80}.language-selector:focus{border-color:#f0a500cc;box-shadow:0 0 0 2px #f0a50033;background-color:#ffffff1a}.language-selector option{background-color:#2d4a7ae6;color:#fff;font-size:16px;padding:10px}.panel-content{padding:20px;flex:1;display:flex;flex-direction:column;position:relative;min-height:200px}.transcript-text,.translation-text{margin:0;font-size:18px;line-height:1.6;color:#ffffffe6;word-break:break-word}.placeholder-text{color:#ffffff80;font-size:18px;margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;text-align:center}.swap-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:68px;height:68px;border-radius:50%;background-color:#f0a500b3;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);color:#ffffffe6;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);cursor:pointer;z-index:10;box-shadow:0 2px 8px #0003;transition:all .2s ease}.swap-button:hover{background-color:#f0a500e6;transform:translate(-50%,-50%) scale(1.05)}.play-button{position:absolute;bottom:10px;right:10px;width:60px;height:60px;border-radius:50%;background-color:#f0a500cc;color:#fffffff2;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 2px 4px #0000001a;transition:all .2s ease;padding:0}.play-button:hover{background-color:#f0a500e6;transform:scale(1.05)}.controls{display:flex;flex-direction:column;align-items:center;margin-top:20px;position:relative}.record-button{width:100px;height:100px;border-radius:50%;background-color:#ffffff40;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#ffffffe6;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.3);cursor:pointer;box-shadow:0 4px 12px #0003;transition:all .2s ease;margin-bottom:10px}.record-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #00000026}.record-button.recording{background-color:#f0a500cc;color:#ffffffe6;animation:pulse 1.2s infinite;border-color:#fff9;box-shadow:0 0 #f0a50066}.record-label{font-size:16px;color:#ffffffb3;margin:12px 0}.reset-button{position:absolute;right:-80px;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;background-color:#3d5e9499;color:#fff;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.reset-button:hover{background-color:#3d5e94cc}.status-indicator{height:24px;margin:15px 0;font-size:16px;color:#ffffffb3}.error-message{background-color:#d32f2f80;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;padding:12px 16px;border-radius:8px;margin:20px 0;width:100%;max-width:600px;text-align:center;border-left:4px solid #d32f2f}.hidden-audio{display:none}@keyframes pulse{0%{box-shadow:0 0 #f0a50099;transform:scale(1)}50%{box-shadow:0 0 0 15px #f0a50000;transform:scale(1.05)}to{box-shadow:0 0 #f0a50000;transform:scale(1)}}@media (max-width: 768px){.panels-container{flex-direction:column;align-items:center}.panel{width:100%;max-width:100%}.swap-button{position:relative;top:0;left:0;transform:none;margin:16px 0}.swap-button:hover{transform:scale(1.05)}.reset-button{position:static;transform:none;margin-top:16px}.controls{flex-direction:row;gap:20px;align-items:center}.record-label{margin:0 0 0 8px}}.record-button,.reset-button{display:flex;align-items:center;justify-content:center;padding:0}