.container{width:80%;max-width:800px;background-color:rgba(255,255,255,.8);border-radius:12px;box-shadow:0 8px 12px rgba(0,0,0,.1);padding:1.5rem;margin:2rem auto;display:flex;flex-direction:column}.input-container,.output-container{display:grid;gap:2rem;align-items:stretch;margin-bottom:1rem;min-height:3rem;grid-template-columns:1fr 10rem}.input-area,.output-text{flex:1;padding:.2rem 1rem;align-items:center}.output-text{white-space:nowrap;overflow-x:auto}.input-area{border:1px solid #ccc;transition:border-color .3s ease}.input-button,.output-button{white-space:nowrap;border-radius:4px;box-sizing:border-box;color:white;font-weight:700;cursor:pointer;height:100%;width:100%;padding:.2rem .5rem;transition:opacity .3s ease;display:flex;justify-content:center;align-items:center}.input-button{background-color:#4CAF50}.output-button{background-color:#008CBA}.input-button:hover,.output-button:hover{filter:brightness(90%)}@media (max-width:600px){.container{width:95%;padding:1rem}.input-container,.output-container{grid-template-columns:1fr;gap:.5rem;min-height:auto}.input-button,.output-button{width:100%}}