.tumblr-builder {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 25px;
    padding: 18px;
    box-sizing: border-box;
    border-radius: 18px;
    background: rgba(255, 255, 255, .35);
    border: 1px solid rgba(0, 0, 0, .12);
}

.tumblr-builder-title {
    margin-bottom: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.tumblr-fields-grid {
    display: grid;
    gap: 12px;
}

.tumblr-input-group {
    display: grid;
    gap: 5px;
    min-width: 0;
}

.tumblr-input-group-wide {
    grid-column: 1 / -1;
}

.tumblr-input-group label {
    display: block;
    font-weight: bold;
}

.tumblr-input-group input,
.tumblr-control select {
    width: 100%;
    min-height: 34px;
    padding: 7px 9px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 5px;
}

.tumblr-photo-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.tumblr-photo-fields input {
    width: 100%;
    box-sizing: border-box;
}

.tumblr-warning {
    display: none;
    margin: 10px 0;
    color: darkred;
    font-weight: bold;
    white-space: pre-line;
}

.tumblr-filter-settings {
    margin: 18px 0;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .35);
}

.tumblr-filter-settings summary {
    cursor: pointer;
    font-weight: bold;
}

.tumblr-filter-block {
    display: grid;
    gap: 15px;
    padding-top: 15px;
}

.tumblr-control {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.tumblr-control span {
    font-weight: bold;
}

.tumblr-control b {
    color: #777;
}

.tumblr-range-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tumblr-range-grid input {
    width: 100%;
}

.tumblr-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.tumblr-individual-controls {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.tumblr-individual-controls.is-visible {
    display: grid;
}

.tumblr-photo-control {
    display: grid;
    gap: 7px;
    padding: 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, .05);
}

.tumblr-photo-control-title {
    font-weight: bold;
}

.tumblr-photo-control input {
    width: 100%;
}

.tumblr-insert-button {
    display: block;
    margin: 15px auto 0;
    cursor: pointer;
}

.mtmblr {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    background-color: rgba(var(--d87, 255, 255, 255), 1);
    border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
    border-radius: 0 0 20px 20px;
    padding: 5px 10px 10px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "photo1 photo2 photo3"
        "photo4 photo5 photo6"
        "nick nick nick"
        "txt txt txt"
        "tags tags tags"
        ". . like2";
    gap: 3px;
    position: relative;
}

.mtmblr > * {
    min-width: 0;
}

.mtmblr niktum {
    grid-area: nick;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 5px 0 0 5px;
    color: #000;
    font-size: 18px;
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    overflow-wrap: anywhere;
}

.mtmblr niktum::before {
    content: "@";
    color: #b1adad;
}

.mtmblr tegtext {
    grid-area: txt;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 10px 0 0 5px;
    text-align: left;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.mtmblr tegtum {
    grid-area: tags;
    display: block;
    width: 100%;
    min-width: 0;
    margin: 33px 0 0 5px;
    color: #a1a0a0;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    word-break: break-all;
    overflow-wrap: anywhere;
}

.mtmblr mtph1,
.mtmblr mtph2,
.mtmblr mtph3,
.mtmblr mtph4,
.mtmblr mtph5,
.mtmblr mtph6,
.mtmblr mtph7,
.mtmblr mtph8,
.mtmblr mtph9 {
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    overflow: hidden;
    position: relative;
}

.mtmblr mtph1 { grid-area: photo1; }
.mtmblr mtph2 { grid-area: photo2; }
.mtmblr mtph3 { grid-area: photo3; }
.mtmblr mtph4 { grid-area: photo4; }
.mtmblr mtph5 { grid-area: photo5; }
.mtmblr mtph6 { grid-area: photo6; }
.mtmblr mtph7 { grid-area: photo7; }
.mtmblr mtph8 { grid-area: photo8; }
.mtmblr mtph9 { grid-area: photo9; }

.mtmblr mtph1 img,
.mtmblr mtph2 img,
.mtmblr mtph3 img,
.mtmblr mtph4 img,
.mtmblr mtph5 img,
.mtmblr mtph6 img,
.mtmblr mtph7 img,
.mtmblr mtph8 img,
.mtmblr mtph9 img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: cover;
    box-sizing: border-box;
    border-right: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
}

.mtmblr-count-4 {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        "photo1 photo2"
        "photo3 photo4"
        "nick nick"
        "txt txt"
        "tags tags"
        ". like2";
}

.mtmblr-count-5 {
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
        "photo1 photo1 photo2 photo2 photo3 photo3"
        "photo4 photo4 photo4 photo5 photo5 photo5"
        "nick nick nick nick nick nick"
        "txt txt txt txt txt txt"
        "tags tags tags tags tags tags"
        ". . . . like2 like2";
}

.mtmblr-count-5 mtph4,
.mtmblr-count-5 mtph5 {
    aspect-ratio: 3 / 2;
}

.mtmblr-count-6 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "photo1 photo2 photo3"
        "photo4 photo5 photo6"
        "nick nick nick"
        "txt txt txt"
        "tags tags tags"
        ". . like2";
}

