/* 程序流程专题文章：topic-program-run-step-time */

.topic-program-run-step-time-story {
    color: var(--article-text-color);
    font-size: 14px;
    line-height: 1.65;
}
.topic-program-run-step-time-story * { box-sizing: border-box; }
.topic-program-run-step-time-story p { margin: 0 0 12px; }
.topic-program-run-step-time-story strong { color: var(--article-heading-color); }
.topic-program-run-step-time-story code, .topic-program-run-step-time-story pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.topic-program-run-step-time-section {
    margin-top: 22px;
    scroll-margin-top: 110px;
}
.topic-program-run-step-time-section > h2 {
    display:flex;
    align-items:center;
    gap:14px;
    margin:0 0 8px;
    color:var(--article-heading-color);
    font-size:20px;
    line-height:1.35;
    font-weight:900;
}
.topic-program-run-step-time-number {
    display:inline-flex;
    flex:0 0 38px;
    height:38px;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0752ff;
    color:#fff;
    font-size:16px;
    font-weight:700;
}
.topic-program-run-step-time-story pre {
    margin:14px 0;
    padding:16px;
    border-radius:14px;
    overflow:auto;
    background:#152033;
    color:#f4f7ff;
    line-height:1.6;
    font-size:12px;
}
.topic-program-run-step-time-story pre code {
    color:inherit;
    white-space:pre;
}
.topic-program-run-step-time-story .cards {
    display:grid;
    gap:10px;
    margin-top:14px;
}
.topic-program-run-step-time-story .cards.three {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
.topic-program-run-step-time-story .cards.four {
    grid-template-columns:repeat(4,minmax(0,1fr));
}
.topic-program-run-step-time-story .cards article {
    padding:14px 10px;
    border:1px solid #e1ebff;
    border-radius:14px;
    background:#f9fbff;
    text-align:center;
}
.topic-program-run-step-time-story .cards h3 {
    margin:0 0 4px;
    color:var(--article-heading-color);
    font-size:13px;
}
.topic-program-run-step-time-story .cards p {
    margin:0;
    color:#617296;
    font-size:10px;
}
.topic-program-run-step-time-story .flow {
    display:grid;
    grid-template-columns:1fr 34px 1fr 34px 1fr;
    gap:7px;
    align-items:center;
    margin-top:14px;
}
.topic-program-run-step-time-story .flow span {
    display:flex;
    min-height:116px;
    align-items:center;
    justify-content:center;
    padding:12px;
    border-radius:14px;
    background:#eef5ff;
    color:#1d3d75;
    font-weight:800;
    text-align:center;
}
.topic-program-run-step-time-story .flow span:nth-of-type(2) { background:#fff6df; }
.topic-program-run-step-time-story .flow span:nth-of-type(3) { background:#eef9f0; }
.topic-program-run-step-time-story .flow b {
    color:#4f82ff;
    font-size:22px;
    text-align:center;
}
.topic-program-run-step-time-story .trace {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    align-items:center;
    margin-top:14px;
    padding:14px;
    border-radius:14px;
    background:#f7f8fc;
}
.topic-program-run-step-time-story .trace span {
    padding:9px 11px;
    border-radius:9px;
    background:#fff;
    color:#1d3d75;
    font-size:10px;
    font-weight:800;
}
.topic-program-run-step-time-story .trace b {
    color:#4f82ff;
}
.topic-program-run-step-time-story .branch, .topic-program-run-step-time-story .compare {
    display:grid;
    grid-template-columns:1fr 70px 1fr;
    gap:10px;
    align-items:center;
    margin-top:14px;
}
.topic-program-run-step-time-story .compare {
    grid-template-columns:repeat(2,minmax(0,1fr));
}
.topic-program-run-step-time-story .branch > div, .topic-program-run-step-time-story .compare > div {
    padding:15px;
    border-radius:15px;
    background:#eef5ff;
    text-align:center;
}
.topic-program-run-step-time-story .branch > div:last-child, .topic-program-run-step-time-story .compare > div:nth-child(2) {
    background:#eef9f0;
}
.topic-program-run-step-time-story .branch > b {
    color:#6049b8;
    text-align:center;
}
.topic-program-run-step-time-story .compare h3 {
    margin:0 0 5px;
    color:var(--article-heading-color);
    font-size:14px;
}
.topic-program-run-step-time-story .compare p, .topic-program-run-step-time-story .branch p {
    margin:0;
    color:#617296;
    font-size:10px;
}
.topic-program-run-step-time-story .tip, .topic-program-run-step-time-story .warn {
    margin-top:14px;
    padding:14px 16px;
    border-radius:14px;
}
.topic-program-run-step-time-story .tip { background:#eaf5ff; }
.topic-program-run-step-time-story .warn {
    border:1px solid #ffd0dc;
    background:#fff2f6;
}
.topic-program-run-step-time-story .tip h3, .topic-program-run-step-time-story .warn h3 {
    margin:0 0 4px;
    font-size:15px;
}
.topic-program-run-step-time-story .tip h3 { color:#0752ff; }
.topic-program-run-step-time-story .warn h3 { color:#d83265; }
.topic-program-run-step-time-story .state-box {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin-top:14px;
}
.topic-program-run-step-time-story .state-box > div {
    padding:12px;
    border-radius:12px;
    background:#f3efff;
    text-align:center;
}
.topic-program-run-step-time-story .state-box strong {
    display:block;
    color:#6049b8;
    font-size:11px;
}
.topic-program-run-step-time-story .state-box p {
    margin:5px 0 0;
    color:#617296;
    font-size:10px;
}
.topic-program-run-step-time-story .grid-demo {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:7px;
    margin-top:14px;
    padding:14px;
    border-radius:14px;
    background:#f7f8fc;
}
.topic-program-run-step-time-story .grid-demo span {
    padding:12px;
    border-radius:9px;
    background:#fff;
    color:#0752ff;
    font-weight:800;
    text-align:center;
}
.topic-program-run-step-time-story .formula {
    margin-top:14px;
    padding:16px;
    border-radius:14px;
    background:#eef5ff;
    color:#0752ff;
    font-size:18px;
    font-weight:900;
    text-align:center;
}
.topic-program-run-step-time-story table {
    width:100%;
    margin-top:14px;
    border-collapse:collapse;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}
.topic-program-run-step-time-story th, .topic-program-run-step-time-story td {
    border:1px solid #e1ebff;
    padding:8px;
    text-align:center;
}
.topic-program-run-step-time-story th {
    background:#eef5ff;
    color:#1d3d75;
}
.topic-program-run-step-time-summary {
    margin-top:22px;
    padding:18px;
    border-radius:16px;
    background:#e9f3ff;
    scroll-margin-top:110px;
}
.topic-program-run-step-time-summary h2 {
    margin:0 0 7px;
    color:#0752ff;
    font-size:19px;
}
.topic-program-run-step-time-summary ul {
    margin:0;
    padding-left:20px;
    line-height:1.75;
}
.topic-program-run-step-time-summary .next {
    margin:10px 0 0;
    padding-top:10px;
    border-top:1px dashed #b8d3f6;
}
.topic-program-run-step-time-pagination {
    display:flex;
    justify-content:space-between;
    gap:18px;
    margin-top:14px;
}
.topic-program-run-step-time-pagination a {
    display:flex;
    align-items:center;
    gap:10px;
    max-width:49%;
    padding:10px 13px;
    border:1px solid #d9e7ff;
    border-radius:12px;
    background:#ffffffb3;
    text-decoration:none;
}
.topic-program-run-step-time-pagination a:last-child { text-align:right; }
.topic-program-run-step-time-pagination strong {
    display:block;
    color:#0752ff;
    font-size:16px;
}
.topic-program-run-step-time-pagination small {
    display:block;
    color:#576b9f;
    font-size:12px;
}

@media (max-width:900px) {
    .topic-program-run-step-time-story .cards.four,
    .topic-program-run-step-time-story .state-box {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media (max-width:640px) {
    .topic-program-run-step-time-story { font-size:12px; }
    .topic-program-run-step-time-section > h2 {
        gap:9px;
        font-size:16px;
    }
    .topic-program-run-step-time-number {
        flex-basis:31px;
        height:31px;
        font-size:14px;
    }
    .topic-program-run-step-time-story .cards.three,
    .topic-program-run-step-time-story .cards.four,
    .topic-program-run-step-time-story .state-box,
    .topic-program-run-step-time-story .compare,
    .topic-program-run-step-time-story .branch,
    .topic-program-run-step-time-story .flow {
        grid-template-columns:minmax(0,1fr);
    }
    .topic-program-run-step-time-story .flow b,
    .topic-program-run-step-time-story .branch > b {
        transform:rotate(90deg);
    }
    .topic-program-run-step-time-pagination { gap:9px; }
    .topic-program-run-step-time-pagination a {
        flex:1;
        min-width:0;
        padding:8px 6px;
    }
    .topic-program-run-step-time-pagination strong { font-size:13px; }
    .topic-program-run-step-time-pagination small {
        font-size:10px;
        line-height:1.35;
    }
}