/* 问卷专题复用首页排版，单独调整统计结果动效。 */
.questionnaire-page .home-hero-title {
    font-size: clamp(2.1rem, 4.1vw, 3.45rem);
}

.questionnaire-page .demo-file {
    flex-wrap: wrap;
    white-space: normal;
    overflow-wrap: anywhere;
}

.questionnaire-hero-result {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 218px;
    align-content: center;
    align-items: center;
    gap: 14px;
    width: 660px;
    height: 452px;
    transform: translate(-50%, -50%) scale(var(--hh-demo-scale));
}

.questionnaire-hero-result .hero-report {
    position: relative;
    inset: auto;
    width: auto;
    height: auto;
    padding: 20px;
}

.questionnaire-report-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 14px 0 10px;
}

.questionnaire-report-metrics div {
    display: grid;
    gap: 4px;
    padding: 8px;
    color: var(--hh-demo-muted);
    background: var(--hh-demo-soft);
    border: 1px solid var(--hh-demo-line);
    border-radius: var(--statau-radius-control);
    font-size: 12px;
}

.questionnaire-report-metrics strong {
    color: var(--hh-brand);
    font-size: 21px;
    font-variant-numeric: tabular-nums;
}

.questionnaire-hero-side {
    display: grid;
    gap: 14px;
}

.questionnaire-hero-result .hero-float {
    position: relative;
    min-width: 0;
}

.questionnaire-loading-card {
    --tilt: 2deg;
}

.questionnaire-loading-card .hero-bar {
    grid-template-columns: 25px minmax(0, 1fr) 42px;
}

.questionnaire-export-card {
    --tilt: -2deg;
    display: flex;
    align-items: center;
    gap: 12px;
}

.questionnaire-word-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: var(--statau-radius-control);
    color: var(--hh-brand);
    background: var(--hh-demo-tint);
    font-size: 21px;
}

.home-hero-section.is-showcase .questionnaire-loading-card {
    animation-delay: .45s;
}

.home-hero-section.is-showcase .questionnaire-export-card {
    animation-delay: .72s;
}

#questionnaire-example {
    scroll-margin-top: calc(var(--statau-navbar-offset) + 12px);
}

.questionnaire-page .scenario-img img {
    object-position: center 35%;
}

@media (max-width: 374px) {
    .questionnaire-page .home-hero-demo {
        --hh-demo-scale: .44;
    }
}

@media (prefers-reduced-motion: reduce) {
    .questionnaire-hero-result :is(.hero-report, .hero-float, .hero-ttable tbody tr) {
        opacity: 1;
        transform: none;
    }

    .questionnaire-hero-result::before,
    .questionnaire-hero-result .hero-report::after {
        animation: none !important;
    }
}