*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#9ed5e3;font-family:system-ui;color:#284b48}canvas{display:block}header{position:fixed;z-index:3;top:16px;left:16px;padding:13px 16px;border-radius:16px;background:#fffce8dc}header b,header small{display:block}header b{font-size:20px}header small{color:#647873}#joy{position:fixed;z-index:5;left:20px;bottom:22px;width:116px;height:116px;border:2px solid #fff9;border-radius:50%;background:#285a5866;touch-action:none;box-shadow:0 8px 24px #244c4755}#joy i{position:absolute;left:33px;top:33px;width:46px;height:46px;border:2px solid #fff9;border-radius:50%;background:#e4c875}#cameraControl{position:fixed;z-index:2;right:14px;top:22%;width:40%;height:54%;border-right:2px solid #fff5;border-radius:34px;pointer-events:none}#cameraControl span{position:absolute;right:10px;top:50%;padding:8px 10px;transform:translateY(-50%);border-radius:14px;background:#244c4738;color:#fff;font-size:12px;writing-mode:vertical-rl;letter-spacing:2px}#near{position:fixed;z-index:3;right:18px;bottom:22px;padding:11px 15px;border-radius:12px;background:#fffce8dc}#dialog{position:fixed;z-index:8;bottom:24px;left:50%;width:min(390px,calc(100% - 28px));padding:22px;transform:translateX(-50%);border:0;border-radius:22px;background:#fffdf1;box-shadow:0 14px 40px #23494466}#dialog>b{font-size:22px}#dialog p{color:#637671}#dialog button{margin:4px;padding:10px 13px;border:0;border-radius:10px;background:#dce9d3;color:#284b48}#dialog #close{float:right;padding:3px 9px;background:transparent;font-size:22px}#dialog .primary{background:#d9bd70;font-weight:700}@media(max-width:640px){header{top:10px;left:10px;padding:10px 12px}header b{font-size:17px}header small{font-size:11px}#near{right:12px;bottom:16px;max-width:52%;font-size:12px}#cameraControl{right:6px;width:46%}}