:root{font-family:system-ui,sans-serif;color:#e7edf6;background:#101824;color-scheme:dark}*{box-sizing:border-box}main{max-width:760px;margin:0 auto;padding:36px 22px}header span{font-size:.8rem;letter-spacing:.14em;color:#a9bfd5}h1{font-size:2rem;margin-bottom:8px}h2{font-size:1.1rem}p,footer{color:#b7c9dc;line-height:1.6}aside{background:#302819;color:#f4d59a;padding:18px;border:1px solid #867043;border-radius:10px;margin:26px 0}section{background:#182434;border:1px solid #364a60;border-radius:12px;padding:24px;margin:18px 0}label{display:block;margin:12px 0}input{display:block;width:100%;padding:13px;border:1px solid #7289a0;border-radius:6px;background:#0e1927;color:#fff;font:inherit}button{padding:12px 16px;margin:12px 8px 0 0;border:0;border-radius:6px;background:#b4d4f5;color:#102238;font:inherit;font-weight:600;cursor:pointer}.secondary{background:#33465a;color:#e8f1fa}button:disabled{opacity:.5;cursor:wait}input:focus,button:focus-visible{outline:3px solid #7fbbf5;outline-offset:3px}#result{border-top:1px solid #364a60;padding-top:18px;color:#fff}footer{font-size:.85rem}