:root { color-scheme: light dark; font-family: system-ui, sans-serif; line-height: 1.6; }
body { margin: 0; background: light-dark(#f5f7fb, #141a24); color: light-dark(#19273c, #e5ecf8); }
a { color: light-dark(#1954a3, #a3c8ff); text-underline-offset: .2em; }
header, main, noscript { max-width: 70rem; margin: auto; padding: 1.5rem; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.brand { font-weight: 700; text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; }
nav a[aria-current="page"] { font-weight: 700; }
h1 { margin-top: 0; }
.overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1rem; }
section { border: 1px solid light-dark(#d8e1ef, #3b4759); border-radius: .75rem; padding: 1.5rem; background: light-dark(#fff, #1c2635); }
section h2 { margin-top: 0; }
dt { font-size: .85rem; font-weight: 600; }
dd { margin: 0 0 .8rem; overflow-wrap: anywhere; }
ul { padding-left: 1.3rem; }
.note { font-size: .9rem; color: light-dark(#4b5c74, #b7c4d8); }
.error { border-left: .25rem solid light-dark(#b52828, #ff9b9b); padding-left: 1rem; }
:focus-visible { outline: 3px solid light-dark(#1954a3, #a3c8ff); outline-offset: 4px; }

[hidden] { display: none !important; }
form { display: grid; gap: 0.75rem; max-width: 26rem; }
input, button { font: inherit; padding: 0.65rem; }
button { cursor: pointer; }