body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#121212;color:#e0e0e0;min-height:100vh;padding-left:20px;padding-right:20px}header{text-align:center;margin-bottom:30px}header h1,header p{text-align:center;font-size:3rem;font-weight:bold;background:url('images/bg.webp') no-repeat center center;background-size:cover;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:1px 1px 2px rgba(0,0,0,0.5),-1px -1px 2px rgba(255,255,255,0.3)}header p{font-size:1.5rem;text-shadow:1px 1px 2px rgba(0,0,0,0.5),-1px -1px 2px rgba(255,255,255,0.3)}.editor-container{width:80%;margin:0 auto;position:relative;padding:1em;box-sizing:border-box;border:1px solid #555;border-radius:4px;background-color:#1e1e1e}.editor-group{display:flex;justify-content:space-between;gap:1.5em;flex-wrap:wrap}.editor-item{flex:1;min-width:200px;position:relative;transition:all 0.3s ease}.editor-item.collapsed{flex-grow:0}.editor-item.open{flex-grow:1}.editor-item textarea{display:block;width:100%;padding:0.5em;box-sizing:border-box;font-family:monospace;margin-bottom:1em;background:#121212;color:rgb(16,194,16);margin-top:30px;resize:none}.editor-item textarea::-webkit-scrollbar,#output::-webkit-scrollbar{width:4px;height:4px}.editor-item textarea::-webkit-scrollbar-thumb,#output::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,0.3);border-radius:10px}.editor-item textarea::-webkit-scrollbar-track,#output::-webkit-scrollbar-track{background-color:transparent}.editor-item label{display:block;font-weight:bold;margin-top:0;margin-bottom:0.5em}.expand-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;position:absolute;left:95%;transform:translateX(-50%);top:0;z-index:1}.expand-btn:hover{color:#ff7e5f}.button-container{margin-top:1em;text-align:center;display:flex;justify-content:center;gap:1em}.button-container button{padding:0.5em 1em;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5em;width:120px;height:40px;border-radius:4px;border:none;transition:background-color 0.3s ease,color 0.3s ease}#run-button{background-color:#1778b9;color:#fff}#run-button:hover{background-color:#1778b9}#run-button span{display:inline}#run-button:hover span{display:none}#run-button:hover::before{content:"\f04b";font-family:"Font Awesome 5 Free";font-weight:900}#clear-button{background-color:#c82333;color:#fff}#clear-button:hover{background-color:#c82333}#clear-button span{display:inline}#clear-button:hover span{display:none}#clear-button:hover::before{content:"\f1f8";font-family:"Font Awesome 5 Free";font-weight:900}#output{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding:10px;border:1px solid #ccc;background-color:#f9f9f9;max-height:300px;overflow-y:auto;font-family:monospace;margin:0 5em}@media (max-width:1024px){.editor-group{flex-direction:column;gap:1em}.editor-item{flex:none;width:100%;margin-bottom:1.5em}.editor-item.collapsed textarea{height:4em}.button-container{margin-top:2em}#output{width:80%}}#output{width:80%;height:400px;margin:2em auto 2em;border:1px solid #555;border-radius:4px;background-color:#1e1e1e;overflow-y:auto;display:block}body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#121212;color:#e0e0e0;min-height:100vh;padding-left:20px;padding-right:20px;padding-bottom:4em}.footer{background-color:#1e1e1e;color:#f2f2f2;text-align:center;padding:20px;position:fixed;bottom:0;left:0;width:100%;font-size:14px;z-index:1000}.footer a{color:#f2f2f2;text-decoration:none}.footer a:hover{text-decoration:underline}.copy-buttons{position:absolute;bottom:2em;left:50%;transform:translateX(-50%);display:flex;gap:10px;justify-content:center}.output-container{position:relative;padding-bottom:5em}pre#css-output{background-color:#1e1e2f;border:1px solid #00ff00;color:white;padding:2em;margin:10px 0;font-family:monospace;overflow-x:auto;border-radius:4px;white-space:pre-wrap;word-wrap:break-word}pre#js-output{background-color:#2f1e1e;border:1px solid #00ff00;color:white;padding:2em;margin:10px 0;font-family:monospace;overflow-x:auto;border-radius:4px;white-space:pre-wrap;word-wrap:break-word}.editor-container,.output-container{width:80%;margin:0 auto;box-sizing:border-box}pre#output{width:100%;margin:0;padding:10px;box-sizing:border-box;overflow-x:auto;margin-top:2em}.editor-container textarea{width:100%;box-sizing:border-box}.copy-buttons{display:none;justify-content:center;margin-top:10px}.copy-buttons button{width:120px;height:40px;padding:10px 20px;background-color:#1778b9;color:white;border:none;border-radius:5px;cursor:pointer;font-size:14px;margin:0 4px;display:flex;align-items:center;justify-content:center;transition:background-color 0.3s ease,color 0.3s ease}.copy-buttons button:hover{background-color:#0a8d0e}.copy-buttons button:active{background-color:#3b8bb5}.copy-buttons button.copied{background-color:#0a8d0e;color:white}.copy-buttons button .icon{display:none;margin-left:5px}.copy-buttons button.copied .button-text{display:none}.copy-buttons button.copied .icon{display:inline-block}.copy-buttons button:hover{background-color:#0a8d0e}.copy-buttons button:active{background-color:#3b8bb5}body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#121212;color:#e0e0e0;min-height:100vh;padding-left:20px;padding-right:20px}header{text-align:center;margin-bottom:30px}header h1,header p{text-align:center;font-size:3rem;font-weight:bold;background:url('images/bg.webp') no-repeat center center;background-size:cover;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:1px 1px 2px rgba(0,0,0,0.5),-1px -1px 2px rgba(255,255,255,0.3)}header p{font-size:1.5rem;text-shadow:1px 1px 2px rgba(0,0,0,0.5),-1px -1px 2px rgba(255,255,255,0.3)}.editor-container{width:80%;margin:0 auto;position:relative;padding:1em;box-sizing:border-box;border:1px solid #555;border-radius:4px;background-color:#1e1e1e}.editor-group{display:flex;justify-content:space-between;gap:1.5em;flex-wrap:wrap}.editor-item{flex:1;min-width:200px;position:relative;transition:all 0.3s ease}.editor-item.collapsed{flex-grow:0}.editor-item.open{flex-grow:1}.editor-item textarea{display:block;width:100%;padding:0.5em;box-sizing:border-box;font-family:monospace;margin-bottom:1em;background:#121212;color:rgb(16,194,16);margin-top:30px;resize:none}.editor-item textarea::-webkit-scrollbar,#output::-webkit-scrollbar{width:4px;height:4px}.editor-item textarea::-webkit-scrollbar-thumb,#output::-webkit-scrollbar-thumb{background-color:rgba(255,255,255,0.3);border-radius:10px}.editor-item textarea::-webkit-scrollbar-track,#output::-webkit-scrollbar-track{background-color:transparent}.editor-item label{display:block;font-weight:bold;margin-top:0;margin-bottom:0.5em}.expand-btn{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;position:absolute;left:95%;transform:translateX(-50%);top:0;z-index:1}.expand-btn:hover{color:#ff7e5f}.button-container{margin-top:1em;text-align:center;display:flex;justify-content:center;gap:1em}.button-container button{padding:0.5em 1em;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:0.5em;width:120px;height:40px;border-radius:4px;border:none;transition:background-color 0.3s ease,color 0.3s ease}#run-button{background-color:#1778b9;color:#fff}#run-button:hover{background-color:#1778b9}#run-button span{display:inline}#run-button:hover span{display:none}#run-button:hover::before{content:"\f04b";font-family:"Font Awesome 5 Free";font-weight:900}#clear-button{background-color:#c82333;color:#fff}#clear-button:hover{background-color:#c82333}#clear-button span{display:inline}#clear-button:hover span{display:none}#clear-button:hover::before{content:"\f1f8";font-family:"Font Awesome 5 Free";font-weight:900}#output{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;padding:10px;border:1px solid #ccc;background-color:#f9f9f9;max-height:300px;overflow-y:auto;font-family:monospace;margin:0 5em}@media (max-width:1024px){.editor-group{flex-direction:column;gap:1em}.editor-item{flex:none;width:100%;margin-bottom:1.5em}.editor-item.collapsed textarea{height:4em}.button-container{margin-top:2em}#output{width:80%}}#output{width:80%;height:400px;margin:2em auto 2em;border:1px solid #555;border-radius:4px;background-color:#1e1e1e;overflow-y:auto;display:block}body{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#121212;color:#e0e0e0;min-height:100vh;padding-left:20px;padding-right:20px;padding-bottom:4em}.footer{background-color:#1e1e1e;color:#f2f2f2;text-align:center;padding:20px;position:fixed;bottom:0;left:0;width:100%;font-size:14px;z-index:1000}.footer a{color:#f2f2f2;text-decoration:none}.footer a:hover{text-decoration:underline}.copy-buttons{position:absolute;bottom:2em;left:50%;transform:translateX(-50%);display:flex;gap:10px;justify-content:center}.output-container{position:relative;padding-bottom:5em}pre#css-output{background-color:#1e1e2f;border:1px solid #00ff00;color:white;padding:2em;margin:10px 0;font-family:monospace;overflow-x:auto;border-radius:4px;white-space:pre-wrap;word-wrap:break-word}pre#js-output{background-color:#2f1e1e;border:1px solid #00ff00;color:white;padding:2em;margin:10px 0;font-family:monospace;overflow-x:auto;border-radius:4px;white-space:pre-wrap;word-wrap:break-word}.editor-container,.output-container{width:80%;margin:0 auto;box-sizing:border-box}pre#output{width:100%;margin:0;padding:10px;box-sizing:border-box;overflow-x:auto;margin-top:2em}.editor-container textarea{width:100%;box-sizing:border-box}.copy-buttons{display:none;justify-content:center;margin-top:10px}.copy-buttons button{width:120px;height:40px;padding:10px 20px;background-color:#1778b9;color:white;border:none;border-radius:5px;cursor:pointer;font-size:14px;margin:0 5px;display:flex;align-items:center;justify-content:center;transition:background-color 0.3s ease,color 0.3s ease}.copy-buttons button:hover{background-color:#0a8d0e}.copy-buttons button:active{background-color:#3b8bb5}.copy-buttons button.copied{background-color:#0a8d0e;color:white}.copy-buttons button .icon{display:none;margin-left:5px}.copy-buttons button.copied .button-text{display:none}.copy-buttons button.copied .icon{display:inline-block}.copy-buttons button:hover{background-color:#0a8d0e}.copy-buttons button:active{background-color:#3b8bb5}