.modal-backdrop{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.55); z-index:9999;
}
 
.modal{
  background:#fff; width:90%; max-width:420px;
  padding:24px 28px; border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  font-family:Inter,system-ui,Arial,sans-serif; text-align:center;
}
 
.modal h3{margin:0 0 10px; font-size:1.25rem; color:#111827;}
.modal p{margin:0 0 18px; color:#374151; line-height:1.6; font-size:.95rem;}
 
.modal-actions{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
 
.btn{border:0; padding:10px 16px; border-radius:8px; cursor:pointer; font-weight:600;}
.btn:hover{filter:brightness(0.97);}
.btn.ghost{background:#f3f4f6; color:#111;}
.btn{background:#2563eb; color:#fff;}
 
 
/* instruction */
/* index.html */
/* <link rel="stylesheet" href="assets/css/popup.css">
<script src="assets/js/popup.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    PopupIndex(); // only for index.html
  });
</script> */
 
/* lander.html */
/* <link rel="stylesheet" href="assets/css/popup.css">
<script src="assets/js/popup.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', () => {
    PopupLander(); // only for lander.html
  });
</script> */