*{box-sizing:border-box}body{color:#202733;background:#f4f6f9;margin:0;font-family:Arial,Helvetica,sans-serif;line-height:1.5}header{color:#fff;text-align:center;background:#173b65;padding:20px}header h1{margin:0 0 14px}nav{justify-content:center;gap:10px;display:flex}main{width:min(900px,100% - 32px);margin:28px auto}section{margin-bottom:20px}main>section{background:#fff;border:1px solid #dce2ea;border-radius:12px;padding:24px;box-shadow:0 3px 12px #0000000a}label{margin:14px 0 5px;font-weight:600;display:block}input{width:100%;max-width:420px;font:inherit;border:1px solid #b7c1ce;border-radius:6px;padding:10px 12px;display:block}button{color:#fff;font:inherit;cursor:pointer;background:#1769aa;border:0;border-radius:6px;margin:10px 8px 4px 0;padding:10px 16px}button:hover{background:#105386}button:disabled{cursor:not-allowed;background:#a8b2be}nav button{color:#173b65;background:#fff}nav button:hover{background:#e6edf5}ul{padding-left:24px}#groupPreview section{border:1px solid #dce2ea;border-radius:8px;margin-bottom:12px;padding:12px 16px}#groupPreview h4{margin-top:0}[hidden]{display:none!important}@media (width<=600px){main{width:calc(100% - 20px);margin:12px auto}main>section{padding:16px}header h1{font-size:24px}}