*{box-sizing:border-box;margin:0;padding:0}body{touch-action:none;-webkit-user-select:none;user-select:none;background:#0a0705;width:100vw;height:100vh;font-family:Georgia,serif;overflow:hidden}canvas{width:100%;height:100%;display:block;position:absolute;top:0;left:0}#ui{text-align:center;pointer-events:none;z-index:5;position:absolute;top:20px;left:0;right:0}#ui h1{letter-spacing:7px;text-transform:uppercase;color:#f5c77e;text-shadow:0 2px 8px #000000b3;font-size:18px;font-weight:400}#ui p{letter-spacing:3px;color:#f5c77e80;text-transform:uppercase;margin-top:6px;font-size:10px}#sym-info{text-align:center;letter-spacing:3px;color:#f5c77e66;text-transform:uppercase;pointer-events:none;z-index:5;font-size:10px;position:absolute;top:85px;left:0;right:0}#controls{z-index:5;flex-wrap:wrap;justify-content:center;gap:10px;padding:0 15px;display:flex;position:absolute;bottom:25px;left:0;right:0}.btn{-webkit-backdrop-filter:blur(10px);color:#f5c77ee6;letter-spacing:1px;text-transform:uppercase;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#f5c77e0f;border:1px solid #f5c77e40;border-radius:30px;padding:10px 18px;font-family:Georgia,serif;font-size:11px;transition:all .2s;box-shadow:0 4px 6px #0003}.btn:hover{background:#f5c77e26;border-color:#f5c77e73}.btn:active{background:#f5c77e4d;transform:scale(.95)}