*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#f5f5f5;min-height:100vh;color:#333}.app{display:flex;flex-direction:column;min-height:100vh}.site-header{background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:#fff;box-shadow:0 2px 8px #0000001a}.header-container{max-width:1200px;margin:0 auto;padding:0 20px}.header-top{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.1)}.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;font-size:1.4rem;font-weight:700}.logo-icon{font-size:1.6rem}.main-nav{display:flex;gap:30px}.nav-link{color:#ffffffe6;text-decoration:none;font-weight:500;transition:color .2s;padding:5px 0;border-bottom:2px solid transparent}.nav-link:hover{color:#fff}.nav-link.active{color:#fff;border-bottom-color:#fff}.header-bottom{padding:30px 0;text-align:center}.header-bottom h1{font-size:2.5rem;margin-bottom:10px}.tagline{font-size:1.1rem;opacity:.95}.main-container{flex:1;max-width:1200px;margin:0 auto;padding:40px 20px;width:100%}.page-content{background:#fff;border-radius:8px;padding:30px;box-shadow:0 1px 3px #0000001a}.page-content h1{color:#1e3a8a;margin-bottom:20px;font-size:2rem}.page-content h2{color:#1f2937;margin:30px 0 15px;font-size:1.5rem}.page-content h3{color:#374151;margin:20px 0 10px;font-size:1.2rem}.page-content p{line-height:1.6;color:#4b5563;margin-bottom:15px}.page-content ul{margin:15px 0 15px 30px;line-height:1.8;color:#4b5563}.lead{font-size:1.15rem;color:#374151;margin-bottom:25px}.site-footer{background:#1f2937;color:#d1d5db;margin-top:auto}.footer-container{max-width:1200px;margin:0 auto;padding:40px 20px 20px}.footer-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:40px;margin-bottom:30px}.footer-section h3{color:#fff;margin-bottom:15px;font-size:1.1rem}.footer-section ul{list-style:none;margin:0}.footer-section li{margin-bottom:8px}.footer-section a{color:#9ca3af;text-decoration:none;transition:color .2s}.footer-section a:hover{color:#fff}.footer-section p{color:#9ca3af;line-height:1.6;margin:0}.footer-bottom{text-align:center;padding-top:20px;border-top:1px solid #374151;color:#6b7280;font-size:.9rem}.converter{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid #e5e7eb}.input-section{display:flex;flex-direction:column;gap:12px}.input-section label{font-size:.95rem;font-weight:500;color:#475569}.input-section input{padding:10px 14px;font-size:1rem;border:1px solid #d1d5db;border-radius:6px;transition:border-color .2s}.input-section input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.convert-btn{padding:10px 20px;font-size:1rem;font-weight:500;color:#fff;background:#3b82f6;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.convert-btn:hover{background:#2563eb}.result-section{margin-top:24px;padding:20px;background:#f9fafb;border-radius:6px;animation:fadeIn .3s ease-in}.result-section h3{color:#1f2937;margin-bottom:16px;font-size:1.1rem;font-weight:600}.result-display{margin-bottom:20px;padding:16px;background:#fff;border-radius:6px;border:1px solid #e5e7eb;max-height:300px;overflow-y:auto}.nato-line{display:flex;align-items:center;padding:8px 0;border-bottom:1px solid #f3f4f6;font-family:Courier New,monospace}.nato-line:last-child{border-bottom:none}.original-char{width:40px;font-weight:600;color:#1e3a8a;font-size:1.1rem;text-align:center}.arrow{color:#9ca3af;margin:0 12px;font-size:.9rem}.nato-word{color:#059669;font-weight:500;font-size:1.05rem}.button-group{display:flex;gap:10px}.copy-btn,.play-btn{padding:8px 16px;font-size:.95rem;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s;border:none}.copy-btn{color:#4b5563;background:#fff;border:1px solid #d1d5db}.copy-btn:hover{background:#f9fafb;border-color:#9ca3af}.play-btn{color:#fff;background:#10b981}.play-btn:hover{background:#059669}.reference{margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid #e5e7eb}.reference h2{color:#1f2937;margin-bottom:16px;font-size:1.3rem;font-weight:600}.alphabet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:8px}.alphabet-item{display:flex;align-items:center;padding:8px 10px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb;transition:all .2s}.alphabet-item:hover{background:#eff6ff;border-color:#3b82f6;transform:translateY(-1px)}.letter{font-weight:600;font-size:1.1rem;color:#1e3a8a;width:24px;text-align:center}.word{margin-left:8px;color:#4b5563;font-size:.9rem}.info{margin-bottom:20px}.info-list{margin:20px 0;padding-left:20px}.info-list li{margin-bottom:10px}.contact-container{display:grid;grid-template-columns:2fr 1fr;gap:40px;margin-top:30px}.contact-form{display:flex;flex-direction:column;gap:20px}.form-group{display:flex;flex-direction:column;gap:8px}.form-group label{font-weight:500;color:#374151}.form-group input,.form-group select,.form-group textarea{padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:1rem;transition:border-color .2s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.submit-btn{padding:12px 24px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:500;cursor:pointer;transition:background .2s}.submit-btn:hover{background:#2563eb}.contact-method{margin-bottom:25px}.contact-method h3{color:#1f2937;margin-bottom:10px}.legal-page section{margin-bottom:30px}.legal-page h2{color:#1e3a8a;border-bottom:2px solid #e5e7eb;padding-bottom:10px}.last-updated{color:#6b7280;font-style:italic;margin-bottom:30px}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:25px 0}.feature-card{padding:20px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.feature-card h3{color:#1e3a8a;margin-bottom:10px}.user-list{margin:20px 0 20px 20px}.step{margin:25px 0;padding:20px;background:#f9fafb;border-left:4px solid #3b82f6;border-radius:4px}.example{margin:20px 0;padding:15px;background:#eff6ff;border-radius:6px}.phonetic-output{list-style:none;margin:10px 0;padding:10px;background:#fff;border-radius:4px;font-family:Courier New,monospace}.use-cases-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:20px 0}.use-case{padding:15px;background:#f9fafb;border-radius:6px;border:1px solid #e5e7eb}.highlight-box{padding:20px;background:#fef3c7;border:1px solid #fbbf24;border-radius:6px;margin:20px 0}.comparison-table{margin:20px 0;padding:15px;background:#f9fafb;border-radius:6px}.historical-list{columns:2;column-gap:40px;list-style:none;margin:10px 0}.timeline{margin:20px 0;padding-left:20px;border-left:3px solid #3b82f6}.timeline li{margin-bottom:15px;position:relative}.variations-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin:20px 0}.variation{padding:15px;background:#f9fafb;border-radius:6px}.faq-list{margin-top:30px}.faq-item{margin-bottom:25px;padding:20px;background:#f9fafb;border-radius:8px;border:1px solid #e5e7eb}.faq-question{color:#1e3a8a;font-size:1.1rem;margin-bottom:10px}.faq-answer{color:#4b5563;line-height:1.6;margin:0}.faq-cta{margin-top:40px;padding:30px;background:#eff6ff;border-radius:8px;text-align:center}@keyframes fadeIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.header-top{flex-direction:column;gap:15px}.main-nav{flex-wrap:wrap;justify-content:center;gap:15px}.header-bottom h1{font-size:1.8rem}.contact-container,.footer-content{grid-template-columns:1fr}.alphabet-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px}.historical-list{columns:1}}