html.tbEssentialOpen { overflow: hidden; }
.tbEssentialModal {
  position: fixed; inset: 0; margin: auto; padding: 0;
  width: min(620px, calc(100vw - 40px)); max-width: none;
  height: min(860px, calc(100dvh - 48px)); max-height: none;
  border: 2px solid #17262c; border-radius: 0;
  background: #fffdf8; color: #17262c;
  box-shadow: 8px 8px 0 #2d8079; overflow: hidden;
}
.tbEssentialModal::backdrop { background: rgba(13, 26, 31, .78); backdrop-filter: blur(3px); }
.tbEssentialFrame { display: block; width: 100%; height: 100%; border: 0; background: #fffdf8; }
.tbEssentialClose {
  position: absolute; z-index: 2; top: 16px; right: 16px;
  display: grid; place-items: center; width: 30px; height: 30px;
  margin: 0; padding: 0; border: 1px solid #bfe9e4; border-radius: 0;
  background: #17262c; color: #fffdf8; font: 26px/1 Arial, sans-serif; cursor: pointer;
}
.tbEssentialClose:hover { color: #58e7df; }
.tbEssentialClose:focus-visible { outline: 3px solid #58e7df; outline-offset: 3px; }
.tbEssentialLoading { position: absolute; inset: 80px 20px auto; text-align: center; font: 16px/1.5 Geist, Arial, sans-serif; }
.tbEssentialLoading[hidden] { display: none; }
@media (max-width: 600px) {
  .tbEssentialModal { width: calc(100vw - 24px); height: calc(100dvh - 24px); box-shadow: 4px 4px 0 #2d8079; }
}