:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;--main-white: #f5f6f7;--main-bg: #1a2b34}*{margin:0;box-sizing:border-box}body{display:flex;place-items:center;min-height:100dvh;color:var(--main-white);background-color:var(--main-bg)}h1{-webkit-user-select:none;user-select:none;color:var(--main-white);font-size:4rem;font-weight:900;margin-bottom:1rem;letter-spacing:.1em;text-transform:uppercase;text-shadow:2px 2px 4px rgba(0,0,0,.3)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}textarea{text-wrap:nowrap}#root{margin:0 auto;width:90%;min-height:100dvh}.container{text-align:center;margin-bottom:2rem;padding:2rem 1rem}.container p{font-size:1.25rem;color:#d1d5db;font-weight:300;margin:0;opacity:.9}.button-container{display:flex;justify-content:center;align-items:center;gap:.75rem;margin:2rem 0;flex-wrap:wrap}.btn{border:none;padding:.75rem 1.5rem;font-size:1rem;font-weight:700;border-radius:.5rem;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:.05em;box-shadow:0 4px 6px #0000004d;color:#fff}.btn:hover{transform:translateY(-2px);box-shadow:0 6px 12px #0006}.btn:active{transform:translateY(0);box-shadow:0 2px 4px #0000004d}.btn-primary{background-color:#dc2626}.btn-primary:hover{background-color:#b91c1c}.btn-python{background-color:#3776ab}.btn-python:hover{color:#3776ab;background-color:#ffd43b;box-shadow:0 0 20px #ffd43b}.btn-php{background-color:#777bb4}.btn-php:hover{color:#777bb4;background-color:#fff;box-shadow:0 0 20px #fff}.btn-clear{background-color:#4b5563}.btn-clear:hover{background-color:#374151}.editor-container{display:flex;flex-direction:row;justify-content:space-between;gap:20px}.input-section,.output-section{display:flex;flex-direction:column;flex:1}.section-title{font-size:1.5rem;font-weight:600;color:var(--main-white);text-align:left}.code-textarea{width:100%;height:400px;background-color:#1f2937;color:#f9fafb;border:2px solid #374151;border-radius:.5rem;padding:1rem;font-size:14px;line-height:1.5;resize:vertical;transition:border-color .3s ease}.code-textarea:focus{outline:none;border-color:#dc2626;box-shadow:0 0 0 3px #dc26261a}.code-textarea::placeholder{color:#9ca3af;font-style:italic}.output-header,.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;height:45px}.output-header button{background-color:#fbbf24;color:#333}.output-header button:hover{transform:none;box-shadow:none;background-color:#ffd365}@media screen and (max-width: 1040px){.editor-container{flex-direction:column}}