body { font-family: system-ui, sans-serif; margin: 0; background: #f4f6f8; color: #1d2733; }
main { max-width: 42rem; margin: 2rem auto; padding: 0 1rem; }
h1 { font-size: 1.4rem; }
dl { display: grid; grid-template-columns: 9rem 1fr; gap: .4rem 1rem; background: #fff; padding: 1rem; border-radius: .5rem; }
dt { font-weight: 600; }
dd { margin: 0; overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, Menlo, monospace; font-size: .9rem; }
.note { color: #50606f; }
.problem { color: #a12020; font-weight: 600; }
.buttons button { padding: .55rem 1rem; margin-right: .5rem; border: 1px solid #2b6f77; background: #2b6f77; color: #fff; border-radius: .4rem; cursor: pointer; }
.buttons button:disabled { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) { body { background: #12181e; color: #e6ebef; } dl { background: #1b242c; } .note { color: #9fb0bf; } }

details { margin-top: 1rem; }
pre#diag { white-space: pre-wrap; overflow-wrap: anywhere; background: #fff; padding: .75rem; border-radius: .5rem; font-size: .8rem; }
@media (prefers-color-scheme: dark) { pre#diag { background: #1b242c; } }