.connection-state {
  position:fixed; z-index:9500; top:calc(10px + env(safe-area-inset-top));
  left:50%; width:min(404px,calc(100% - 24px)); transform:translateX(-50%);
  padding:13px 14px; border:1px solid rgba(101,85,173,.16); border-radius:17px;
  background:#fff; color:var(--ink); box-shadow:0 12px 34px rgba(35,31,49,.2);
  font-family:'Rubik',system-ui,sans-serif;
}
.connection-state[hidden] { display:none; }
.connection-state.blocking { top:0; bottom:0; left:50%; right:auto; width:min(100%,440px); min-height:100dvh;
  transform:translateX(-50%); border:0; border-radius:0; display:grid; place-items:center;
  padding:28px; background:var(--bg); }
.connection-state.blocking .connection-card { max-width:330px; text-align:center; }
.connection-yogi { display:none; width:92px; height:125px; margin:0 auto 12px; object-fit:contain; }
.connection-state.blocking .connection-yogi { display:block; }
.connection-copy { min-width:0; }
.connection-title { margin:0 0 3px; font-size:16px; }
.connection-title:focus { outline:none; }
.connection-state.blocking .connection-title { font-size:25px; }
.connection-text { margin:0; color:#74707d; font-size:12px; line-height:1.45; }
.connection-state.blocking .connection-text { font-size:14px; line-height:1.6; }
.connection-retry { min-height:40px; margin-top:9px; padding:8px 15px; border:0; border-radius:12px;
  background:#6555ad; color:#fff; font:800 12px 'Rubik',system-ui; cursor:pointer; }
.connection-state.blocking .connection-retry { min-height:49px; width:100%; margin-top:18px; font-size:14px; }
.connection-state.online .connection-title { color:#287454; }