:root {
    color-scheme: light;
    --background: #f6f7fb;
    --surface: #ffffff;
    --text: #202534;
    --muted: #667085;
    --border: #cfd4dc;
    --primary: #5b5bd6;
    --primary-hover: #4747bd;
    --secondary: #596579;
    --code-background: #edf0f5;
    --focus: rgb(91 91 214 / 30%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --background: #11141b;
    --surface: #1b202b;
    --text: #edf0f7;
    --muted: #a8b0c0;
    --border: #3a4353;
    --primary: #8b8cf8;
    --primary-hover: #a4a5ff;
    --secondary: #aab4c4;
    --code-background: #151922;
    --focus: rgb(139 140 248 / 35%);
}

* { box-sizing: border-box; }

body {
    background: var(--background);
    color: var(--text);
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    min-height: 100vh;
    max-width: 1000px;
    padding: 1rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}

header { align-items: center; display: flex; flex-direction: column; margin-bottom: 0.5rem; text-align: center; }
main { flex: 1; }
.logo-container { align-items: center; display: flex; justify-content: center; margin-bottom: 0.25rem; position: relative; width: 100%; }
.logo { height: auto; max-width: 400px; width: 100%; }
.tagline { color: var(--muted); font-size: 0.9rem; margin: 0 0 0.75rem; }
.theme-switch-wrapper { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
.theme-switch { display: inline-block; height: 26px; position: relative; width: 52px; }
.theme-switch input { height: 1px; opacity: 0; position: absolute; width: 1px; }
.slider { background: #98a2b3; border-radius: 34px; cursor: pointer; inset: 0; position: absolute; transition: 0.2s; }
.slider::before { align-items: center; background: #fff; border-radius: 50%; bottom: 3px; content: "☀️"; display: flex; font-size: 12px; height: 20px; justify-content: center; left: 4px; position: absolute; transition: 0.2s; width: 20px; }
.theme-switch input:checked + .slider { background: var(--primary); }
.theme-switch input:checked + .slider::before { background: #1a1a1a; content: "🌙"; transform: translateX(24px); }
.theme-switch input:focus-visible + .slider { box-shadow: 0 0 0 4px var(--focus); }

.mode-selector { border: 0; display: flex; gap: 2rem; justify-content: center; margin: 0 0 1rem; padding: 0; }
.mode-selector label { align-items: center; cursor: pointer; display: flex; gap: 0.5rem; }
input[type="radio"] { accent-color: var(--primary); }

#input-area { background: var(--surface); border: 2px solid var(--primary); border-radius: 8px; max-height: 500px; min-height: 250px; overflow-y: auto; padding: 1rem; }
#input-area:focus { box-shadow: 0 0 0 3px var(--focus); outline: none; }
#input-area:empty::before { color: var(--muted); content: attr(data-placeholder); cursor: text; }
#input-area.markdown-input { font-family: "Courier New", Courier, monospace; white-space: pre-wrap; }

.controls { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin: 1rem 0; }
button { background: var(--primary); border: 1px solid var(--primary); border-radius: 7px; color: #fff; cursor: pointer; font: inherit; font-weight: 650; padding: 0.65rem 1rem; }
button:hover { background: var(--primary-hover); }
button:focus-visible { box-shadow: 0 0 0 4px var(--focus); outline: none; }
button:disabled { cursor: wait; opacity: 0.65; }
button.secondary { background: var(--secondary); border-color: var(--secondary); }
button.outline { background: transparent; color: var(--secondary); }

.status { color: var(--muted); min-height: 1.5rem; text-align: center; }
.status.error { color: #d92d20; }
#output-container { margin: 1rem 0 2rem; }
#output { background: var(--code-background); border: 1px dashed var(--muted); border-radius: 8px; font-family: "Courier New", Courier, monospace; overflow-wrap: anywhere; padding: 1rem; white-space: pre-wrap; }
#output-html { background: var(--surface); border: 2px solid var(--secondary); border-radius: 8px; margin-top: 0.5rem; padding: 1rem; }
.hidden, [hidden] { display: none !important; }
.visually-hidden { clip: rect(0 0 0 0); clip-path: inset(50%); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px; }

footer { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.85rem; margin-top: 2rem; padding: 2rem 0 1rem; text-align: center; }

@media (max-width: 640px) {
    .logo { max-width: 280px; }
    .mode-selector { align-items: flex-start; flex-direction: column; gap: 0.75rem; }
    .theme-switch-wrapper { right: 0.25rem; }
}