:root { --bg: #0f172a; --panel: #111827; --accent: #3b82f6; --accent-dark: #1e40af; --text: #e5e7eb; --muted: #9ca3af; } * { box-sizing: border-box; } body { margin: 0; font-family: 'Inter', sans-serif; background: linear-gradient(135deg, #0f172a, #020617); color: var(--text); height: 100vh; display: flex; flex-direction: column; } header { padding: 16px; text-align: center; font-size: 20px; font-weight: 600; background: rgba(17, 24, 39, 0.8); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.1); } .container { flex: 1; display: flex; gap: 12px; padding: 12px; } #console { width: 40%; background: rgba(0,0,0,0.7); border: 1px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 12px; overflow-y: auto; font-family: monospace; font-size: 13px; white-space: pre-wrap; color: #00ff00; text-shadow: 0 0 5px #00ff00; } #editorContainer { width: 60%; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); } .controls { display: flex; justify-content: center; gap: 10px; padding: 10px; background: rgba(17, 24, 39, 0.6); border-top: 1px solid rgba(255,255,255,0.1); } button { padding: 10px 18px; border: none; border-radius: 8px; background: var(--accent); color: white; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } button:hover { background: var(--accent-dark); transform: translateY(-1px); } button:active { transform: scale(0.98); } .empty { color: var(--muted); text-align: center; margin-top: 20px; } .separator { margin: 10px 0; border-top: 1px solid rgba(255,255,255,0.2); } ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #475569; }