*{box-sizing:border-box}body{font:16px/1.5 system-ui,sans-serif;background:#e9f2fa;color:#173d58;margin:0;padding:24px}main{max-width:780px;margin:5vh auto;background:linear-gradient(145deg,#fff,#f2f8ff);border:1px solid #bed3e3;border-radius:20px;padding:28px;box-shadow:0 15px 45px #173d5820}h1{font-size:26px;margin-top:0}h2{font-size:20px}label{display:block;margin:16px 0}input,select,button{font:inherit;min-height:44px;border:1px solid #a8c3d8;border-radius:8px;padding:9px;max-width:100%}input,select{display:block;width:100%;margin-top:6px;background:#fff;color:#173d58}button{background:#195e8d;color:#fff;cursor:pointer;margin:6px 6px 0 0}button:disabled{opacity:.5;cursor:wait}a{color:#185c8e}section{border-top:1px solid #c5d7e5;margin-top:24px;padding-top:20px}pre{white-space:pre-wrap;overflow-wrap:anywhere;background:#e3edf7;padding:12px;border-radius:8px}p[role=alert]{color:#9c2d25;white-space:pre-wrap}:focus-visible{outline:3px solid #df9c2d;outline-offset:3px}@media(max-width:500px){body{padding:10px}main{padding:18px;margin:12px auto}}

dialog{max-width:calc(100vw - 32px);width:430px;border:1px solid #a8c3d8;border-radius:18px;padding:24px;background:#f5faff;color:#173d58;box-shadow:0 22px 70px #0005}dialog::backdrop{background:#071a3099}