/* RunHTML 首页运行预览器样式。该文件是静态站点直接加载的运行样式。 */
.rh-page {
    min-width: 320px;
    margin: 0;
    color: #172033;
    background: #f7f8fc;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

.rh-page a {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.rh-page .mi-header {
    position: relative;
    z-index: 50;
    padding: 14px 20px;
    color: #dbeafe;
    background: rgba(7, 17, 31, .96);
    border-bottom: 1px solid rgba(148, 163, 184, .16);
    box-shadow: 0 8px 28px rgba(2, 8, 23, .18);
    backdrop-filter: blur(16px);
}

.rh-page .mi-brand,
.rh-page .mi-brand:hover {
    color: #f8fafc;
    text-decoration: none;
}

.rh-page .mi-brand-mark {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #2563eb);
    box-shadow: 0 8px 22px rgba(99, 102, 241, .32);
}

.rh-page .mi-brand-name {
    color: #f8fafc;
    letter-spacing: -.035em;
}

.rh-page .mi-brand-note {
    color: #94a3b8;
}

.rh-page .mi-nav-link {
    color: #a9b7cb;
}

.rh-page .mi-nav-link:hover,
.rh-page .mi-nav-link.active {
    color: #fff;
    background: rgba(139, 92, 246, .18);
}

.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn {
    color: #cbd5e1;
    background: rgba(15, 31, 51, .9);
    border-color: rgba(148, 163, 184, .26);
}

.rh-page .mi-language-btn:hover,
.rh-page .mi-mobile-btn:hover {
    color: #fff;
    background: #6d45d8;
    border-color: #8b5cf6;
}

.rh-page .mi-mobile-menu {
    background: #08111f;
}

.rh-page .mi-mobile-menu-inner {
    border-top-color: rgba(148, 163, 184, .16);
}

.rh-page .mi-mobile-link {
    color: #cbd5e1;
}

.rh-page .mi-mobile-link:hover,
.rh-page .mi-mobile-link.active {
    color: #fff;
    background: rgba(139, 92, 246, .18);
}

.rh-container {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin: 0 auto;
}

.rh-hero {
    position: relative;
    overflow: hidden;
    padding: 104px 0 112px;
    color: #f8fafc;
    background: #07111f;
}

.rh-hero::before {
    position: absolute;
    top: -300px;
    right: -160px;
    width: 720px;
    height: 720px;
    border: 1px solid rgba(139, 92, 246, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 44px rgba(139, 92, 246, .035), 0 0 0 90px rgba(139, 92, 246, .025);
    content: "";
    pointer-events: none;
}

.rh-hero::after {
    position: absolute;
    bottom: -280px;
    left: -180px;
    width: 620px;
    height: 620px;
    border: 1px solid rgba(37, 99, 235, .18);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.rh-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .88fr);
    align-items: center;
    gap: 80px;
}

.rh-hero-copy {
    max-width: 640px;
}

.rh-eyebrow {
    margin: 0 0 14px;
    color: #a78bfa;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1.5;
    text-transform: uppercase;
}

.rh-eyebrow i {
    margin-right: 7px;
}

.rh-hero h1 {
    max-width: 680px;
    margin: 0 0 24px;
    color: #f8fafc;
    font-size: clamp(43px, 6vw, 74px);
    font-weight: 850;
    letter-spacing: -.075em;
    line-height: 1.02;
}

.rh-hero-lead {
    max-width: 590px;
    margin: 0;
    color: #9fb0c7;
    font-size: 17px;
    line-height: 1.85;
}

.rh-hero-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 34px;
}

.rh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 48px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 750;
    text-decoration: none;
}

.rh-button:hover {
    text-decoration: none;
    transform: translateY(-2px);
}

.rh-button-primary {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: #8b5cf6;
    box-shadow: 0 14px 28px rgba(99, 102, 241, .3);
}

.rh-button-primary:hover {
    color: #fff;
    background: linear-gradient(135deg, #9f7aea, #7c3aed);
    border-color: #a78bfa;
}

.rh-button-ghost {
    color: #cbd5e1;
    background: rgba(15, 31, 51, .7);
    border-color: rgba(148, 163, 184, .28);
}

.rh-button-ghost:hover {
    color: #fff;
    background: rgba(30, 48, 75, .9);
    border-color: rgba(167, 139, 250, .55);
}

.rh-trust-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 30px;
    color: #8495ad;
    font-size: 12px;
}

.rh-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.rh-trust-row i {
    color: #a78bfa;
}

.rh-hero-terminal {
    overflow: hidden;
    background: #0d1a2d;
    border: 1px solid rgba(148, 163, 184, .2);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3), 0 0 0 10px rgba(139, 92, 246, .04);
    transform: rotate(1.5deg);
}

.rh-terminal-bar,
.rh-terminal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: 0 18px;
    color: #7f91ab;
    background: rgba(4, 12, 24, .45);
    font-size: 12px;
}

.rh-terminal-dots {
    display: inline-flex;
    gap: 6px;
}

