:root{color-scheme:dark;font:16px system-ui,sans-serif;background:#10141b;color:#eaf1fa}body{margin:0}main{max-width:760px;margin:auto;padding:32px 20px 80px}h1{font-size:clamp(32px,6vw,48px);margin-bottom:8px}h2{font-size:22px}p{color:#b4c1d1;line-height:1.6}a{color:#8bc9ff}section{margin-top:24px;padding:24px;border:1px solid #334155;border-radius:14px;background:#18212c}label{display:block;margin:18px 0 8px}input{box-sizing:border-box;display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #5b6b80;border-radius:6px;background:#10141b;font:inherit}button{cursor:pointer;border:0;border-radius:6px;padding:12px 18px;background:#91ceff;color:#091929;font-weight:700;margin:8px 0}button.secondary{background:#2d3b4e;color:#eaf1fa}button:disabled{opacity:.5;cursor:wait}#status:not(:empty){padding:16px;margin-top:20px;background:#27364b;border-radius:8px;overflow-wrap:anywhere}.character{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid #334155;padding:14px 0}.character strong{overflow-wrap:anywhere}[hidden]{display:none!important}button:focus-visible,a:focus-visible{outline:3px solid white;outline-offset:3px}@media(max-width:480px){section{padding:18px}.character{align-items:flex-start;flex-direction:column}}