.mtmblr-count-7 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "photo1 photo2 photo3"
        "photo4 photo5 photo6"
        "photo7 photo7 photo7"
        "nick nick nick"
        "txt txt txt"
        "tags tags tags"
        ". . like2";
}

.mtmblr-count-7 mtph7 {
    aspect-ratio: 3 / 1;
}

.mtmblr-count-8 {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "photo1 photo2 photo3 photo4"
        "photo5 photo6 photo7 photo8"
        "nick nick nick nick"
        "txt txt txt txt"
        "tags tags tags tags"
        ". . . like2";
}

.mtmblr-count-9 {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "photo1 photo2 photo3"
        "photo4 photo5 photo6"
        "photo7 photo8 photo9"
        "nick nick nick"
        "txt txt txt"
        "tags tags tags"
        ". . like2";
}

.mtmblr-filter-bw img { filter: grayscale(1); }
.mtmblr-filter-sepia img { filter: sepia(.75); }

.mtmblr-filter-vintage img {
    filter: sepia(.25) saturate(.75) contrast(1.15) brightness(.95);
}

.mtmblr-filter-warm img {
    filter: sepia(.18) saturate(1.25);
}

.mtmblr-filter-cold img {
    filter: hue-rotate(12deg) saturate(.8);
}

.mtmblr-filter-contrast img {
    filter: contrast(1.45) saturate(1.1);
}

.mtmblr-filter-faded img {
    filter: brightness(1.1) contrast(.8) saturate(.65);
}

.mtmblr-filter-dramatic img {
    filter: contrast(1.5) saturate(1.2) brightness(.85);
}

.mtmblr like1 {
    display: none !important;
}

.mtmblr like2 {
    grid-area: like2;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: auto;
    min-width: 0;
    min-height: 28px;
    justify-self: end;
    align-self: end;
    position: relative;
    margin: 6px 0 0;
    background: none !important;
}

.mtmblr .mt-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 28px;
}

.mtmblr .mt-action {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 34px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #444;
    font: 13px/1 Helvetica, Arial, sans-serif;
    text-decoration: none !important;
    cursor: pointer;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .15s ease,
        opacity .2s ease;
}

.mtmblr a.mt-action:hover,
.mtmblr button.mt-action:hover {
    background: rgba(255, 255, 255, .95);
    border-color: rgba(0, 0, 0, .18);
    color: #444;
    transform: translateY(-1px);
}

.mtmblr .mt-action:active {
    transform: translateY(0);
}

.mtmblr .mt-action-icon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.mtmblr .mt-like .mt-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

.mtmblr .mt-like-count {
    min-width: 1ch;
    color: #666;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.mtmblr .mt-like.is-liked {
    border-color: rgba(220, 90, 110, .45);
    background: rgba(255, 236, 240, .95);
    color: #c4475d;
    cursor: default;
}

.mtmblr .mt-like.is-liked .mt-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c4475d' stroke='%23c4475d' stroke-width='1.5'><path d='M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z'/></svg>");
}

.mtmblr .mt-like.is-liked .mt-like-count {
    color: #c4475d;
}

.mtmblr .mt-like-count:empty::before {
    content: "0";
    opacity: .55;
}

.mtmblr .mt-comment-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 28px;
    flex: 0 0 auto;
    cursor: pointer;
}

.mtmblr .mt-comment-wrap.is-disabled {
    opacity: .45;
    pointer-events: none;
    cursor: default;
}

.mtmblr .mt-comment-face {
    position: absolute;
    inset: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .03);
    pointer-events: none;
    z-index: 1;
    box-sizing: border-box;
}

