.doi[aria-hidden="true"] {
    display: none
}

.doi {
    position: fixed;
    inset: 0;
    z-index: 9999
}

.doi-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45)
}

.doi-dialog {
    position: relative;
    max-width: 640px;
    margin: 10vh auto;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .2);
    padding: 1.25rem
}

.doi-close {
    position: absolute;
    top: .5rem;
    right: .75rem;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer
}

.doi-hint {
    margin: .25rem 0 1rem;
    opacity: .7
}

.doi-pre {
    white-space: pre-wrap;
    word-break: break-word;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 1rem;
    background: #fafafa;
    margin: 0 0 1rem
}

.doi-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

.doi-btn {
    padding: .6rem 1rem;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #fff;
    cursor: pointer
}

@media (max-width:640px) {
    .doi-dialog {
        margin: 10vh 1rem;
        padding: 1rem
    }
}