.app{color:#000;background-color:#fff;min-height:100vh;padding:1rem;font-family:Arial,sans-serif;transition:background-color .3s,color .3s}.app.dark{color:#fff;background-color:#121212}.app-container{max-width:1200px;margin:0 auto;padding:1rem 0}h1{text-align:center;margin-bottom:1.5rem;font-size:2rem}textarea{resize:vertical;box-sizing:border-box;color:#000;background-color:#f0f0f0;border:1px solid #ccc;border-radius:4px;width:100%;min-height:200px;margin-bottom:1rem;padding:1rem;font-family:monospace;font-size:1rem;transition:background-color .3s,color .3s,border-color .3s}.app.dark textarea{color:#eee;background-color:#1e1e1e;border-color:#444}.textarea-container{gap:1rem;margin-bottom:1rem;display:flex}.editor-panel{flex:1;min-width:0}.editor-header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.editor-header label{font-weight:700}.editor-panel textarea{min-height:300px}.copy-button{min-width:112px;margin-right:0}button{cursor:pointer;color:#fff;box-sizing:border-box;background-color:#007bff;border:none;border-radius:4px;align-items:center;min-width:100px;height:40px;margin:.5rem .5rem 1rem;padding:.6rem 1.2rem;font-size:1rem;line-height:1.2;transition:background-color .2s;display:inline-flex}button:hover{background-color:#0056b3}.output{background-color:#f9f9f9;border:1px solid #ddd;border-radius:4px;padding:1rem}.error-message{color:red;margin-top:.5rem;font-size:.9rem}footer p{color:#555;margin:0;font-size:1rem}.app.dark footer p{color:#bbb}footer a{color:#007bff;text-decoration:underline;transition:color .2s}footer a:hover{color:#0056b3}.app.dark a{color:#ffdf5d}.app.dark a:hover{color:#fff3a6}.preview{color:#000;background-color:#fff;border:1px solid #ccc;max-height:500px;margin-top:1rem;padding:1rem;overflow-y:auto}.app.dark .preview{color:#ddd;background-color:#1e1e1e;border-color:#444}.version{font-variant-numeric:tabular-nums}footer{max-width:1200px;margin:0 auto}@media (width<=700px){.textarea-container{flex-direction:column}.editor-panel textarea{min-height:220px}}