.mtmblr .mt-comment-face .mt-action-icon {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a4 4 0 0 1-4 4H8l-5 3V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4z'/></svg>");
}

.mtmblr .mt-comment-wrap .post-vote,
.mtmblr .mt-comment-wrap .post-vote.mt-vote-moved {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: auto !important;
    overflow: hidden !important;
    z-index: 2;
    display: block !important;
}

.mtmblr .mt-comment-wrap .post-vote p {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mtmblr .mt-comment-wrap .post-vote a,
.mtmblr .mt-comment-wrap .post-vote a.positive {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    opacity: 0 !important;
    cursor: pointer !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    color: transparent !important;
    text-decoration: none !important;
}

.post:has(.mtmblr) .post-rating,
.post.mtmblr-post .post-rating {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.post:has(.mtmblr) .post-box > .post-vote:not(.mt-vote-moved),
.post.mtmblr-post .post-box > .post-vote:not(.mt-vote-moved),
.post:has(.mtmblr) .post-body .post-box > .post-vote:not(.mt-vote-moved),
.post.mtmblr-post .post-body .post-box > .post-vote:not(.mt-vote-moved) {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

@media (max-width: 540px) {

    .tumblr-photo-fields {
        grid-template-columns: 1fr 1fr;
    }

    .tumblr-range-grid {
        grid-template-columns: 1fr;
    }

    .tumblr-individual-controls {
        grid-template-columns: 1fr;
    }

    .mtmblr {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo1 photo4"
            "photo2 photo5"
            "photo3 photo6"
            "nick nick"
            "txt txt"
            "tags tags"
            ". like2";
        gap: 3px;
    }

    .mtmblr-count-4 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo1 photo2"
            "photo3 photo4"
            "nick nick"
            "txt txt"
            "tags tags"
            ". like2";
    }

    .mtmblr-count-5 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo1 photo1"
            "photo2 photo3"
            "photo4 photo5"
            "nick nick"
            "txt txt"
            "tags tags"
            ". like2";
    }

    .mtmblr-count-5 mtph1 {
        aspect-ratio: 16 / 10 !important;
    }

    .mtmblr-count-5 mtph2,
    .mtmblr-count-5 mtph3,
    .mtmblr-count-5 mtph4,
    .mtmblr-count-5 mtph5 {
        aspect-ratio: 1 / 1 !important;
    }

    .mtmblr-count-6 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo1 photo4"
            "photo2 photo5"
            "photo3 photo6"
            "nick nick"
            "txt txt"
            "tags tags"
            ". like2";
    }

    .mtmblr-count-7 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo1 photo2"
            "photo3 photo4"
            "photo5 photo6"
            "photo7 photo7"
            "nick nick"
            "txt txt"
            "tags tags"
            ". like2";
    }

    .mtmblr-count-7 mtph7 {
        aspect-ratio: 2 / 1 !important;
    }

    .mtmblr-count-8 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo1 photo2"
            "photo3 photo4"
            "photo5 photo6"
            "photo7 photo8"
            "nick nick"
            "txt txt"
            "tags tags"
            ". like2";
    }

    .mtmblr-count-9 {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "photo1 photo2"
            "photo3 photo4"
            "photo5 photo6"
            "photo7 photo8"
            "photo9 photo9"
            "nick nick"
            "txt txt"
            "tags tags"
            ". like2";
    }

    .mtmblr-count-9 mtph9 {
        aspect-ratio: 2 / 1 !important;
    }

    .mtmblr mtph1 img,
    .mtmblr mtph2 img,
    .mtmblr mtph3 img,
    .mtmblr mtph4 img,
    .mtmblr mtph5 img,
    .mtmblr mtph6 img,
    .mtmblr mtph7 img,
    .mtmblr mtph8 img,
    .mtmblr mtph9 img {
        border-right: none;
        border-bottom: 1px solid rgba(var(--b6a, 219, 219, 219), 1);
    }

    .mtmblr like2 {
        gap: 6px;
        margin-top: 8px;
    }

    .mtmblr .mt-action {
        min-width: 32px;
        height: 26px;
        padding: 0 8px;
        font-size: 12px;
    }

    .mtmblr .mt-comment-wrap {
        width: 32px;
        height: 26px;
    }

    .mtmblr .mt-comment-face {
        min-width: 32px;
        height: 26px;
    }
}