*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#102a35;color:#f2eee1;font-family:Arial,sans-serif}canvas{display:block;width:100%;height:100%;touch-action:none}header{position:absolute;top:max(28px,env(safe-area-inset-top));left:32px;pointer-events:none}.eyebrow{font-size:10px;letter-spacing:2.5px;color:#c2d1ce}h1{font-size:32px;font-weight:500;letter-spacing:7px;margin:12px 0 5px}header p{font-family:Georgia,serif;font-style:italic;color:#d3d8cf;font-size:16px;margin:0}.status{position:absolute;right:32px;top:30px;text-align:right;font-size:12px;letter-spacing:2px}.live{color:#e9bd70;font-size:10px}.status strong{font-weight:400;font-size:38px;letter-spacing:-1px}.status div{margin:13px 0 6px}.status small{font-size:9px}.help{position:absolute;bottom:145px;left:32px;font-size:10px;letter-spacing:1px;line-height:1.9;color:#d1ddd9;pointer-events:none}.controls{position:absolute;bottom:max(48px,env(safe-area-inset-bottom));left:32px;right:32px;display:flex;justify-content:space-between;pointer-events:none}.control-group{text-align:center;pointer-events:auto}.control-group>span{display:block;font-size:9px;letter-spacing:3px;margin-bottom:10px;color:#c9d6d2}.control-group>div{display:flex;gap:10px}button{width:65px;height:60px;border:1px solid #c0d6ce55;border-radius:8px;background:#102e3a66;color:#f3ead6;font-size:24px;touch-action:none;user-select:none;-webkit-user-select:none}button.active,button:active{background:#c0a66c88;border-color:#eed7a3}footer{position:absolute;bottom:15px;left:32px;right:32px;font-size:9px;letter-spacing:2px;color:#b8cdca;pointer-events:none}footer span{float:right}#error{position:absolute;inset:25%;background:#102a35;padding:30px;line-height:1.6}@media(max-width:600px){header{top:22px;left:20px}h1{font-size:23px;letter-spacing:4px}.eyebrow{font-size:7px;letter-spacing:1.5px}header p{font-size:13px}.status{right:20px;top:22px}.status strong{font-size:28px}.controls{left:20px;right:20px;bottom:max(45px,env(safe-area-inset-bottom))}.help{left:20px;bottom:140px;font-size:8px;max-width:280px}footer{left:20px;right:20px;font-size:7px;letter-spacing:1px}footer span{display:none}button{width:59px;height:58px}}body:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(7,25,35,.65),transparent 28%,transparent 65%,rgba(7,25,35,.6));z-index:1}header,.status,.help,.controls,footer,#error{z-index:2}