.logo-container{display:flex;justify-content:center;align-items:center;height:150px;background-color:#f0f5e9}.logo-text{font-size:5rem;color:#2e382e;font-weight:700;font-family:Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;text-shadow:2px 2px 4px rgba(0,0,0,.2);margin:0}:root{--primary-bg: #f0f5e9;--secondary-bg: #354f2a;--text-color: #2e382e;--text-color-light: #a3c1ad;--input-bg: #e8f0e4;--border-color: #7a9471;--highlight-color: #8fbc8f;--box-shadow: rgba(0, 0, 0, .2) 0px 4px 6px}body{font-family:Arial,sans-serif;background-color:var(--primary-bg);margin:0;padding:0;display:flex;justify-content:center;align-items:center}.app-container{display:flex;flex-direction:column;gap:20px;padding:20px}.section-title{color:var(--highlight-color);margin-bottom:10px;font-size:1.2rem;font-weight:700}.full-width-section{display:flex;flex-direction:column}.two-column-section{display:flex;gap:20px}.input-section,.output-section{flex:1;display:flex;flex-direction:column}input[type=text]{font-family:monospace;padding:10px;border:1px solid var(--border-color);border-radius:5px;background-color:var(--secondary-bg);color:var(--text-color-light);margin-bottom:15px;box-shadow:inset 0 1px 2px #0000001a}textarea{font-family:monospace;border:1px solid var(--border-color);border-radius:5px;background-color:var(--secondary-bg);color:var(--text-color-light);resize:vertical;height:100%;padding:15px;box-shadow:inset 0 1px 2px #0000001a;white-space:pre;overflow-x:auto;overflow-y:auto}.two-column-section{display:flex;gap:20px;width:100%;overflow-x:auto;flex-wrap:wrap;align-items:stretch}.input-section,.output-section{flex:1;width:300px;display:flex;flex-direction:column;overflow:hidden;flex-grow:1}@media (max-width: 650px){.two-column-section{flex-direction:column;gap:10px}.input-section,.output-section{width:100%}}.pre-container{position:relative;flex:1}pre{font-family:monospace;background-color:var(--secondary-bg);color:var(--text-color-light);padding:15px;border-radius:5px;height:100%;overflow-x:auto;overflow-y:auto;white-space:pre;box-shadow:inset 0 2px 5px #0000004d;margin-top:0}.copy-button{position:absolute;top:10px;right:10px;background-color:#8fbc8f80;color:var(--text-color-light);border:1px solid rgba(143,188,143,.7);border-radius:5px;padding:5px 10px;cursor:pointer;font-size:.8rem;box-shadow:inset 0 1px 3px #00000026;transition:background-color .8s ease,color .8s ease,transform .8s ease}.copy-button.copied{background-color:#22c55e80;color:var(--text-color-light);transform:scale(1.05)}.copy-button:hover{background-color:#8fbc8fb3;color:var(--text-color-light)}.copy-button:active{background-color:#8fbc8fcc;box-shadow:inset 0 2px 5px #00000080}.readme-section{padding:15px;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:5px;box-shadow:var(--box-shadow);color:var(--text-color);line-height:1.6}.readme-section .section-title{margin-bottom:10px;color:var(--highlight-color);font-size:1.2rem;font-weight:700}.readme-section pre{background-color:var(--secondary-bg);color:var(--text-color-light);padding:10px;border-radius:5px;white-space:pre-wrap;margin:10px 0}.footer{text-align:center;margin-top:20px;padding:10px}.footer a{color:var(--secondary-bg);text-decoration:none}.footer a:hover{text-decoration:underline}