.c4c-observation-diagram { width:100%; max-width:600px; margin-inline:auto; color:#0400b4; line-height:1.5; }
.c4c-observation-diagram__screen { display:block; width:80%; height:auto; margin-inline:auto; }
.c4c-observation-diagram__arrow { display:block; width:7%; height:auto; margin:-1% auto 0; }
.c4c-observation-diagram__label { width:82%; margin:0 auto 4%; padding:2.5% 1%; border:1px solid currentColor; border-radius:10px; background:var(--c4c-paper,#f8f7f0); text-align:center; font-size:clamp(12px,1.2vw,19px); font-weight:700; }
.c4c-observation-diagram__vessels { display:block; width:100%; height:auto; }
@media(min-width:768px) {
    /* Fit the complete diagram below the fixed header, including short windows. */
    #high-accuracy .c4c-feature-visual {
        padding-top:calc(var(--c4c-header-height) + 24px);
        padding-bottom:24px;
    }
    #high-accuracy .c4c-observation-diagram {
        max-width:min(100%,calc((100dvh - var(--c4c-header-height) - 80px) * .8));
    }
}
/* Wide sticky sections need the same balance even in a short browser window. */
@media(min-width:1401px), (min-width:768px) and (min-height:721px) {
    #high-accuracy .c4c-feature-visual { padding-block:24px; }
    #high-accuracy .c4c-observation-diagram { transform:translateY(-20px); }
}
@media(max-width:767px) { .c4c-observation-diagram__label { font-size:clamp(11px,3.3vw,16px); } }