.rh-terminal-dots i,
.rh-terminal-live i {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.rh-terminal-dots i:nth-child(1) { background: #fb7185; }
.rh-terminal-dots i:nth-child(2) { background: #fbbf24; }
.rh-terminal-dots i:nth-child(3) { background: #34d399; }

.rh-terminal-file {
    margin-left: 35px;
    color: #cbd5e1;
}

.rh-terminal-file i {
    margin-right: 5px;
    color: #a78bfa;
}

.rh-terminal-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6ee7b7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .1em;
}

.rh-terminal-live i {
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .12);
}

.rh-hero-terminal pre {
    min-height: 285px;
    margin: 0;
    padding: 30px 28px;
    overflow: auto;
    color: #d7e0ef;
    background: #0b1728;
    font: 13px/2 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.rh-code-tag { color: #f472b6; }
.rh-code-attr { color: #fbbf24; }
.rh-code-string { color: #86efac; }
.rh-code-selector { color: #a78bfa; }
.rh-code-property { color: #67e8f9; }
.rh-code-value { color: #fda4af; }

.rh-terminal-footer {
    min-height: 42px;
    border-top: 1px solid rgba(148, 163, 184, .13);
}

.rh-terminal-footer i {
    margin-right: 5px;
    color: #6ee7b7;
}

.rh-runner-section {
    padding: 94px 0 108px;
    color: #f8fafc;
    background: #091525;
}

.rh-section-heading {
    margin-bottom: 30px;
}

.rh-section-heading h2 {
    margin: 0;
    color: #172033;
    font-size: clamp(29px, 4vw, 43px);
    font-weight: 820;
    letter-spacing: -.06em;
    line-height: 1.12;
}

.rh-section-heading p:not(.rh-eyebrow) {
    max-width: 620px;
    margin: 14px 0 0;
    color: #718096;
    font-size: 15px;
    line-height: 1.8;
}

.rh-section-heading-light h2 {
    color: #f8fafc;
}

.rh-section-heading-light p:not(.rh-eyebrow) {
    color: #91a2b9;
}

.rh-section-heading-light {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.rh-shortcut-note {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 7px;
    color: #91a2b9;
    font-size: 12px;
}

.rh-shortcut-note kbd {
    padding: 5px 8px;
    color: #dbeafe;
    background: #14243a;
    border: 1px solid #2a3e5d;
    border-radius: 5px;
    font: 11px "SFMono-Regular", Consolas, monospace;
}

.rh-workspace {
    overflow: hidden;
    background: #0f1d30;
    border: 1px solid #273b58;
    border-radius: 16px;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .22);
}

.rh-workspace-toolbar,
.rh-workspace-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 58px;
    padding: 0 18px;
    background: #13243a;
}

.rh-workspace-title,
.rh-workspace-actions,
.rh-editor-tabs,
.rh-preview-bar {
    display: flex;
    align-items: center;
}

.rh-workspace-title {
    gap: 9px;
    min-width: 0;
    color: #e2e8f0;
    font-size: 14px;
}

.rh-online-dot {
    width: 8px;
    height: 8px;
    background: #34d399;
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, .1);
}

.rh-workspace-status {
    overflow: hidden;
    max-width: 180px;
    color: #8fa2bb;
    font-size: 11px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rh-workspace-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.rh-auto-run {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
    color: #a7b5c8;
    font-size: 11px;
    cursor: pointer;
}

.rh-auto-run input {
    accent-color: #8b5cf6;
}

.rh-tool-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    color: #b6c4d7;
    background: #182b44;
    border: 1px solid #2a405f;
    border-radius: 7px;
    cursor: pointer;
    font-size: 11px;
}

.rh-tool-button:hover {
    color: #fff;
    background: #253d60;
    border-color: #6578a2;
}

.rh-tool-button-run {
    color: #fff;
    background: #7c3aed;
    border-color: #8b5cf6;
}

.rh-tool-button-run:hover {
    background: #6d28d9;
    border-color: #a78bfa;
}

.rh-workspace-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-height: 520px;
}

.rh-editor-column {
    min-width: 0;
    background: #0b1728;
    border-right: 1px solid #273b58;
}

.rh-editor-tabs {
    gap: 2px;
    min-height: 48px;
    padding: 0 13px;
    background: #101f34;
    border-bottom: 1px solid #273b58;
}

.rh-editor-tab {
    align-self: stretch;
    padding: 0 12px;
    color: #8fa2bb;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 12px;
}

.rh-editor-tab i {
    margin-right: 5px;
}

.rh-editor-tab:hover,
.rh-editor-tab.active {
    color: #f8fafc;
    border-bottom-color: #a78bfa;
}

.rh-editor-tab[data-editor-tab="html"] i { color: #fb7185; }
.rh-editor-tab[data-editor-tab="css"] i { color: #60a5fa; }
.rh-editor-tab[data-editor-tab="js"] i { color: #fbbf24; }

.rh-editor-hint {
    margin-left: auto;
    color: #637791;
    font: 10px "SFMono-Regular", Consolas, monospace;
}

.rh-editor-panes {
    position: relative;
    height: 472px;
}

.rh-code-editor {
    display: none;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 23px 22px;
    resize: none;
    color: #d6e1ef;
    background: #0b1728;
    border: 0;
    outline: 0;
    font: 13px/1.75 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    tab-size: 4;
}

.rh-code-editor.active {
    display: block;
}

.rh-code-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .45);
}

.rh-preview-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: #fff;
}

.rh-preview-bar {
    justify-content: space-between;
    min-height: 48px;
    padding: 0 15px;
    color: #667085;
    background: #f7f8fc;
    border-bottom: 1px solid #e7eaf0;
    font-size: 12px;
}

.rh-preview-bar i {
    margin-right: 5px;
    color: #7c3aed;
}

#preview-time {
    color: #98a2b3;
    font: 10px "SFMono-Regular", Consolas, monospace;
}

.rh-preview-frame-wrap {
    position: relative;
    flex: 1;
    min-height: 472px;
    background: #fff;
}

#preview-frame {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 472px;
    background: #fff;
    border: 0;
}

.rh-preview-empty {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    display: none;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    color: #98a2b3;
    font-size: 12px;
    transform: translate(-50%, -50%);
}

.rh-preview-empty i {
    color: #c4b5fd;
    font-size: 30px;
}

.rh-workspace-footer {
    min-height: 42px;
    color: #8092aa;
    border-top: 1px solid #273b58;
    font-size: 11px;
}

.rh-workspace-footer i {
    margin-right: 5px;
    color: #6ee7b7;
}

#code-size {
    color: #627692;
    font: 10px "SFMono-Regular", Consolas, monospace;
}

.rh-light-section,
.rh-faq-section {
    padding: 100px 0;
    background: #fff;
}

.rh-section-heading-center {
    text-align: center;
}

.rh-section-heading-center p:not(.rh-eyebrow) {
    margin-right: auto;
    margin-left: auto;
}

.rh-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.rh-feature-card {
    min-height: 205px;
    padding: 25px 22px;
    background: #f8f9fc;
    border: 1px solid #e6eaf1;
    border-radius: 15px;
}

.rh-feature-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 16px 35px rgba(60, 49, 120, .08);
    transform: translateY(-3px);
}

.rh-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 18px;
    color: #7c3aed;
    background: #ede9fe;
    border-radius: 12px;
    font-size: 17px;
}

.rh-feature-card h3,
.rh-step-list h3 {
    margin: 0 0 9px;
    color: #1f2937;
    font-size: 16px;
    font-weight: 780;
}

.rh-feature-card p,
.rh-step-list p {
    margin: 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.75;
}

.rh-steps-section {
    padding: 100px 0;
    background: #f7f8fc;
}

.rh-steps-layout {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 100px;
    align-items: start;
}

.rh-step-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.rh-step-list li {
    display: flex;
    gap: 18px;
    padding: 0 0 25px;
    margin: 0 0 25px;
    border-bottom: 1px solid #e5e7eb;
}

.rh-step-list li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
}

