:root{--primary-color: #007bff;--secondary-color:#d3f8e2;--secondary-color-dark:#a2e7b8;--bcg-color:#d9eaf7;--heading-color:#0056b3;--border-color:#ccc;--btn-color:#4aa3e7;--font-color-light:#fff;--font-color-dark:#333;--success-color:#28a745;--error-color:#dc3545}:root.dark-mode{--primary-color: #2d2db8;--secondary-color: #aaa;--secondary-color-dark: #7a7a7a;--bcg-color: #121212;--heading-color: #b8d4ff;--border-color: #444;--font-color-light: #eee;--font-color-dark: #fff;--success-color: #47d16b;--error-color: #ff6f61}*{box-sizing:border-box;font-family:sans-serif;transition:background-color .3s ease;transition:transform .3s ease}body{margin:0;background-color:var(--bcg-color);color:var(--font-color-dark)}#root{margin:auto;padding:10px 20px;width:90%;min-height:100vh;display:flex;flex-direction:column;justify-content:center;text-align:center}button{margin:10px;padding:10px 20px;font-size:16px;font-weight:700;color:var(--font-color-light);background-color:var(--btn-color);border:none;border-radius:5px;cursor:pointer}button:hover{background-color:var(--primary-color)}button:active{transform:scale(.98)}.btn-icon{margin:0;padding:0;background-color:unset}.btn-icon:hover{background-color:unset;transform:scale(1.1)}.btn-icon:active{transform:scale(.95)}.app-title{font-size:24px;color:var(--heading-color);font-weight:700;margin:5px auto;width:80%}.theme{position:absolute;top:5px;right:5px;font-size:24px;background-color:var(--secondary-color)}.theme:hover{background-color:var(--secondary-color-dark)}@media (max-width: 768px){#root{width:100%}}@media (max-width: 600px){#root{width:100%;padding:5px}button{margin:5px}}.textarea-container{display:flex;align-items:center;gap:20px;position:relative}.textarea-label{display:block;margin-bottom:8px;font-weight:700}.textarea{width:100%;height:100%;min-height:400px;border:1px solid var(--border-color);border-radius:5px;padding:8px;font-size:16px;resize:none}.textarea-output{background-color:var(--secondary-color);cursor:default}.textarea-output:hover{background-color:var(--secondary-color-dark)}.mode-toggle{font-size:32px}.copy-button{position:absolute;bottom:0;right:0;margin:5px}.copy-button.success{background-color:var(--success-color);cursor:default}.copy-button.error{background-color:var(--error-color);cursor:default}@media (max-width: 768px){.textarea-container{flex-direction:column;gap:5px}.textarea{min-height:100px}.copy-button{position:static}}.mapping-container{text-align:center}.mapping-title{font-size:18px;font-weight:700;margin:5px auto}.mapping-list{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.mapping-item{display:flex;align-items:center;justify-content:space-between;flex-direction:column;text-align:center}.letter-box{display:flex;align-items:center;justify-content:center;border:1px solid var(--border-color);border-radius:5px;width:40px;height:40px;font-size:18px;font-weight:700;background-color:var(--secondary-color)}.arrow{font-size:20px;font-weight:700;margin:5px 0;transform:rotate(90deg)}.arrow.reversed{transform:rotate(-90deg)}.original-letter{color:var(var(--font-color-dark))}.mapped-letter{color:var(--primary-color)}.letter-box:hover{transform:scale(1.1)}.mapping-item:hover .letter-box{background-color:var(--secondary-color-dark)}.mapping-item:hover .original-letter,.mapping-item:hover .mapped-letter{color:var(--primary-color)}@media (max-width: 768px){.mapping-item{flex-direction:row}.arrow{transform:none}.arrow.reversed{transform:rotate(180deg)}}.controls{display:flex;align-items:center;justify-content:center;position:relative}.mode-button{position:absolute;right:0;margin-right:0}.advance-container{display:flex;align-items:center;justify-content:center;gap:50px}.key-input{display:flex;align-items:center;gap:10px}@media (max-width: 1024px){.controls{flex-direction:column-reverse}.advance-container{flex-direction:column;gap:5px}.mode-button{position:static}}