dialog{transition:opacity .5s ease}dialog:not([open]){pointer-events:none;opacity:0}.spinner{--spinner-width: 50px;position:relative}.spinner:before{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;width:var(--spinner-width);height:var(--spinner-width);margin-top:calc(var(--spinner-width) / -2);margin-left:calc(var(--spinner-width) / -2);border-radius:50%;border:1px solid #f6f;border-top-color:#0e0;border-right-color:#0dd;border-bottom-color:#f90;animation:spinner .6s linear infinite}dialog{display:flex;flex-direction:column;padding:0;border:0;width:400px;max-height:90vh;border-radius:10px;overflow:hidden;overscroll-behavior:contain;position:fixed;transition:none;z-index:10}dialog[open]{opacity:1}dialog form{display:flex;flex-direction:column}dialog form header.dialog-header{margin:0;padding:.75rem;border-bottom:1px solid var(--color-border);letter-spacing:-1px;background:var(--color-background-alt)}dialog form header.dialog-header h1{text-align:center;font-weight:600;font-size:1.5rem;color:var(--color-text-dark-600);margin:0}dialog form div.dialog-main{display:flex;flex-direction:column;justify-content:space-between;background-color:#fff;height:100%;padding:1rem;overflow-y:auto}dialog form div.dialog-main p{font-size:1rem;line-height:1.6;height:8rem;margin-bottom:1rem}dialog form div.dialog-main button.fix{border:none}dialog form div.dialog-main button.continue{display:none;visibility:hidden;background:var(--color-background-alt)}dialog form div.dialog-main.processing button.continue{display:block;visibility:visible}dialog form div.dialog-main.processing button.fix{display:none;visibility:hidden}dialog form div.message{display:none;visibility:hidden}dialog form[data-state=success] div.dialog-main{display:none;visibility:hidden}dialog form[data-state=success] div.message.success{display:flex;visibility:visible;flex-direction:column;justify-content:space-around;align-items:center;text-align:center;padding:1rem}dialog form[data-state=success] div.message.success svg{margin:.5rem}dialog form[data-state=success] div.message.success p{margin:0}dialog form[data-state=error] div.message.error{display:block;visibility:visible;color:red}dialog form[data-state=processing] menu button.submit{color:#0000;--spinner-width: 50px;position:relative}@keyframes spinner{to{transform:rotate(360deg)}}dialog form[data-state=processing] menu button.submit:before{content:"";box-sizing:border-box;position:absolute;top:50%;left:50%;width:var(--spinner-width);height:var(--spinner-width);margin-top:calc(var(--spinner-width) / -2);margin-left:calc(var(--spinner-width) / -2);border-radius:50%;border:1px solid #f6f;border-top-color:#0e0;border-right-color:#0dd;border-bottom-color:#f90;animation:spinner .6s linear infinite}dialog form[data-state=processing] menu button.submit{--spinner-width: 2rem}dialog::backdrop{background-color:#00000059}dialog button.close.x{position:absolute;font-size:1.5rem;top:.575rem;right:1rem;border:none;background:transparent}