.rh-step-list li > span {
    flex: 0 0 42px;
    color: #8b5cf6;
    font: 800 14px/42px "SFMono-Regular", Consolas, monospace;
}

.rh-faq-section {
    background: #fff;
}

.rh-faq-layout {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 100px;
    align-items: start;
}

.rh-faq-list details {
    padding: 0 0 18px;
    margin: 0 0 18px;
    border-bottom: 1px solid #e7eaf0;
}

.rh-faq-list summary {
    position: relative;
    padding: 4px 30px 4px 0;
    color: #1f2937;
    cursor: pointer;
    font-size: 15px;
    font-weight: 750;
    list-style: none;
}

.rh-faq-list summary::-webkit-details-marker {
    display: none;
}

.rh-faq-list summary::after {
    position: absolute;
    top: 3px;
    right: 4px;
    color: #8b5cf6;
    content: "+";
    font-size: 20px;
    font-weight: 400;
}

.rh-faq-list details[open] summary::after {
    content: "−";
}

.rh-faq-list p {
    max-width: 680px;
    margin: 11px 0 0;
    color: #718096;
    font-size: 13px;
    line-height: 1.8;
}

.rh-cta-section {
    padding: 0 0 100px;
    background: #fff;
}

.rh-cta-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    padding: 42px 48px;
    background: linear-gradient(120deg, #101b31, #1e1b4b);
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(45, 35, 105, .16);
}

.rh-cta-card h2 {
    margin: 0;
    color: #f8fafc;
    font-size: clamp(25px, 3vw, 35px);
    letter-spacing: -.05em;
}

.rh-cta-card .rh-eyebrow {
    margin-bottom: 10px;
}

.rh-page .mi-footer {
    color: #9aa9bc;
    background: #07111f;
    border-top: 1px solid #1b2c44;
}

.rh-page .mi-footer-overline,
.rh-page .mi-footer-title {
    color: #a78bfa;
}

.rh-page .mi-footer-slogan,
.rh-page .mi-footer-description,
.rh-page .mi-footer-bottom {
    color: #8fa2bb;
}

.rh-page .mi-footer-brand,
.rh-page .mi-footer-links a,
.rh-page .mi-footer-bottom a {
    color: #dbeafe;
}

.rh-page .mi-footer-brand:hover,
.rh-page .mi-footer-links a:hover,
.rh-page .mi-footer-bottom a:hover {
    color: #c4b5fd;
}

.rh-page .mi-footer-brand-mark {
    color: #fff;
    background: #7c3aed;
}

.rh-page .mi-footer-privacy {
    color: #6ee7b7;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1024px) {
    .rh-hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .85fr);
        gap: 40px;
    }

    .rh-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rh-steps-layout,
    .rh-faq-layout {
        gap: 55px;
    }
}

@media (max-width: 800px) {
    .rh-page .mi-nav {
        display: none;
    }

    .rh-page .mi-mobile-actions {
        display: flex;
    }

    .rh-hero {
        padding: 76px 0 82px;
    }

    .rh-hero-grid,
    .rh-steps-layout,
    .rh-faq-layout {
        grid-template-columns: 1fr;
    }

    .rh-hero-grid {
        gap: 58px;
    }

    .rh-hero-terminal {
        max-width: 650px;
        margin: 0 auto;
        transform: none;
    }

    .rh-section-heading-light {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .rh-workspace-body {
        grid-template-columns: 1fr;
    }

    .rh-editor-column {
        border-right: 0;
        border-bottom: 1px solid #273b58;
    }

    .rh-editor-panes,
    .rh-code-editor,
    #preview-frame,
    .rh-preview-frame-wrap {
        min-height: 390px;
        height: 390px;
    }

    .rh-steps-layout,
    .rh-faq-layout {
        gap: 36px;
    }
}

@media (max-width: 560px) {
    .rh-container {
        width: calc(100% - 32px);
    }

    .rh-page .mi-header {
        padding: 12px 16px;
    }

    .rh-hero h1 {
        font-size: 43px;
    }

    .rh-hero-lead {
        font-size: 15px;
    }

    .rh-trust-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .rh-hero-terminal pre {
        min-height: 260px;
        padding: 23px 17px;
        font-size: 11px;
    }

    .rh-terminal-file {
        margin-left: 0;
    }

    .rh-terminal-bar,
    .rh-terminal-footer {
        padding-right: 13px;
        padding-left: 13px;
    }

    .rh-runner-section,
    .rh-light-section,
    .rh-steps-section,
    .rh-faq-section {
        padding: 70px 0;
    }

    .rh-workspace-toolbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 14px;
    }

    .rh-workspace-actions {
        justify-content: flex-start;
        width: 100%;
    }

    .rh-auto-run {
        margin-right: auto;
    }

    .rh-tool-button span {
        display: none;
    }

    .rh-tool-button {
        width: 34px;
        justify-content: center;
        padding: 0;
    }

    .rh-editor-tabs {
        padding: 0 6px;
    }

    .rh-editor-tab {
        padding: 0 8px;
        font-size: 11px;
    }

    .rh-editor-hint {
        display: none;
    }

    .rh-code-editor {
        padding: 18px 14px;
        font-size: 11px;
    }

    .rh-workspace-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        padding: 11px 14px;
    }

    .rh-feature-grid {
        grid-template-columns: 1fr;
    }

    .rh-feature-card {
        min-height: auto;
    }

    .rh-cta-section {
        padding-bottom: 70px;
    }

    .rh-cta-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 30px 24px;
    }
}

/* Zinc-400 主题覆盖，统一首页视觉强调色为中性灰阶。 */
.rh-page {
    color: #27272a;
    background: #f4f4f5;
}

.rh-page .mi-header {
    color: #d4d4d8;
    background: rgba(9, 9, 11, .97);
    border-bottom-color: rgba(161, 161, 170, .2);
    box-shadow: 0 8px 28px rgba(9, 9, 11, .24);
}

