body{
    font-family:Arial,Helvetica,sans-serif;
    margin:40px;
    background:#111;
    color:#eee;
}
form{
    display:flex;
    gap:12px;
    align-items:center;
    background:#222;
    padding:16px 22px;
    border:1px solid #333;
    border-radius:8px;
    max-width:750px;
}
input[type=number]{
    width:80px;
    padding:6px 8px;
    font-size:16px;
    background:#000;
    color:#fff;
    border:1px solid #555;
    border-radius:4px;
}
button{
    padding:8px 18px;
    font-size:16px;
    cursor:pointer;
    background:#2d6ae0;
    color:#fff;
    border:none;
    border-radius:4px;
}
button:disabled{
    opacity:.5;
    cursor:not-allowed;
}
#status{margin-top:18px;font-size:14px;white-space:pre-line;}

        .brand a{
          color:#fff;
          text-decoration:none;
          position:relative;
          display:inline-block;
        }
        .brand a::after{
          content:"";
          position:absolute;
          left:0;
          bottom:-2px;
          height:2px;
          width:0;
          background:currentColor;
          transition:width .22s cubic-bezier(.2,.9,.3,1);
        }
        .brand a:hover::after,
        .brand a:hover::after,
        .brand a:focus::after{
          width:100%;
        }

        .brand{
          position:fixed;
          top:16px;
          left:16px;
          z-index:1000;
        }

        body{
          display:flex;
          flex-direction:column;
          align-items:center;
          justify-content:center;
          min-height:100vh;
          margin:0;
        }