*{box-sizing:border-box}body{margin:0;background:#f6f7fb;color:#172033;font-family:ui-sans-serif,system-ui,sans-serif}main{width:min(36rem,calc(100% - 2rem));margin:4rem auto;padding:2rem;border:1px solid #c9d1df;border-radius:.75rem;background:#fff;box-shadow:0 .5rem 2rem #17203318}h1{margin-top:0}form{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:end}label{font-weight:600}input,select,button{min-height:2.75rem;border:1px solid #77839a;border-radius:.4rem;padding:.55rem;font:inherit}button{grid-column:1/-1;background:#234fdb;color:#fff;border-color:#234fdb;font-weight:700;cursor:pointer}input:focus,select:focus,button:focus{outline:3px solid #9bb4ff;outline-offset:2px}output{display:block;min-height:2rem;margin-top:1.25rem;font-weight:700}@media(max-width:36rem){form{grid-template-columns:1fr}}