:modal{font:normal 1rem/1.5;overscroll-behavior:contain;container:modal / size;&:focus{outline:none}&[open]{width:100%;max-width:800px;height:100dvh;margin:auto;overflow:auto;padding:0;border:none;box-shadow:5px 5px #999;outline:1px solid #777;&::backdrop{backdrop-filter:none;background-color:#afe4}+&::backdrop{backdrop-filter:none;background-color:transparent}>:first-child:not(link,nav){overflow:auto;flex-grow:1;display:flex;flex-direction:column;align-items:center;gap:1lh;padding:1lh;min-height:100%}>form{display:flex;flex-direction:column;gap:1lh;padding:2lh}>.center.horizontal{align-items:center}>.center.vertical{justify-content:center;min-height:100%}>.left{display:flex;flex-direction:column;gap:1lh;align-items:stretch;padding:2lh 6lh;p{padding:0;a{cursor:pointer}}p:has(button){text-align:center}}>.spinner{justify-content:center}>.reconnect{justify-content:center}>.error{height:100vh;justify-content:center;padding-inline:3lh;.message{border:.3rem insert #aaa;background-color:#eee}}>.hide{display:none}}}*{margin:0;padding:0;box-sizing:border-box}:modal[open]{container:modal / size}