:root{font-family:system-ui,sans-serif;color:#153947;background:#edf3f4}*{box-sizing:border-box}body{margin:0}header{display:flex;gap:16px;align-items:center;padding:22px 5%;background:#103e48;color:white;flex-wrap:wrap}header label{margin-left:auto;font-size:14px}header select{width:auto;margin-left:10px}main{max-width:480px;margin:50px auto;padding:32px;background:white;border:1px solid #d5e3e5;border-radius:16px;box-shadow:0 12px 36px #1539470d}h1{margin:12px 0;font-size:30px}p{line-height:1.6}.badge{color:#845b13;background:#fff4dc;padding:8px 12px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:1px}label{display:block;margin:18px 0 8px}input,select,button{font:inherit;border-radius:7px;padding:12px}input{display:block;width:100%;border:1px solid #9bb3b9;margin-top:8px}button{background:#096b68;color:white;border:0;cursor:pointer;margin:14px 0;width:100%;font-weight:650}button:disabled{opacity:.6;cursor:wait}.secondary{background:#edf3f4;color:#153947;border:1px solid #cbdcde}input:focus-visible,button:focus-visible,select:focus-visible{outline:3px solid #e9a13b;outline-offset:3px}footer{font-size:13px;color:#59717b;border-top:1px solid #e4ecee;padding-top:20px;margin-top:24px;line-height:1.5}#status{color:#88452c}output,pre{display:block;white-space:pre-wrap;overflow-wrap:anywhere;background:#edf3f4;padding:12px;font-size:14px}[hidden]{display:none!important}@media(max-width:520px){main{margin:20px 12px;padding:24px}header{padding:18px}header span{font-size:13px}header label{margin-left:0;width:100%}}