:root{color:#142b45;background:#f4f7fb;font-family:system-ui,sans-serif}main{max-width:900px;margin:auto;padding:1.25rem}h1{font-size:clamp(1.5rem,5vw,2rem)}h2{font-size:1.2rem}nav{flex-wrap:wrap;gap:.5rem;display:flex}button,input,select,textarea{font:inherit}button{color:#142b45;cursor:pointer;background:#fff;border:1px solid #53708e;border-radius:.5rem;min-height:2.75rem;padding:.65rem 1rem}button[aria-pressed=true]{color:#fff;background:#0a5cab;border-color:#0a5cab}button:hover{background:#e6f1fb}button[aria-pressed=true]:hover{background:#064d91}section{background:#fff;border:1px solid #d5e2ef;border-radius:.75rem;margin-top:1rem;padding:1rem;box-shadow:0 1px 2px #142b450f}input,select,textarea{box-sizing:border-box;color:#142b45;background:#fff;border:1px solid #8197ad;border-radius:.4rem;width:100%;min-height:2.75rem;margin:.5rem 0;padding:.65rem;display:block}textarea{resize:vertical;min-height:9rem}input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,[role=button]:focus-visible{outline-offset:2px;outline:3px solid #f2a900}[role=button]{box-sizing:border-box;color:#264a6d;border:2px dashed #8197ad;border-radius:.5rem;min-height:2.75rem;padding:.7rem}[role=status]{color:#264a6d;margin:.75rem 0 0}ul{padding-inline-start:1.25rem}li{overflow-wrap:anywhere;margin:.45rem 0}pre{white-space:pre-wrap}@media (width<=480px){main{padding:.75rem}section{padding:.85rem}nav{grid-template-columns:repeat(2,minmax(0,1fr));display:grid}nav button{width:100%}}