.export-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px;
    margin-top: 20px
}

.export-panel h2 {
    margin: 0 0 6px
}

.export-panel .help {
    margin: 0
}

.export-checks {
    grid-column: 1/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 7px
}

.export-checks span {
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: 99px;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800
}

.export-checks span.ok {
    border-color: #28634f;
    background: #17372e;
    color: #aef5d6
}

.export-panel>.button {
    min-width: 210px
}

.export-panel>.button:disabled {
    opacity: .45;
    cursor: not-allowed
}

@media(max-width:760px) {
    .export-panel {
        grid-template-columns: 1fr
    }

    .export-panel>.button {
        width: 100%
    }
}

.export-text-option {
    display: flex;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 9px;
    margin: 16px 0;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 12px
}

.export-text-option input {
    width: 18px;
    height: 18px
}

.export-text-option span {
    font-size: 12px
}

.export-progress {
    padding: 10px;
    border-radius: 10px;
    background: #101722;
    color: var(--accent) !important;
    font-weight: 800
}

.animated-export-loading {
    display: grid;
    place-items: center;
    gap: 9px;
    margin: 14px 0;
    padding: 18px;
    border: 1px solid #34425a;
    border-radius: 14px;
    background: linear-gradient(145deg, #151b27, #0e121a);
    text-align: center
}

.animated-export-loading[hidden] {
    display: none
}

.animated-export-loading strong {
    letter-spacing: .08em
}

.animated-export-loading small {
    color: var(--muted)
}

.animated-preview-open {
    grid-column: 1/-1;
    width: 100%
}

.animated-preview-dialog {
    width: min(94vw, 430px)
}

.preview-dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px
}

.preview-dialog-head h2 {
    margin: 2px 0 10px
}

.animated-preview-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: min(100%, 290px);
    aspect-ratio: 1;
    margin: 4px auto 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background-color: #171b25;
    background-image: linear-gradient(45deg, #222 25%, transparent 25%), linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0
}

.animated-preview-stage img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.animated-preview-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 10px;
    background: #111722e8;
    text-align: center
}

.animated-preview-loading[hidden] {
    display: none
}

.animated-preview-loading small {
    color: var(--muted)
}

.animated-export-actions {
    grid-column: 1/-1;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap
}

.animated-export-dialog [hidden],
.animated-final-preview-dialog [hidden] {
    display: none !important
}

.animated-final-preview-dialog {
    width: min(96vw, 1000px);
    max-height: 92vh;
    overflow: auto
}

.animated-final-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
    min-height: 160px;
    margin-top: 14px
}

.animated-final-card {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 8px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #0e131c
}

.animated-final-card img,
.animated-final-card-loading {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 9px;
    background-color: #171b25;
    background-image: linear-gradient(45deg, #222 25%, transparent 25%), linear-gradient(-45deg, #222 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #222 75%), linear-gradient(-45deg, transparent 75%, #222 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0
}

.animated-final-card figcaption {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 11px;
    font-weight: 800
}

.animated-final-card.error {
    border-color: #8b394a
}

.animated-final-card.error .animated-final-card-loading {
    color: #ff9aaa;
    font-size: 11px
}

@media(max-width:760px) {
    .animated-export-actions {
        display: grid
    }

    .animated-export-actions .button {
        width: 100%
    }

    .animated-final-preview-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}

.animation-frame-settings {
    display: grid;
    grid-template-columns: minmax(220px, 360px) auto;
    align-items: end;
    gap: 10px 12px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0e121a
}

.animation-frame-settings label {
    display: grid;
    gap: 7px
}

.animation-frame-settings label>span {
    font-size: 13px;
    font-weight: 800
}

.animation-frame-settings small {
    grid-column: 1/-1;
    color: var(--muted);
    line-height: 1.5
}

@media(max-width:640px) {
    .animation-frame-settings {
        grid-template-columns: 1fr
    }

    .animation-frame-settings small {
        grid-column: auto
    }

    .animation-frame-settings .button {
        width: 100%
    }
}

.line-application-guide {
    display: grid;
    gap: 18px
}

.line-application-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px
}

.line-application-head h2 {
    margin: 2px 0 5px
}

.line-application-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    counter-reset: line-step;
    list-style: none
}

.line-application-steps li {
    position: relative;
    display: grid;
    gap: 5px;
    min-height: 92px;
    padding: 14px 14px 14px 52px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #0e121a;
    counter-increment: line-step
}

.line-application-steps li::before {
    content: counter(line-step);
    position: absolute;
    top: 14px;
    left: 14px;
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--accent);
    color: #07110d;
    font-weight: 900
}

.line-application-steps strong {
    font-size: 14px
}

.line-application-steps span {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.65
}

.line-application-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 14px;
    align-items: center;
    padding-top: 2px
}

.line-application-notes span {
    color: #ffd587;
    font-size: 12px
}

.line-application-notes a {
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none
}

.line-application-notes a:hover {
    text-decoration: underline
}

@media(max-width:720px) {
    .line-application-head {
        align-items: stretch;
        flex-direction: column
    }

    .line-application-head .button {
        width: 100%;
        text-align: center
    }

    .line-application-steps {
        grid-template-columns: 1fr
    }

    .line-application-steps li {
        min-height: auto
    }
}