*{box-sizing:border-box}body{margin:0;background:#142827;color:#ebf3df;font:13px system-ui;overflow:hidden}canvas{width:100vw;height:100vh;display:block;touch-action:none}header{position:absolute;top:30px;left:34px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2px;color:#a7c2ad}h1{font-size:30px;letter-spacing:-1px;margin:9px 0}h1 span{color:#cffb85;margin-left:14px}header p{color:#bdcec0}aside{position:absolute;right:28px;top:30px;width:215px;padding:20px;background:#102521e8;border:1px solid #6f93764d;border-radius:12px;backdrop-filter:blur(12px)}#status{color:#e3c980;font-size:12px}#status.online{color:#b5ef86}#count{font-size:38px;display:block;margin-top:18px}aside>span{color:#acbdad;font-size:12px}hr{border:0;border-top:1px solid #67876b55;margin:18px 0}aside p{font-size:11px;line-height:1.9;color:#b5c6b5}button{background:#c8ec99;border:0;border-radius:5px;color:#182c20;padding:9px 15px;font:inherit;cursor:pointer}#detail{font-size:10px}footer{position:absolute;bottom:23px;left:34px;right:28px;display:flex;justify-content:space-between;color:#bad0b7;font-size:11px;pointer-events:none}#pad{position:absolute;left:25px;bottom:65px;text-align:center}#pad button{margin:3px;width:43px;height:40px;touch-action:none;background:#15372bd9;color:#c8ec99;border:1px solid #688066} @media(max-width:600px){header{left:18px;top:18px}h1{font-size:23px}header p{max-width:180px;font-size:11px}aside{right:12px;top:140px;width:160px;padding:14px}footer{left:18px;font-size:9px}#count{font-size:28px}}

aside label{display:block;font-size:10px;color:#b5c6b5;margin-bottom:5px}aside input{width:100%;padding:8px;border:1px solid #688066;background:#102521;color:#ebf3df;border-radius:4px;font-size:11px;margin-bottom:8px}