@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400..700&display=swap');

:root {
    --bg: #111;
    --panel: #222;
    --line: #333;
    --text: #eee;
    --muted: #999;
    --accent: #6cf;
    --content: 90%;
}

body, .gradio-container {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: Inter, sans-serif !important;
    font-weight: 450 !important;
}

.gradio-container {
    max-width: var(--content) !important;
}

model-note {
    color: var(--muted);
    display: block;
    margin-bottom: 1rem;
}

button.primary {
    background: var(--accent) !important;
    border: 0 !important;
    color: var(--bg) !important;
}

.block, .form, .panel {
    background: var(--panel) !important;
    border-color: var(--line) !important;
}

button, input, textarea, select, .block, .form, .panel {
    border-radius: 0 !important;
}

#workspace {
    align-items: start;
}

#output img {
    max-height: 80vh;
    object-fit: contain;
}