html{font:100%/1.3 system-ui,san-serif}body{margin:0}header{display:flex;padding:10px;background:#ddd}header h1{margin:0;padding-right:.5em;font-size:1.5em;font-weight:300}header h1 a{text-decoration:none;color:#555}header h1 a:hover{text-decoration:underline;color:#000}nav{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1px}nav a{padding:.3em .8em;border-radius:1em;color:#673ab8;text-decoration:none;white-space:nowrap}nav a:hover{background-color:#ffffff80;color:#56319c;box-shadow:inset 0 0 0 1px #673ab8;z-index:1}nav a.current{background:#673ab8;color:#fff}main{padding:10px}output{padding:.3em;min-width:1.5em;display:inline-block;text-align:center}.info{position:relative;padding:.5em .5em .5em 2em;max-width:600px;background:#e6ebfc;border-radius:5px;box-shadow:inset 0 0 0 .5px #b0bee2;color:#3955a1}.info:before{content:"\2139";position:absolute;display:inline-block;text-align:center;line-height:1em;width:1.2em;height:1.2em;left:.4em;top:50%;margin-top:-.6em;background:#3955a1;border-radius:.6em;color:#fff}.card{display:inline-block;padding:.5em 1em;background:#eee;box-shadow:inset 0 0 0 .5px #ccc;border-radius:5px}.card+.card{margin-left:10px}button{padding:.3em 1em;border-radius:1em;border:none;background:#673ab8;color:#f4eeff;cursor:pointer}button:hover{background:#9359ff;color:#fff}