body{margin:0;min-height:100vh}.about-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;overflow-y:auto}.about-modal{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.close-btn{position:sticky;top:20px;float:right;background:#f5f5f5;border:none;border-radius:50%;width:40px;height:40px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#666;z-index:10;margin:20px 20px 0 0}.close-btn:hover{background:#667eea;color:#fff;transform:rotate(90deg)}.about-content{padding:60px 60px 40px;color:#333;line-height:1.8}.about-content h1{font-size:2.5rem;color:#667eea;margin-bottom:8px;line-height:1.2}.byline{font-size:1.1rem;color:#666;font-style:italic;margin-bottom:40px}.about-content h2{font-size:1.8rem;color:#333;margin:40px 0 20px;display:flex;align-items:center;gap:12px}.about-content h3{font-size:1.3rem;color:#667eea;margin:20px 0 12px}.about-content h4{font-size:1.1rem;color:#333;margin:12px 0 8px}.about-content p{font-size:1.05rem;margin-bottom:16px;color:#555}.about-content section{margin-bottom:40px}.highlight-box,.principle-box,.message-box{background:linear-gradient(135deg,#f8f9ff,#f0f2ff);border-left:4px solid #667eea;border-radius:8px;padding:24px;margin:24px 0}.message-box{background:linear-gradient(135deg,#fff8f0,#fff0e6);border-left-color:#f96}.highlight-box ul,.principle-box ul{margin:16px 0;padding-left:20px}.highlight-box li,.principle-box li{margin:12px 0;font-size:1rem;color:#555}.tech-steps{margin:24px 0}.step{display:flex;gap:20px;margin:24px 0;align-items:flex-start}.step-number{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:700;flex-shrink:0}.step-content h4{color:#667eea;margin-top:0}.step-content p{margin:8px 0 0;font-size:.95rem}.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:24px 0}.benefit{background:#fff;border:2px solid #e0e0e0;border-radius:12px;padding:20px;transition:all .2s}.benefit:hover{border-color:#667eea;box-shadow:0 4px 12px #667eea1a;transform:translateY(-2px)}.benefit h4{color:#667eea;margin-top:0;font-size:1.15rem}.benefit p{font-size:.95rem;margin:8px 0 0;color:#666}.audience-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:24px 0}.audience{background:#f9f9f9;border-radius:8px;padding:16px}.audience h4{color:#667eea;margin-top:0}.audience p{font-size:.9rem;margin:8px 0 0;color:#666}.signature{margin-top:20px;font-weight:500;color:#333}.signature a{color:#667eea;text-decoration:none;border-bottom:1px solid #667eea}.signature a:hover{opacity:.8}.cta-section{text-align:center;margin:48px 0 20px;padding:32px;background:linear-gradient(135deg,#f8f9ff,#f0f2ff);border-radius:12px}.cta-section h3{color:#333;margin:0 0 20px}.cta-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 40px;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s}.cta-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}@media(max-width:768px){.about-content{padding:40px 24px}.about-content h1{font-size:1.8rem}.about-content h2{font-size:1.4rem}.step{flex-direction:column}.step-number{width:40px;height:40px;font-size:1.2rem}.benefits-grid,.audience-list{grid-template-columns:1fr}}.about-modal::-webkit-scrollbar{width:10px}.about-modal::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.about-modal::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}.about-modal::-webkit-scrollbar-thumb:hover{background:#667eea}.language-modal-overlay{position:fixed;inset:0;background:#000000b3;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.language-modal{background:#fff;border-radius:16px;width:100%;max-width:600px;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px #0000004d;animation:slideUp .2s ease-out}.language-modal-header{padding:24px 24px 16px;border-bottom:2px solid #f0f0f0;display:flex;justify-content:space-between;align-items:center}.language-modal-header h3{margin:0;color:#667eea;font-size:1.5rem}.modal-close-btn{background:#f5f5f5;border:none;border-radius:50%;width:36px;height:36px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#666}.modal-close-btn:hover{background:#667eea;color:#fff;transform:rotate(90deg)}.language-search{padding:16px 24px;border-bottom:2px solid #f0f0f0;display:flex;align-items:center;gap:12px}.search-icon{color:#999;flex-shrink:0}.language-search-input{flex:1;border:none;outline:none;font-size:1rem;padding:8px 0;color:#333}.language-search-input::placeholder{color:#999}.language-list{flex:1;overflow-y:auto;padding:8px}.language-item{width:100%;padding:12px 16px;border:none;background:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-radius:8px;transition:all .15s;text-align:left;margin-bottom:4px}.language-item:hover{background:#f8f9ff}.language-item.selected{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.language-item.selected .language-code{color:#fffc}.language-name{font-size:1rem;color:inherit;font-weight:500}.language-code{font-size:.8rem;color:#999;font-family:monospace}.no-results{text-align:center;padding:40px 20px;color:#999}.language-modal-footer{padding:16px 24px;border-top:2px solid #f0f0f0;text-align:center}.language-count{margin:0;font-size:.875rem;color:#666}.language-list::-webkit-scrollbar{width:8px}.language-list::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.language-list::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:10px}.language-list::-webkit-scrollbar-thumb:hover{background:#667eea}@media(max-width:768px){.language-modal{max-height:90vh}.language-modal-header h3{font-size:1.25rem}.language-item{padding:14px 12px}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px;color:#333}.container{max-width:1000px;margin:0 auto}header{text-align:center;margin-bottom:40px;color:#fff}header h1{font-size:3rem;font-weight:600;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.1)}.subtitle{font-size:1.1rem;opacity:.9;margin-bottom:8px}.author{font-size:.95rem;opacity:.85;margin-top:8px}.author a{color:#fff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.5);transition:all .2s}.author a:hover{opacity:1;border-bottom-color:#fff}.translator-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 10px 40px #0000001a}.language-selector-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;margin-bottom:24px;align-items:end}.language-select-wrapper{display:flex;flex-direction:column;gap:8px}.language-select-wrapper label{font-size:.875rem;font-weight:500;color:#666;text-transform:uppercase;letter-spacing:.5px}.language-select{padding:12px 16px;font-size:1rem;border:2px solid #e0e0e0;border-radius:8px;background:#fff;cursor:pointer;transition:all .2s;outline:none}.language-select:hover{border-color:#667eea}.language-select:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.swap-btn{background:#f5f5f5;border:none;border-radius:50%;width:48px;height:48px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:#666}.swap-btn:hover{background:#667eea;color:#fff;transform:rotate(180deg)}.swap-btn:active{transform:rotate(180deg) scale(.95)}.text-areas-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.text-area-wrapper{position:relative}.text-area{width:100%;padding:16px;font-size:1rem;border:2px solid #e0e0e0;border-radius:8px;resize:vertical;font-family:inherit;outline:none;transition:all .2s}.text-area:focus{border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.text-area[readonly]{background:#f9f9f9;cursor:default}.char-counter{position:absolute;bottom:8px;right:12px;font-size:.75rem;color:#999}.copy-btn{position:absolute;bottom:8px;right:12px;background:#fff;border:1px solid #e0e0e0;border-radius:6px;padding:8px;cursor:pointer;color:#666;transition:all .2s;display:flex;align-items:center;justify-content:center}.copy-btn:hover{background:#667eea;color:#fff;border-color:#667eea}.copy-btn:active{transform:scale(.95)}.action-row{display:flex;justify-content:center;margin-bottom:16px}.translate-btn{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;padding:14px 48px;font-size:1.1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:12px;min-width:160px;justify-content:center}.translate-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.translate-btn:active:not(:disabled){transform:translateY(0)}.translate-btn:disabled{opacity:.6;cursor:not-allowed}.spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.status{text-align:center;font-size:.875rem;color:#666;min-height:20px}.progress-container{margin-top:16px}.progress-bar{width:100%;height:8px;background:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:8px}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease;width:0%}.progress-text{text-align:center;font-size:.875rem;color:#666}footer{margin-top:40px;text-align:center;color:#fff;font-size:.875rem}footer p{margin:8px 0}footer a{color:#fff;text-decoration:underline}footer a:hover{opacity:.8}.info{opacity:.8;font-size:.8rem}.learn-more-link{background:none;border:none;color:#fff;text-decoration:underline;cursor:pointer;font-size:.8rem;font-family:inherit;padding:0;transition:opacity .2s}.learn-more-link:hover{opacity:.7}@media(max-width:768px){header h1{font-size:2rem}.translator-card{padding:20px}.language-selector-row{grid-template-columns:1fr;gap:12px}.swap-btn{transform:rotate(90deg);justify-self:center}.swap-btn:hover{transform:rotate(270deg)}.text-areas-row{grid-template-columns:1fr;gap:16px}.translate-btn{width:100%}}