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 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}#output{overflow-y:scroll;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.3) transparent;-webkit-overflow-scrolling:touch}#output iframe{display:block;width:100%;height:100%;border:none;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.3) 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{width:80%;height:400px;margin:2em auto 0;border:1px solid #555;border-radius:4px;background-color:#1e1e1e;overflow-y:auto;display:block}@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}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}