:root { color-scheme: light; font-family: Arial, sans-serif; background: #f5f8fa; color: #102a3a; }
body { margin: 0; }
main { max-width: 760px; margin: 0 auto; padding: 24px 18px 48px; }
.eyebrow { color: #0d7289; font-size: .82rem; font-weight: 700; letter-spacing: .08em; }
h1, h2 { color: #123c55; } h1 { margin-bottom: .25rem; } h2 { font-size: 1.1rem; margin: 1.5rem 0 .5rem; }
.notice { border-left: 4px solid #e49b22; background: #fff8e8; padding: 12px; }
dl { display: grid; grid-template-columns: minmax(180px, 42%) 1fr; gap: .45rem .75rem; margin: 0; } dt { font-weight: 700; } dd { margin: 0; overflow-wrap: anywhere; }
.controls { display: flex; flex-wrap: wrap; gap: .6rem; } button { background: #123c55; border: 0; border-radius: .35rem; color: #fff; cursor: pointer; padding: .65rem .8rem; } button:focus-visible { outline: 3px solid #e49b22; outline-offset: 2px; }
ol { padding-left: 1.5rem; } li { margin: .3rem 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { dl { grid-template-columns: 1fr; gap: .15rem; } dd { margin-bottom: .5rem; } }