body {
     font-family: Arial, sans-serif;
     text-align: center;
     margin-top: 3rem;
     background: #f8f9fa;
     color: #333;
 }

 .container {
     max-width: 800px;
     margin: 0 auto;
     padding: 2rem;
     background: white;
     border-radius: 16px;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
 }

 h2 {
     color: #1a73e8;
     margin-bottom: 1.5rem;
 }

 .input-group {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 12px;
 }

 textarea {
     color: #333;
     width: 85vw;
     max-width: 100%;
     min-height: 38vh;
     padding: 14px;
     font-size: 1.4rem;
     border: 1px solid #ddd;
     border-radius: 10px;
     resize: vertical;
     font-family: inherit;
 }

 .controls {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: 16px;
     flex-wrap: wrap;
     margin: 1rem 0;
 }

 select,
 input[type="range"] {
     padding: 8px;
     font-size: 15px;
     border: 1px solid #ddd;
     border-radius: 8px;
 }

 .slider-container {
     display: flex;
     align-items: center;
     gap: 8px;
 }

 .slider-container span {
     min-width: 40px;
     font-weight: bold;
     color: #1a73e8;
 }

 button {
     padding: 12px 28px;
     font-size: 16px;
     background: #1a73e8;
     color: white;
     border: none;
     border-radius: 10px;
     cursor: pointer;
     transition: background 0.2s;
 }

 button:hover:not(:disabled) {
     background: #1557b0;
 }

 button:disabled {
     background: #ccc;
     cursor: not-allowed;
 }

 audio {
     margin-top: 1.5rem;
     width: 65vw;
     max-width: 100%;
 }

 .flag {
     font-size: 2.2rem;
     margin-bottom: 0.5rem;
 }

 .effect-output {
     margin-top: 1rem;
     font-family: monospace;
     color: #2c3e50;
     white-space: pre-wrap;
     text-align: left;
     background: #f4f6f9;
     padding: 1rem;
     border-radius: 8px;
     min-height: 60px;
     width: 65vw;
     max-width: 100%;
     margin-left: auto;
     margin-right: auto;
     display: none;
     line-height: 1.6;
 }

 /* Modal Styles */
 .modal {
     display: none;
     position: fixed;
     z-index: 1000;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(0, 0, 0, 0.5);
     justify-content: center;
     align-items: center;
 }

 .modal-content {
     background: white;
     padding: 2rem;
     border-radius: 16px;
     text-align: center;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
     animation: fadeIn 0.3s ease;
 }

 .spinner {
     border: 4px solid #f3f3f3;
     border-top: 4px solid #1a73e8;
     border-radius: 50%;
     width: 40px;
     height: 40px;
     animation: spin 1s linear infinite;
     margin: 0 auto 1rem;
 }

 @keyframes spin {
     0% {
         transform: rotate(0deg);
     }

     100% {
         transform: rotate(360deg);
     }
 }

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.9);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 /* Keyboard Shortcuts Hint */
 .shortcuts {
     margin-top: 1rem;
     font-size: 0.9rem;
     color: #555;
     background: #e8f4ff;
     padding: 0.8rem;
     border-radius: 8px;
     display: none;
     max-width: 65vw;
     margin-left: auto;
     margin-right: auto;
 }

 .shortcuts kbd {
     background: #333;
     color: white;
     padding: 2px 6px;
     border-radius: 4px;
     font-family: monospace;
     font-size: 0.85rem;
 }

 footer {
     margin-top: 3rem;
     padding: 2rem;
     background: #f1f3f5;
     border-top: 1px solid #ddd;
     font-size: 0.95rem;
     color: #444;
 }