:root { --primary-color: #00ff41; /* Classic Matrix Green */ --secondary-color: #008f11; --background-color: #0d0208; --surface-color: #1a1a1a; --text-color: #d1d1d1; --border-color: #333; --alert-error: #ff5555; --alert-warning: #ffb86c; --alert-info: #8be9fd; --font-mono: "Fira Code", "Courier New", Courier, monospace; } * { box-sizing: border-box; } html, body { background-color: var(--background-color) !important; margin: 0; padding: 0; } body.terminal-bg { font-family: var(--font-mono); color: var(--text-color); line-height: 1.6; background-color: var(--background-color) !important; } .container { max-width: 1400px; margin: 0 auto; padding: 2rem 1.5rem; } header.terminal-header { text-align: left; margin-bottom: 3rem; border-bottom: 2px solid var(--secondary-color); padding-bottom: 1rem; } header.terminal-header h1 { font-size: 2.5rem; color: var(--primary-color) !important; margin: 0; text-shadow: 0 0 10px rgba(0, 255, 65, 0.5); } header.terminal-header h1::before { content: "root@txt2md:~/ "; font-size: 1.2rem; vertical-align: middle; } header.terminal-header p { color: var(--secondary-color); font-size: 1rem; margin: 0.5rem 0 0 0; } .editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; } section h2 { font-size: 1.1rem; margin-bottom: 1.5rem; color: var(--primary-color); letter-spacing: 2px; } textarea { width: 100%; height: 480px; padding: 1.5rem; background-color: var(--surface-color) !important; color: var(--primary-color) !important; border: 1px solid var(--border-color); border-radius: 4px; font-size: 1rem; font-family: var(--font-mono); resize: vertical; outline: none; box-shadow: inset 0 0 15px rgba(0,0,0,0.5); } textarea:focus { border-color: var(--primary-color); box-shadow: 0 0 10px rgba(0, 255, 65, 0.2); } .markdown-output { background-color: #000 !important; border: 1px dashed var(--secondary-color); margin-bottom: 2rem; } button { display: flex; justify-content: center; align-items: center; width: 100%; padding: 1rem; margin-top: 1.5rem; background-color: transparent !important; color: var(--primary-color) !important; border: 2px solid var(--primary-color); border-radius: 4px; font-size: 1.1rem; font-weight: bold; font-family: var(--font-mono); cursor: pointer; transition: all 0.2s ease; text-transform: uppercase; } button:hover:not(:disabled) { background-color: var(--primary-color) !important; color: #000 !important; box-shadow: 0 0 20px rgba(0, 255, 65, 0.4); } button:disabled { border-color: #2a2a2a; color: #2a2a2a !important; cursor: not-allowed; } .spinner { display: none; width: 20px; height: 20px; border: 3px solid rgba(0, 255, 65, 0.1); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 0.8s linear infinite; margin-right: 15px; } @keyframes spin { to { transform: rotate(360deg); } } button.loading .spinner { display: inline-block; } .preview { background-color: var(--surface-color); padding: 2rem; border: 1px solid var(--border-color); border-radius: 4px; height: 480px; overflow-y: auto; color: #eee; font-family: var(--font-mono); } .preview .placeholder { color: #444; text-align: center; margin-top: 4rem; } .flashes { margin-bottom: 2rem; } .alert { padding: 1rem; border-radius: 4px; margin-bottom: 0.5rem; font-family: var(--font-mono); border-left: 5px solid; } .alert.error { background-color: rgba(255, 85, 85, 0.05); color: var(--alert-error); border-color: var(--alert-error); } .alert.warning { background-color: rgba(255, 184, 108, 0.05); color: var(--alert-warning); border-color: var(--alert-warning); } .alert.info { background-color: rgba(139, 233, 253, 0.05); color: var(--alert-info); border-color: var(--alert-info); } .terminal-footer { margin-top: 4rem; text-align: center; border-top: 1px solid var(--border-color); padding-top: 1rem; } .terminal-footer p { color: #444; font-size: 0.8rem; letter-spacing: 1px; } /* Markdown Rendering in Terminal Preview */ .preview h1, .preview h2, .preview h3 { color: var(--primary-color); } .preview blockquote { border-left: 3px solid var(--secondary-color); padding-left: 1rem; color: #777; margin: 1.5rem 0; } .preview pre { background-color: #000; padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 4px; } .preview code { color: #ff79c6; } @media (max-width: 1100px) { .editor-grid { grid-template-columns: 1fr; } }