:root {
  color-scheme: light;
  font: 16px/1.55 system-ui, sans-serif;
  background: #f1f5f8;
  color: #11253c;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #005c68; text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #118898; outline-offset: 3px; }
header {
  background: #102640;
  color: white;
  padding: 1rem max(1rem, calc((100% - 74rem) / 2));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
header a { color: white; font-weight: 750; }
main { max-width: 76rem; margin: 0 auto; padding: 1rem; overflow-wrap: anywhere; }
h1, h2, p { margin: 0 0 .65rem; }
h1 { font-size: clamp(1.65rem, 5vw, 2.5rem); line-height: 1.15; }
h2 { font-size: 1.2rem; }
.eyebrow { color: #005c68; font-weight: 700; }
.panel {
  margin: 1rem 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  background: white;
  border: 1px solid #cfdae3;
  border-radius: .8rem;
}
.auth { max-width: 29rem; margin: clamp(1rem, 8vh, 5rem) auto; }
nav { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.2rem 0; }
nav a { padding: .5rem .75rem; border-radius: .45rem; }
nav a[aria-current] { background: #005c68; color: white; }
ul { list-style: none; padding: 0; margin: 0; }
li { padding: .85rem 0; border-top: 1px solid #cfdae3; }
li:first-child { border-top: 0; }
.row { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; justify-content: space-between; }
small { display: block; color: #425a72; }
label { display: block; font-weight: 650; margin-top: .8rem; }
input, button { font: inherit; }
input { width: 100%; padding: .65rem; border: 1px solid #637b91; border-radius: .4rem; }
button { color: white; background: #005c68; border: 0; border-radius: .45rem; padding: .55rem .9rem; cursor: pointer; }
.auth button { margin: 1rem 0; }
header button { background: #274461; }
.notice { background: #e7f5f7; border-radius: .45rem; padding: .7rem; }
.error { background: #fce9e6; border-radius: .45rem; padding: .7rem; }