:root{--primary-color:#0a0a23;--secondary-color:#f5f6f7;--accent-color:#d0d0d5;--background-color:#1b1b32;--font-family:"Roboto",sans-serif;--border-radius:5px}*{box-sizing:border-box}body{background-color:var(--background-color);color:var(--secondary-color);font-family:var(--font-family);margin:0;padding:20px;display:flex;flex-direction:column;align-items:center;min-height:100vh}h1{font-size:2.5rem;margin-bottom:20px;text-align:center}.container{width:100%;max-width:800px;display:flex;flex-direction:column;gap:20px}.io-container{display:grid;grid-template-columns:1fr;gap:20px}@media (min-width:768px){.io-container{grid-template-columns:1fr 1fr}}.box{background-color:var(--primary-color);padding:20px;display:flex;flex-direction:column;gap:10px;height:400px;position:relative}.box,textarea{border:1px solid var(--accent-color);border-radius:var(--border-radius)}textarea{width:100%;flex-grow:1;background-color:#2a2a40;color:var(--secondary-color);padding:10px;font-family:Courier New,Courier,monospace;resize:none;font-size:1.2rem}.controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.char-count{font-size:.9rem}.copy-btn{background-color:#feac32;color:var(--primary-color);border:none;padding:8px 12px;border-radius:var(--border-radius);cursor:pointer;transition:background-color .3s}.copy-btn:hover{background-color:#ffc300}#cancelBtn{background-color:#ff4d4d;margin-top:10px}#cancelBtn:hover{background-color:#ff1a1a}#clearBtn{background-color:#f93}#clearBtn:hover{background-color:#ff8c00}.file-drop-area{border:2px dashed var(--accent-color);border-radius:var(--border-radius);padding:20px;text-align:center;cursor:pointer;transition:background-color .3s,border-color .3s;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative}.file-drop-area.dragover{background-color:#2a2a40;border-color:#feac32}.file-drop-area p{margin:0}.options{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:20px}.options label{font-size:1rem}.options select{background-color:#2a2a40;color:var(--secondary-color);border:1px solid var(--accent-color);border-radius:var(--border-radius);padding:5px}#floating-button{position:fixed;bottom:20px;right:20px;background-color:#feac32;color:var(--primary-color);border:none;padding:15px 20px;border-radius:50%;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 8px rgba(0,0,0,.2);transition:background-color .3s}#floating-button:hover{background-color:#ffc300}.loader{border:4px solid #f3f3f3;border-top:4px solid #feac32;border-radius:50%;width:40px;height:40px;animation:a 1s linear infinite;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px;display:none}@keyframes a{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}