*{box-sizing:border-box}body{margin:0;background:#111e22;color:#f7f3e9;font-family:system-ui,sans-serif}canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}header,aside,footer{position:fixed;background:#102024dd;border:1px solid #ffffff20;border-radius:14px;padding:18px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}header{top:22px;left:22px;max-width:calc(100% - 44px)}header span{font-size:12px;letter-spacing:.3em;color:#d6c596}h1{font-size:clamp(19px,3vw,28px);font-weight:500;margin:8px 0 14px}p{font-size:13px;margin:5px 0;color:#d3deda}aside{right:22px;top:22px;display:grid;gap:10px;font-size:13px}select,button{font:inherit;color:inherit;background:#233b40;border:1px solid #ffffff30;border-radius:6px;padding:10px}button{cursor:pointer}footer{bottom:20px;left:50%;transform:translate(-50%);font-size:12px;text-align:center;width:max-content;max-width:calc(100% - 30px)}@media(max-width:650px){aside{top:auto;bottom:85px;right:15px;padding:12px}header{top:15px;left:15px}footer{bottom:15px}}