:root{font-family:system-ui,sans-serif;color:#e9edf5;background:#101522}body{margin:0}main{max-width:820px;margin:auto;padding:36px 22px 80px}header{margin-bottom:32px}small{letter-spacing:.18em;color:#a7baf5}h1{font-size:36px;margin-bottom:8px}h2{font-size:21px}section,details{padding:24px;border:1px solid #343f57;border-radius:14px;margin:18px 0;background:#192235}form{display:grid;gap:16px}label{display:grid;gap:8px}input{padding:12px;border:1px solid #54617b;border-radius:6px;background:#101827;color:inherit;font:inherit}button{padding:12px 18px;border:0;border-radius:7px;background:#b4c6ff;color:#122047;cursor:pointer;font-weight:650;margin:4px}p{line-height:1.65}.note{color:#c4cce0;font-size:14px}#message{color:#ffdc8e;white-space:pre-wrap}#outputs>div{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0}#outputs input{flex:1;min-width:160px}iframe{border:1px solid #53627b;width:100%;height:220px}pre{white-space:pre-wrap;overflow-wrap:anywhere}summary{cursor:pointer}