.modal:not(dialog) { display: none; }
dialog.front-modal {
    width: min(900px, calc(100% - 32px));
    max-height: calc(100dvh - 48px);
    padding: 0;
    border: 0;
    border-radius: 12px;
    color: var(--ink, #202322);
    background: #fff;
    box-shadow: 0 16px 45px rgba(39, 34, 23, .2);
}
dialog.front-modal::backdrop { background: rgba(0, 0, 0, .6); }
dialog.front-modal > .modal { display: block; }
.front-modal .modal-header, .front-modal .modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px;
}
.front-modal .modal-header { border-bottom: 1px solid var(--line, #e8e4dd); }
.front-modal .modal-title { margin: 0; }
.front-modal .modal-body { padding: 20px; overflow-wrap: anywhere; }
.front-modal .modal-body img { max-width: 100%; height: auto; }
.front-modal .modal-footer { justify-content: flex-end; border-top: 1px solid var(--line, #e8e4dd); }
.front-modal .close { border: 0; background: transparent; font-size: 28px; cursor: pointer; }
body.front-modal-open { overflow: hidden; }