body{margin:0;padding:0}body,input,button{font-family:IBM Plex Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Open Sans,Helvetica Neue,sans-serif;font-size:14px}body{background-color:#f9f9f9;color:#111}.App{text-align:center}h1{font-weight:900;font-size:2em}button{cursor:pointer}.userlist{list-style-type:none;padding:0}.userlist li{display:inline-block;background:#e2e2e2;padding:.3em .3em .3em .6em;border-radius:1em;margin-bottom:.5em}.userlist li img{vertical-align:text-top}.userlist li:not(:first-child){margin-left:.5em}.userlist-user-x-btn{border:none;background:#ccc;border-radius:2em;margin-left:.3em;width:1.5em;height:1.5em;text-align:center;padding:0}.userlist-user-x-btn:hover{background:#aaa}.add-form{margin:.7em 0 1em}.add-form span{border-bottom:2px solid #e2e2e2;display:inline-block;box-sizing:border-box}.add-form .hatena-user-icon{vertical-align:middle;margin-left:.5em}.add-form .hatena-user-icon-empty{background:#d3d3d3}.add-form input{padding:.5em;margin:0;border:none;background:none;width:160px}.add-form button{padding:.5em .7em;margin:0;border:none;background:#e2e2e2}.add-form button:hover{background:gray}.small-description{margin-top:.8em;font-size:.8em;color:gray}.small-description kbd{font:inherit;background:gray;color:#fff;padding:0 .4em;border-radius:.3em}.omikuji{cursor:pointer;display:inline-block;padding:1em;margin-top:.3em;width:256px;height:256px;background:transparent;transition:background .3s}.omikuji-button{background:#fff;border:none;margin:0;padding:0;width:256px;height:256px}.omikuji img{background:#fff;opacity:.2;margin:0;padding:0}.click-to-assign{font-weight:900;font-size:1.4em;margin-top:-3.2em;transition:transform .05s ease-out;letter-spacing:0em;pointer-events:none;letter-spacing:.1em}.omikuji:hover{animation:super-flash .7s infinite ease-out}.omikuji:hover+.click-to-assign{animation:super-flash-text .4s infinite ease-out;transform:scale(1.1);transform-origin:50% 50%;-webkit-text-stroke:.2em #fff;paint-order:stroke fill}@keyframes super-flash{0%{background:#ff5656}to{background:#cdff56}}@keyframes super-flash-text{0%{color:#ff5656}to{color:#cdff56}}.pixelated{image-rendering:pixelated}.lucky-users{font-size:.92em;margin-top:4em;line-height:1.6em}.lucky-users-heading{font-weight:300;color:gray;text-transform:uppercase;letter-spacing:.1em;margin:1em 0 .2em}.lucky-user-line img{vertical-align:text-top}.latest-lucky-user-dialog{font-size:2rem;padding:1.5rem 2rem;border:none;box-shadow:0 0 1em #0004;letter-spacing:.02em;background:#fff;margin:0 auto;top:2em;border:6px solid;border-image:linear-gradient(var(--angle),#0003,#0004,#0002) 1;animation:4s rotate ease infinite;transition:opacity .08s ease,transform .08s ease;opacity:0}.latest-lucky-user-dialog[open]{opacity:1;transform:scale(1)}@starting-style{.latest-lucky-user-dialog[open]{opacity:0;transform:scale(.96)}}.latest-lucky-user-dialog-heading{margin:0 0 .5em;font-size:.7em;font-weight:300;letter-spacing:.18em;text-transform:uppercase;color:#999}@keyframes rotate{to{--angle: 360deg}}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}.latest-lucky-user-dialog-icon img{background:#fff;box-shadow:0 0 8px #0001}.latest-lucky-user-dialog-date{font-size:.4em;margin-top:.2em;opacity:.6}.latest-lucky-user-dialog-ok-btn{font-size:1.5rem;margin-top:.6em}.latest-lucky-user-dialog::backdrop{-webkit-backdrop-filter:blur(2px) saturate(0%);backdrop-filter:blur(2px) saturate(0%);background:#0002}footer{border-top:1px solid lightgray;display:inline-block;padding:1em 3em;margin-top:1em;font-size:.8em;line-height:1.5;opacity:.7}footer img{vertical-align:text-top}