.modal{border:none;margin:auto;padding:0}.modal::backdrop{background:#000000bf}body:has(.modal[open]){overflow:hidden}.modal--video{background:var(--color-bg-inverse);border-radius:.5rem;width:100%;max-width:56rem;max-height:90vh;overflow:hidden}.modal--video .modal-close{z-index:10;width:var(--tap-target);height:var(--tap-target);color:var(--color-text-inverse);background:#fff3;border:none;border-radius:9999px;justify-content:center;align-items:center;padding:0;transition:background-color .15s;display:flex;position:absolute;top:1rem;right:1rem}@media (hover:hover){.modal--video .modal-close:hover{background:#ffffff4d}}.modal--video .modal-close svg{width:1.5rem;height:1.5rem}.modal--form{background:var(--color-bg);border-radius:1rem;width:calc(100% - 2rem);max-width:42rem;max-height:90vh;overflow-y:auto;box-shadow:0 25px 50px -12px #00000040}.modal--form::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000bf}.modal--form .modal-close{width:var(--tap-target);height:var(--tap-target);color:var(--gray-400);background:0 0;border:none;font-size:2.25rem;font-weight:300;line-height:1;transition:color .15s;position:absolute;top:1rem;right:1rem}@media (hover:hover){.modal--form .modal-close:hover{color:var(--gray-600)}}.modal--form .modal-body{padding:1.25rem}@media (width>=640px){.modal--form .modal-body{padding:2rem}}