.rh-page .mi-brand-mark {
    background: linear-gradient(135deg, #a1a1aa, #52525b);
    box-shadow: 0 8px 22px rgba(161, 161, 170, .25);
}

.rh-page .mi-brand-note,
.rh-page .mi-nav-link,
.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn,
.rh-page .mi-mobile-link {
    color: #a1a1aa;
}

.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn {
    background: #18181b;
    border-color: #52525b;
}

.rh-page .mi-nav-link:hover,
.rh-page .mi-nav-link.active,
.rh-page .mi-mobile-link:hover,
.rh-page .mi-mobile-link.active {
    color: #fafafa;
    background: rgba(161, 161, 170, .16);
}

.rh-page .mi-language-btn:hover,
.rh-page .mi-mobile-btn:hover {
    color: #fff;
    background: #71717a;
    border-color: #a1a1aa;
}

.rh-page .mi-mobile-menu,
.rh-hero,
.rh-runner-section,
.rh-page .mi-footer {
    background-color: #09090b;
}

.rh-hero::before,
.rh-hero::after {
    border-color: rgba(161, 161, 170, .2);
}

.rh-hero::before {
    box-shadow: 0 0 0 44px rgba(161, 161, 170, .035), 0 0 0 90px rgba(161, 161, 170, .025);
}

.rh-eyebrow,
.rh-trust-row i,
.rh-terminal-file i,
.rh-code-selector,
.rh-shortcut-note kbd,
.rh-preview-bar i,
.rh-preview-empty i,
.rh-step-list li > span,
.rh-faq-list summary::after,
.rh-page .mi-footer-overline,
.rh-page .mi-footer-title {
    color: #a1a1aa;
}

.rh-hero-lead,
.rh-section-heading-light p:not(.rh-eyebrow),
.rh-feature-card p,
.rh-step-list p,
.rh-faq-list p,
.rh-page .mi-footer-slogan,
.rh-page .mi-footer-description,
.rh-page .mi-footer-bottom {
    color: #a1a1aa;
}

.rh-button-primary {
    color: #18181b;
    background: linear-gradient(135deg, #d4d4d8, #a1a1aa);
    border-color: #a1a1aa;
    box-shadow: 0 14px 28px rgba(161, 161, 170, .22);
}

.rh-button-primary:hover {
    color: #09090b;
    background: linear-gradient(135deg, #f4f4f5, #a1a1aa);
    border-color: #d4d4d8;
}

.rh-button-ghost {
    color: #d4d4d8;
    background: rgba(39, 39, 42, .7);
    border-color: rgba(161, 161, 170, .35);
}

.rh-button-ghost:hover {
    color: #fff;
    background: #27272a;
    border-color: #a1a1aa;
}

.rh-hero-terminal,
.rh-workspace {
    border-color: rgba(161, 161, 170, .28);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .3), 0 0 0 10px rgba(161, 161, 170, .04);
}

.rh-hero-terminal,
.rh-workspace,
.rh-workspace-toolbar,
.rh-workspace-footer,
.rh-terminal-bar,
.rh-terminal-footer,
.rh-editor-tabs {
    background-color: #18181b;
}

.rh-hero-terminal pre,
.rh-editor-column,
.rh-code-editor {
    color: #e4e4e7;
    background-color: #09090b;
}

.rh-terminal-bar,
.rh-terminal-footer,
.rh-workspace-footer,
.rh-editor-hint,
.rh-workspace-status,
.rh-shortcut-note,
.rh-trust-row {
    color: #a1a1aa;
}

.rh-code-tag,
.rh-code-attr,
.rh-code-string,
.rh-code-property,
.rh-code-value,
.rh-terminal-file,
.rh-terminal-footer,
.rh-editor-tab[data-editor-tab="html"] i,
.rh-editor-tab[data-editor-tab="css"] i,
.rh-editor-tab[data-editor-tab="js"] i {
    color: #d4d4d8;
}

.rh-terminal-live,
.rh-terminal-footer i,
.rh-workspace-footer i,
.rh-page .mi-footer-privacy {
    color: #a1a1aa;
}

.rh-tool-button,
.rh-shortcut-note kbd {
    color: #d4d4d8;
    background: #27272a;
    border-color: #52525b;
}

.rh-tool-button:hover {
    color: #fff;
    background: #3f3f46;
    border-color: #a1a1aa;
}

.rh-tool-button-run {
    color: #18181b;
    background: #a1a1aa;
    border-color: #d4d4d8;
}

.rh-tool-button-run:hover {
    color: #09090b;
    background: #d4d4d8;
    border-color: #f4f4f5;
}

.rh-preview-bar,
.rh-preview-empty,
.rh-feature-card h3,
.rh-step-list h3,
.rh-faq-list summary {
    color: #71717a;
}

.rh-section-heading-light p:not(.rh-eyebrow) {
    color: #a1a1aa;
}

.rh-editor-tab:hover,
.rh-editor-tab.active {
    color: #fafafa;
    border-bottom-color: #a1a1aa;
}

.rh-auto-run input {
    accent-color: #a1a1aa;
}

.rh-code-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(161, 161, 170, .55);
}

.rh-feature-card:hover {
    border-color: #a1a1aa;
    box-shadow: 0 16px 35px rgba(39, 39, 42, .1);
}

.rh-feature-icon {
    color: #71717a;
    background: #f4f4f5;
}

.rh-cta-card {
    background: linear-gradient(120deg, #18181b, #27272a);
    box-shadow: 0 20px 48px rgba(39, 39, 42, .18);
}

.rh-page .mi-footer {
    border-top-color: #3f3f46;
}

.rh-page .mi-footer-brand-mark {
    background: #71717a;
}

/* 最终暖色覆盖，确保后续旧版灰阶规则不会覆盖当前首页主题。 */
.rh-page {
    color: #3d322b;
    background: #fbf8f4;
}

.rh-page .mi-header {
    color: #7e7066;
    background: #fffdf9;
    border-bottom-color: #e7dbd0;
    box-shadow: 0 8px 24px rgba(126, 74, 50, .07);
}

.rh-page .mi-brand,
.rh-page .mi-brand:hover,
.rh-page .mi-brand-name {
    color: #3d322b;
}

.rh-page .mi-brand-mark,
.rh-page .mi-footer-brand-mark {
    background: linear-gradient(135deg, #d88965, #b85b3f);
    box-shadow: 0 8px 20px rgba(184, 91, 63, .2);
}

.rh-page .mi-brand-note,
.rh-page .mi-nav-link,
.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn,
.rh-page .mi-mobile-link {
    color: #8b776a;
}

.rh-page .mi-nav-link:hover,
.rh-page .mi-nav-link.active,
.rh-page .mi-mobile-link:hover,
.rh-page .mi-mobile-link.active {
    color: #8f412c;
    background: #f8e9e1;
}

.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn {
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-page .mi-language-btn:hover,
.rh-page .mi-mobile-btn:hover {
    color: #8f412c;
    background: #f8e9e1;
    border-color: #c77b5d;
}

.rh-page .mi-mobile-menu {
    background: #fffdf9;
}

.rh-runner-section {
    color: #3d322b;
    background: #f6f0e9;
    padding-top: 36px;
}

.rh-section-heading h2,
.rh-runner-section .rh-section-heading h2 {
    color: #3d322b;
}

.rh-section-heading p:not(.rh-eyebrow),
.rh-runner-section .rh-section-heading p:not(.rh-eyebrow) {
    color: #7e7066;
}

.rh-runner-section .rh-section-heading p:not(.rh-eyebrow) {
    max-width: none;
}

.rh-shortcut-note {
    color: #8b776a;
}

.rh-shortcut-note kbd {
    color: #8f412c;
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-workspace {
    background: #fffdf9;
    border-color: #dfcfc2;
    box-shadow: 0 20px 50px rgba(126, 74, 50, .12);
}

.rh-workspace-toolbar,
.rh-workspace-footer {
    color: #7e7066;
    background: #fffdf9;
}

.rh-workspace-toolbar {
    border-bottom-color: #eee2d8;
}

.rh-workspace-title {
    color: #3d322b;
}

.rh-online-dot {
    background: #71856a;
    box-shadow: 0 0 0 4px rgba(113, 133, 106, .18);
}

.rh-workspace-status,
.rh-auto-run,
.rh-workspace-footer,
#code-size,
.rh-editor-hint {
    color: #8b776a;
}

.rh-tool-button,
.rh-tool-button-run {
    color: #765f52;
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-tool-button:hover {
    color: #8f412c;
    background: #f8e9e1;
    border-color: #c77b5d;
}

.rh-tool-button-run {
    color: #fffaf6;
    background: #b85b3f;
    border-color: #b85b3f;
}

.rh-tool-button-run:hover {
    color: #fffdf9;
    background: #9f4932;
    border-color: #9f4932;
}

.rh-editor-column {
    background: #faf5ef;
    border-right-color: #eee2d8;
    border-bottom-color: #eee2d8;
}

.rh-editor-tabs {
    background: #fffdf9;
    border-bottom-color: #eee2d8;
}

.rh-editor-tab {
    color: #8b776a;
}

.rh-editor-tab:hover,
.rh-editor-tab.active {
    color: #8f412c;
    border-bottom-color: #b85b3f;
}

.rh-editor-tab i,
.rh-editor-tab[data-editor-tab="html"] i,
.rh-editor-tab[data-editor-tab="css"] i,
.rh-editor-tab[data-editor-tab="js"] i {
    color: #b85b3f;
}

.rh-code-editor {
    color: #493a31;
    background: #fcf8f3;
}

.rh-code-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(184, 91, 63, .55);
}

.rh-preview-column,
.rh-preview-frame-wrap,
#preview-frame {
    background: #fffdf9;
}

.rh-preview-bar {
    color: #7e7066;
    background: #faf5ef;
    border-bottom-color: #eee2d8;
}

.rh-preview-empty,
.rh-feature-card h3,
.rh-step-list h3,
.rh-faq-list summary {
    color: #5d493d;
}

.rh-light-section,
.rh-faq-section,
.rh-cta-section {
    background: #fffdf9;
}

.rh-feature-card {
    background: #fffaf5;
    border-color: #eadcd1;
}

.rh-feature-card:hover {
    border-color: #d18a6c;
    box-shadow: 0 16px 35px rgba(126, 74, 50, .1);
}

.rh-feature-icon {
    color: #a84f35;
    background: #f8e5dc;
}

.rh-feature-card p,
.rh-step-list p,
.rh-faq-list p {
    color: #806f64;
}

.rh-steps-section {
    background: #f9f4ee;
}

.rh-step-list li,
.rh-faq-list details {
    border-bottom-color: #eaded4;
}

.rh-step-list li > span,
.rh-faq-list summary::after,
.rh-eyebrow {
    color: #b85b3f;
}

.rh-cta-card {
    background: linear-gradient(120deg, #f1d5c8, #f8eae1);
    box-shadow: 0 20px 48px rgba(126, 74, 50, .12);
}

.rh-cta-card h2 {
    color: #3d322b;
}

.rh-button-primary {
    color: #fffaf6;
    background: #b85b3f;
    border-color: #b85b3f;
    box-shadow: 0 14px 28px rgba(184, 91, 63, .2);
}

.rh-button-primary:hover {
    color: #fffdf9;
    background: #9f4932;
    border-color: #9f4932;
}

.rh-auto-run input {
    accent-color: #b85b3f;
}

.rh-workspace-footer {
    border-top-color: #eee2d8;
}

.rh-workspace-footer i,
.rh-page .mi-footer-privacy {
    color: #71856a;
}

.rh-page .mi-footer {
    color: #806f64;
    background: #f4ece3;
    border-top-color: #e6d7ca;
}

.rh-page .mi-footer-slogan,
.rh-page .mi-footer-description,
.rh-page .mi-footer-bottom {
    color: #806f64;
}

.rh-page .mi-footer-brand,
.rh-page .mi-footer-links a,
.rh-page .mi-footer-bottom a {
    color: #6e5547;
}

.rh-page .mi-footer-brand:hover,
.rh-page .mi-footer-links a:hover,
.rh-page .mi-footer-bottom a:hover {
    color: #a84f35;
}

/* 暖米白、陶土橙和鼠尾草绿主题，避免冷灰与蓝紫色带来的单调感。 */
.rh-page {
    color: #3d322b;
    background: #fbf8f4;
}

.rh-page .mi-header {
    color: #7e7066;
    background: #fffdf9;
    border-bottom-color: #e7dbd0;
    box-shadow: 0 8px 24px rgba(126, 74, 50, .07);
}

.rh-page .mi-brand,
.rh-page .mi-brand:hover,
.rh-page .mi-brand-name {
    color: #3d322b;
}

.rh-page .mi-brand-mark,
.rh-page .mi-footer-brand-mark {
    background: linear-gradient(135deg, #d88965, #b85b3f);
    box-shadow: 0 8px 20px rgba(184, 91, 63, .2);
}

.rh-page .mi-brand-note,
.rh-page .mi-nav-link,
.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn,
.rh-page .mi-mobile-link {
    color: #8b776a;
}

.rh-page .mi-nav-link:hover,
.rh-page .mi-nav-link.active,
.rh-page .mi-mobile-link:hover,
.rh-page .mi-mobile-link.active {
    color: #8f412c;
    background: #f8e9e1;
}

.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn {
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-page .mi-language-btn:hover,
.rh-page .mi-mobile-btn:hover {
    color: #8f412c;
    background: #f8e9e1;
    border-color: #c77b5d;
}

.rh-page .mi-mobile-menu {
    background: #fffdf9;
}

.rh-runner-section {
    color: #3d322b;
    background: #f6f0e9;
    padding-top: 36px;
}

.rh-runner-section .rh-section-heading h2,
.rh-section-heading h2 {
    color: #3d322b;
}

.rh-runner-section .rh-section-heading p:not(.rh-eyebrow),
.rh-section-heading p:not(.rh-eyebrow) {
    color: #7e7066;
}

.rh-eyebrow,
.rh-preview-bar i,
.rh-preview-empty i,
.rh-step-list li > span,
.rh-faq-list summary::after,
.rh-page .mi-footer-overline,
.rh-page .mi-footer-title {
    color: #b85b3f;
}

.rh-shortcut-note {
    color: #8b776a;
}

.rh-shortcut-note kbd {
    color: #8f412c;
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-workspace {
    background: #fffdf9;
    border-color: #dfcfc2;
    box-shadow: 0 20px 50px rgba(126, 74, 50, .12);
}

.rh-workspace-toolbar,
.rh-workspace-footer {
    color: #7e7066;
    background: #fffdf9;
}

.rh-workspace-toolbar {
    border-bottom-color: #eee2d8;
}

.rh-workspace-title {
    color: #3d322b;
}

.rh-online-dot {
    background: #71856a;
    box-shadow: 0 0 0 4px rgba(113, 133, 106, .18);
}

.rh-workspace-status,
.rh-auto-run,
.rh-workspace-footer,
#code-size,
.rh-editor-hint {
    color: #8b776a;
}

.rh-tool-button,
.rh-tool-button-run {
    color: #765f52;
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-tool-button:hover {
    color: #8f412c;
    background: #f8e9e1;
    border-color: #c77b5d;
}

.rh-tool-button-run {
    color: #fffaf6;
    background: #b85b3f;
    border-color: #b85b3f;
}

.rh-tool-button-run:hover {
    color: #fffdf9;
    background: #9f4932;
    border-color: #9f4932;
}

.rh-editor-column {
    background: #faf5ef;
    border-right-color: #eee2d8;
    border-bottom-color: #eee2d8;
}

.rh-editor-tabs {
    background: #fffdf9;
    border-bottom-color: #eee2d8;
}

.rh-editor-tab {
    color: #8b776a;
}

.rh-editor-tab:hover,
.rh-editor-tab.active {
    color: #8f412c;
    border-bottom-color: #b85b3f;
}

.rh-editor-tab i,
.rh-editor-tab[data-editor-tab="html"] i,
.rh-editor-tab[data-editor-tab="css"] i,
.rh-editor-tab[data-editor-tab="js"] i {
    color: #b85b3f;
}

.rh-code-editor {
    color: #493a31;
    background: #fcf8f3;
}

.rh-code-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(184, 91, 63, .55);
}

.rh-preview-column,
.rh-preview-frame-wrap,
#preview-frame {
    background: #fffdf9;
}

.rh-preview-bar {
    color: #7e7066;
    background: #faf5ef;
    border-bottom-color: #eee2d8;
}

.rh-preview-empty,
.rh-feature-card h3,
.rh-step-list h3,
.rh-faq-list summary {
    color: #5d493d;
}

.rh-light-section,
.rh-faq-section,
.rh-cta-section {
    background: #fffdf9;
}

.rh-feature-card {
    background: #fffaf5;
    border-color: #eadcd1;
}

.rh-feature-card:hover {
    border-color: #d18a6c;
    box-shadow: 0 16px 35px rgba(126, 74, 50, .1);
}

.rh-feature-icon {
    color: #a84f35;
    background: #f8e5dc;
}

.rh-feature-card p,
.rh-step-list p,
.rh-faq-list p {
    color: #806f64;
}

.rh-steps-section {
    background: #f9f4ee;
}

.rh-step-list li {
    border-bottom-color: #eaded4;
}

.rh-faq-list details {
    border-bottom-color: #eaded4;
}

.rh-faq-list summary::after {
    color: #b85b3f;
}

.rh-cta-card {
    background: linear-gradient(120deg, #f1d5c8, #f8eae1);
    box-shadow: 0 20px 48px rgba(126, 74, 50, .12);
}

.rh-cta-card h2 {
    color: #3d322b;
}

.rh-button-primary {
    color: #fffaf6;
    background: #b85b3f;
    border-color: #b85b3f;
    box-shadow: 0 14px 28px rgba(184, 91, 63, .2);
}

.rh-button-primary:hover {
    color: #fffdf9;
    background: #9f4932;
    border-color: #9f4932;
}

.rh-button-ghost {
    color: #8f412c;
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-button-ghost:hover {
    color: #7c3625;
    background: #f8e9e1;
    border-color: #c77b5d;
}

.rh-auto-run input {
    accent-color: #b85b3f;
}

.rh-workspace-footer {
    border-top-color: #eee2d8;
}

.rh-workspace-footer i,
.rh-page .mi-footer-privacy {
    color: #71856a;
}

.rh-page .mi-footer {
    color: #806f64;
    background: #f4ece3;
    border-top-color: #e6d7ca;
}

.rh-page .mi-footer-slogan,
.rh-page .mi-footer-description,
.rh-page .mi-footer-bottom {
    color: #806f64;
}

.rh-page .mi-footer-brand,
.rh-page .mi-footer-links a,
.rh-page .mi-footer-bottom a {
    color: #6e5547;
}

.rh-page .mi-footer-brand:hover,
.rh-page .mi-footer-links a:hover,
.rh-page .mi-footer-bottom a:hover {
    color: #a84f35;
}

/* 更浅的灰色背景层次，避免页面出现明显灰底。 */
.rh-page,
.rh-runner-section,
.rh-steps-section {
    background: #fafafa;
}

.rh-editor-column,
.rh-code-editor,
.rh-feature-card {
    background: #fff;
}

.rh-preview-bar {
    background: #fcfcfc;
}

.rh-cta-card {
    background: linear-gradient(120deg, #fafafa, #f4f4f5);
}

.rh-page .mi-footer-brand:hover,
.rh-page .mi-footer-links a:hover,
.rh-page .mi-footer-bottom a:hover {
    color: #d4d4d8;
}

/* 浅色界面覆盖，取消深色背景并保持 Zinc-400 视觉体系。 */
.rh-page .mi-header {
    color: #71717a;
    background: #fff;
    border-bottom-color: #e4e4e7;
    box-shadow: 0 8px 24px rgba(39, 39, 42, .06);
}

.rh-page .mi-brand,
.rh-page .mi-brand:hover,
.rh-page .mi-brand-name {
    color: #27272a;
}

.rh-page .mi-brand-mark {
    background: linear-gradient(135deg, #a1a1aa, #71717a);
    box-shadow: 0 8px 20px rgba(161, 161, 170, .25);
}

.rh-page .mi-brand-note,
.rh-page .mi-nav-link,
.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn,
.rh-page .mi-mobile-link {
    color: #71717a;
}

.rh-page .mi-nav-link:hover,
.rh-page .mi-nav-link.active,
.rh-page .mi-mobile-link:hover,
.rh-page .mi-mobile-link.active {
    color: #27272a;
    background: #f4f4f5;
}

.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn {
    background: #fff;
    border-color: #d4d4d8;
}

.rh-page .mi-language-btn:hover,
.rh-page .mi-mobile-btn:hover {
    color: #27272a;
    background: #f4f4f5;
    border-color: #a1a1aa;
}

.rh-page .mi-mobile-menu {
    background: #fff;
}

.rh-runner-section {
    color: #27272a;
    background: #f4f4f5;
}

.rh-runner-section .rh-section-heading h2,
.rh-section-heading h2 {
    color: #27272a;
}

.rh-runner-section .rh-section-heading p:not(.rh-eyebrow),
.rh-section-heading p:not(.rh-eyebrow) {
    color: #71717a;
}

.rh-shortcut-note {
    color: #71717a;
}

.rh-shortcut-note kbd {
    color: #52525b;
    background: #fff;
    border-color: #d4d4d8;
}

.rh-workspace {
    background: #fff;
    border-color: #d4d4d8;
    box-shadow: 0 20px 50px rgba(39, 39, 42, .1);
}

.rh-workspace-toolbar,
.rh-workspace-footer {
    color: #71717a;
    background: #fff;
}

.rh-workspace-toolbar {
    border-bottom: 1px solid #e4e4e7;
}

.rh-workspace-title {
    color: #27272a;
}

.rh-online-dot {
    background: #a1a1aa;
    box-shadow: 0 0 0 4px rgba(161, 161, 170, .18);
}

.rh-workspace-status,
.rh-auto-run,
.rh-workspace-footer,
#code-size {
    color: #71717a;
}

.rh-tool-button,
.rh-tool-button-run {
    color: #52525b;
    background: #fff;
    border-color: #d4d4d8;
}

.rh-tool-button:hover {
    color: #27272a;
    background: #f4f4f5;
    border-color: #a1a1aa;
}

.rh-tool-button-run {
    color: #27272a;
    background: #a1a1aa;
    border-color: #a1a1aa;
}

.rh-tool-button-run:hover {
    color: #18181b;
    background: #d4d4d8;
    border-color: #a1a1aa;
}

.rh-editor-column {
    background: #fafafa;
    border-right-color: #e4e4e7;
    border-bottom-color: #e4e4e7;
}

.rh-editor-tabs {
    background: #fff;
    border-bottom-color: #e4e4e7;
}

.rh-editor-tab {
    color: #71717a;
}

.rh-editor-tab:hover,
.rh-editor-tab.active {
    color: #27272a;
    border-bottom-color: #a1a1aa;
}

.rh-editor-hint {
    color: #a1a1aa;
}

.rh-code-editor {
    color: #3f3f46;
    background: #fafafa;
}

.rh-code-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(161, 161, 170, .75);
}

.rh-preview-column,
.rh-preview-frame-wrap,
#preview-frame {
    background: #fff;
}

.rh-preview-bar {
    color: #71717a;
    background: #fafafa;
    border-bottom-color: #e4e4e7;
}

.rh-workspace-footer {
    border-top-color: #e4e4e7;
}

.rh-workspace-footer i {
    color: #a1a1aa;
}

.rh-cta-section {
    background: #fff;
}

.rh-cta-card {
    background: linear-gradient(120deg, #f4f4f5, #e4e4e7);
    box-shadow: 0 20px 48px rgba(39, 39, 42, .1);
}

.rh-cta-card h2 {
    color: #27272a;
}

.rh-page .mi-footer {
    color: #71717a;
    background: #fafafa;
    border-top-color: #e4e4e7;
}

.rh-page .mi-footer-slogan,
.rh-page .mi-footer-description,
.rh-page .mi-footer-bottom,
.rh-page .mi-footer-privacy {
    color: #71717a;
}

.rh-page .mi-footer-brand,
.rh-page .mi-footer-links a,
.rh-page .mi-footer-bottom a {
    color: #52525b;
}

.rh-page .mi-footer-brand:hover,
.rh-page .mi-footer-links a:hover,
.rh-page .mi-footer-bottom a:hover {
    color: #27272a;
}

.rh-page .mi-footer-brand-mark {
    background: #71717a; /* 暖色主题末尾锚点 */
}

/* 暖色主题最终层，覆盖历史样式并保持首页明亮、柔和。 */
.rh-page {
    color: #3d322b;
    background: #fbf8f4;
}

.rh-page .mi-header {
    color: #7e7066;
    background: #fffdf9;
    border-bottom-color: #e7dbd0;
    box-shadow: 0 8px 24px rgba(126, 74, 50, .07);
}

.rh-page .mi-brand,
.rh-page .mi-brand:hover,
.rh-page .mi-brand-name {
    color: #3d322b;
}

.rh-page .mi-brand-mark,
.rh-page .mi-footer-brand-mark {
    color: #fffaf6;
    background: linear-gradient(135deg, #d88965, #b85b3f);
    box-shadow: 0 8px 20px rgba(184, 91, 63, .2);
}

.rh-page .mi-brand-note,
.rh-page .mi-nav-link,
.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn,
.rh-page .mi-mobile-link {
    color: #8b776a;
}

.rh-page .mi-nav-link:hover,
.rh-page .mi-nav-link.active,
.rh-page .mi-mobile-link:hover,
.rh-page .mi-mobile-link.active {
    color: #8f412c;
    background: #f8e9e1;
}

.rh-page .mi-language-btn,
.rh-page .mi-mobile-btn {
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-page .mi-language-btn:hover,
.rh-page .mi-mobile-btn:hover {
    color: #8f412c;
    background: #f8e9e1;
    border-color: #c77b5d;
}

.rh-page .mi-mobile-menu {
    background: #fffdf9;
}

.rh-runner-section {
    color: #3d322b;
    background: #f6f0e9;
}

.rh-section-heading h2,
.rh-runner-section .rh-section-heading h2,
.rh-cta-card h2 {
    color: #3d322b;
}

.rh-section-heading p:not(.rh-eyebrow),
.rh-runner-section .rh-section-heading p:not(.rh-eyebrow) {
    color: #7e7066;
}

.rh-shortcut-note {
    color: #8b776a;
}

.rh-shortcut-note kbd {
    color: #8f412c;
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-workspace {
    background: #fffdf9;
    border-color: #dfcfc2;
    box-shadow: 0 20px 50px rgba(126, 74, 50, .12);
}

.rh-workspace-toolbar,
.rh-workspace-footer {
    color: #7e7066;
    background: #fffdf9;
}

.rh-workspace-toolbar {
    border-bottom-color: #eee2d8;
}

.rh-workspace-title {
    color: #3d322b;
}

.rh-online-dot {
    background: #71856a;
    box-shadow: 0 0 0 4px rgba(113, 133, 106, .18);
}

.rh-workspace-status,
.rh-auto-run,
.rh-workspace-footer,
#code-size,
.rh-editor-hint {
    color: #8b776a;
}

.rh-tool-button,
.rh-tool-button-run {
    color: #765f52;
    background: #fffdf9;
    border-color: #dfcfc2;
}

.rh-tool-button:hover {
    color: #8f412c;
    background: #f8e9e1;
    border-color: #c77b5d;
}

.rh-tool-button-run {
    color: #fffaf6;
    background: #b85b3f;
    border-color: #b85b3f;
}

.rh-tool-button-run:hover {
    color: #fffdf9;
    background: #9f4932;
    border-color: #9f4932;
}

.rh-editor-column {
    background: #faf5ef;
    border-right-color: #eee2d8;
    border-bottom-color: #eee2d8;
}

.rh-editor-tabs {
    background: #fffdf9;
    border-bottom-color: #eee2d8;
}

.rh-editor-tab {
    color: #8b776a;
}

.rh-editor-tab:hover,
.rh-editor-tab.active {
    color: #8f412c;
    border-bottom-color: #b85b3f;
}

.rh-editor-tab i,
.rh-editor-tab[data-editor-tab="html"] i,
.rh-editor-tab[data-editor-tab="css"] i,
.rh-editor-tab[data-editor-tab="js"] i {
    color: #b85b3f;
}

.rh-code-editor {
    color: #493a31;
    background: #fcf8f3;
}

.rh-code-editor:focus {
    box-shadow: inset 0 0 0 1px rgba(184, 91, 63, .55);
}

.rh-preview-column,
.rh-preview-frame-wrap,
#preview-frame {
    background: #fffdf9;
}

.rh-preview-bar {
    color: #7e7066;
    background: #faf5ef;
    border-bottom-color: #eee2d8;
}

.rh-preview-empty,
.rh-feature-card h3,
.rh-step-list h3,
.rh-faq-list summary {
    color: #5d493d;
}

.rh-light-section,
.rh-faq-section,
.rh-cta-section {
    background: #fffdf9;
}

.rh-feature-card {
    background: #fffaf5;
    border-color: #eadcd1;
}

.rh-feature-card:hover {
    border-color: #d18a6c;
    box-shadow: 0 16px 35px rgba(126, 74, 50, .1);
}

.rh-feature-icon {
    color: #a84f35;
    background: #f8e5dc;
}

.rh-feature-card p,
.rh-step-list p,
.rh-faq-list p {
    color: #806f64;
}

.rh-steps-section {
    background: #f9f4ee;
}

.rh-step-list li,
.rh-faq-list details {
    border-bottom-color: #eaded4;
}

.rh-step-list li > span,
.rh-faq-list summary::after,
.rh-eyebrow {
    color: #b85b3f;
}

.rh-cta-card {
    background: linear-gradient(120deg, #f1d5c8, #f8eae1);
    box-shadow: 0 20px 48px rgba(126, 74, 50, .12);
}

.rh-button-primary {
    color: #fffaf6;
    background: #b85b3f;
    border-color: #b85b3f;
    box-shadow: 0 14px 28px rgba(184, 91, 63, .2);
}

.rh-button-primary:hover {
    color: #fffdf9;
    background: #9f4932;
    border-color: #9f4932;
}

.rh-auto-run input {
    accent-color: #b85b3f;
}

.rh-workspace-footer {
    border-top-color: #eee2d8;
}

.rh-workspace-footer i,
.rh-page .mi-footer-privacy {
    color: #71856a;
}

.rh-page .mi-footer {
    color: #806f64;
    background: #f4ece3;
    border-top-color: #e6d7ca;
}

.rh-page .mi-footer-slogan,
.rh-page .mi-footer-description,
.rh-page .mi-footer-bottom {
    color: #806f64;
}

.rh-page .mi-footer-brand,
.rh-page .mi-footer-links a,
.rh-page .mi-footer-bottom a {
    color: #6e5547;
}

.rh-page .mi-footer-brand:hover,
.rh-page .mi-footer-links a:hover,
.rh-page .mi-footer-bottom a:hover {
    color: #a84f35;
}