@font-face {
    font-family: plexmono;
    src: url('./fonts/IBMPlexMono-Regular.subset.woff2') format('woff2');
    font-display: swap;
    font-weight: 400;
}
@font-face {
    font-family: plexmono;
    src: url('./fonts/IBMPlexMono-Bold.subset.woff2') format('woff2');
    font-display: swap;
    font-weight: 700;
}
:root {
    color-scheme: dark;
    --background: #202a23;
    --foreground: #c5d5bc;
    --panel: #29372c;
    --border: #849979;
}
:root[data-theme='light'] {
    color-scheme: light;
    --background: #eef2e9;
    --foreground: #293d2c;
    --panel: #e1e8da;
    --border: #708769;
}
@media (prefers-color-scheme: light) {
    :root[data-theme='system'] {
        color-scheme: light;
        --background: #eef2e9;
        --foreground: #293d2c;
        --panel: #e1e8da;
        --border: #708769;
    }
}
* { box-sizing: border-box; }
[hidden], [x-cloak] { display: none !important; }
body { margin: 0; padding: clamp(1rem, 4vw, 3rem); background: var(--background); color: var(--foreground); font-family: plexmono, Consolas, monospace; line-height: 1.6; }
main { max-width: 1120px; margin: auto; min-width: 0; }
header { margin-bottom: 2rem; }
.logo { display: inline-flex; align-items: center; gap: 0.75rem; color: inherit; text-decoration: none; }
h1 { margin: 0; font-size: 2.5rem; line-height: 1; }
label { display: flex; flex-direction: column; gap: 0.4rem; }
textarea, select, button { font: inherit; color: inherit; background: var(--background); border: 2px solid var(--border); border-radius: 4px; padding: 0.65rem 0.8rem; }
button, label[for], label > span:not(.select-control), .output-heading > p { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; }
footer button, footer label > span:not(.select-control) { font-size: 0.75rem; }
textarea { display: block; width: 100%; margin-top: 0.5rem; resize: vertical; min-height: 5rem; }
select { appearance: none; width: 100%; max-width: 100%; padding-right: 2.75rem; cursor: pointer; }
.select-control { display: grid; position: relative; min-width: 0; }
.select-control::after { content: ''; position: absolute; right: 1rem; top: 50%; width: 0.625rem; height: 0.375rem; transform: translateY(-50%); background: var(--foreground); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; }
select, button { height: 3rem; line-height: 1.6; }
button { cursor: pointer; }
button:hover, select:hover { border-color: var(--foreground); }
@supports (appearance: base-select) {
    select, select::picker(select) { appearance: base-select; }
    select::picker-icon { display: none; }
    select:open { border-color: var(--foreground); }
    .select-control:has(select:open)::after { transform: translateY(-50%) rotate(180deg); }
    select::picker(select) { font: inherit; color: var(--foreground); background: var(--panel); border: 2px solid var(--border); border-radius: 4px; margin-block: 0.35rem; padding: 0.25rem; max-height: min(22rem, 60dvh); overflow-y: auto; box-shadow: 0 0.5rem 1.5rem #0003; }
    select option { padding: 0.6rem 0.75rem; border-radius: 2px; cursor: pointer; overflow-wrap: anywhere; }
    select option:hover, select option:focus-visible { background: var(--border); color: var(--background); outline: none; }
    select option:checked { background: var(--foreground); color: var(--background); }
    select option::checkmark { margin-inline-end: 0.5rem; }
}
button:disabled { opacity: 0.5; cursor: default; }
:focus-visible { outline: 3px solid var(--foreground); outline-offset: 4px; }
.controls, .font-navigation, .actions, .preferences, .install-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; }
.controls { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, auto); margin-top: 1rem; }
.controls label { min-width: 0; }
.controls select { width: 100%; }
.font-navigation { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; max-width: 100%; }
.font-navigation button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.output-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 2.5rem; }
.output-heading p { margin: 0; }
.actions { font-size: 0.85rem; }
pre { max-width: 100%; min-height: 10rem; overflow-x: auto; padding: 1.25rem; background: var(--panel); border: 1px solid var(--border); border-radius: 4px; font-family: plexmono, Consolas, monospace; font-size: 12px; line-height: 1.25; tab-size: 4; }
.note, #status, footer { font-size: 0.8rem; }
.note { max-width: 65ch; }
#status { min-height: 1.6em; }
footer { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; }
.install-controls { align-items: center; min-height: 3rem; }
dialog { width: min(30rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; font: inherit; color: var(--foreground); background: var(--panel); border: 2px solid var(--border); border-radius: 4px; }
dialog::backdrop { background: #0008; }
.dialog-content { padding: 1.5rem; }
.dialog-content h2 { margin: 0; font-size: 1.25rem; }
.dialog-content form { display: flex; justify-content: end; margin-top: 1.5rem; }
@media (min-width: 721px) { #next-font { width: 22rem; min-width: 22rem; } }
@media (max-width: 720px) { .controls { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 390px) { .actions { width: 100%; } .actions button { flex: 1 1 auto; } pre { padding: 0.75rem; } }