:root {
color-scheme: light;
--bg: #ffffff;
--fg: #1a1d23;
--muted: #5c6570;
--accent: #2563eb;
--border: #d0d5dd;
--message-max-width: 30rem;
font-family: "Segoe UI", "Helvetica Neue", sans-serif;
}
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: auto;
min-height: 0;
background: #fff;
color: var(--fg);
overflow: visible;
}
body {
display: block;
width: fit-content;
max-width: 100%;
}
.dialog {
display: flex;
flex-direction: column;
margin: 0;
background: #fff;
border: none;
border-radius: 0;
box-shadow: none;
}
h1 {
margin: 0 0 0.75rem;
font-size: 1.25rem;
font-weight: 650;
overflow-wrap: anywhere;
word-break: break-word;
}
.message {
margin: 0 0 1rem;
color: var(--muted);
line-height: 1.45;
white-space: pre-wrap;
overflow-wrap: anywhere;
word-break: break-word;
max-width: var(--message-max-width);
}
.buttons {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: flex-end;
margin-top: 0.25rem;
padding-top: 0.5rem;
}
button {
appearance: none;
border: 1px solid var(--border);
background: #fff;
color: var(--fg);
border-radius: 8px;
padding: 0.5rem 0.9rem;
font: inherit;
cursor: pointer;
}
button.primary {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
button:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.error {
color: #b91c1c;
padding: 1rem;
}