:root { --popup-w: 920px; --popup-h: 520px; }
  body { margin:0; font-family: system-ui, Arial, sans-serif; }

  /* Link styled as button */
  .link-btn {
    display: inline-block;
    /*margin: 1rem;*/
    /*padding: .75rem 1rem;*/
    border: 0; border-radius: .6rem;
    /*background: #0d6efd; color: #fff; text-decoration: none;*/
    cursor: pointer;
  }
  /*.link-btn:hover { background: #0b5ed7; }*/
  *.link-btn:hover { background: #f1fccf; }

  /* Overlay */
  .overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: none; align-items: center; justify-content: center;
    z-index: 9999;
  }
  .overlay.show { display: flex; }

  /* Popup */
  .popup {
    position: relative;
    width: min(95vw, var(--popup-w));
    height: min(90vh, var(--popup-h));
    background: #000;
    border-radius: .75rem;
    overflow: hidden;
  }

  .popup-header {
    position: absolute; top: .5rem; right: .5rem; z-index: 2;
    display: flex; gap: .5rem;
  }
  .icon-btn {
    appearance: none; border: 0; cursor: pointer;
    width: 38px; height: 38px; border-radius: .5rem;
    background: rgba(255,255,255,.12); color: #fff;
    display: grid; place-items: center;
  }
  .icon-btn:hover { background: rgba(255,255,255,.22); }
  .icon { font-size: 18px; line-height: 1; }

  .popup iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; background: #000;
  }

  .popup.max { width: 100vw; height: 100vh; border-radius: 0; }