:root {
    color-scheme: light;
    --bg: #ffffff;
    --surface: #f2f2f2;
    --card-bg: #ffffff;
    --border: #bfbfbf;
    --text: #111111;
    --muted: #666666;
    --radius: 6px;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #111111;
        --surface: #222222;
        --card-bg: #1a1a1a;
        --border: #3a3a3a;
        --text: #f5f5f5;
        --muted: #a0a0a0;
    }
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    background: var(--bg);
    color: var(--text);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.title,
#file,
#preview,
#download {
    width: min(100%, 28rem);
    border-radius: var(--radius);
}

.title {
    margin-top: 0.25rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
}

#file,
#download {
    min-height: 3rem;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

#file {
    padding: 0.6rem;
}

#file::file-selector-button {
    margin-right: 0.75rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

#preview {
    display: block;
    height: auto;
    border: 1px solid var(--border);
    background: var(--surface);
}

#download {
    cursor: pointer;
    font-weight: 800;
}

#download:hover:not(:disabled),
#file::file-selector-button:hover {
    background: var(--card-bg);
}

#download:disabled {
    color: var(--muted);
    cursor: not-allowed;
    opacity: 0.7;
}

#file:focus,
#download:focus,
#file::file-selector-button:focus {
    outline: 1px solid var(--text);
    outline-offset: 1px;
}