.cu-gfx { margin: 0 0 0.75rem; }
.cu-gfx__stage {
    background: #fcf6ea;
    border-radius: 12px;
    padding: 0.75rem;
}
.cu-gfx__narration {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}
.cu-ico { color: #0f766e; flex: none; display: block; }
.cu-gfx-branches,
.cu-gfx-track {
    display: grid;
    gap: var(--cu-space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.cu-gfx-col,
.cu-gfx-track > li,
.cu-gfx-fork > div,
.cu-gfx-form,
.cu-gfx-clock {
    background: linear-gradient(#ffffff, #f3fbf9);
    border: 1px solid rgba(15, 118, 110, 0.28);
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.12);
    padding: 0.65rem 0.75rem;
    font-size: 12px;
    line-height: 1.35;
}
.cu-gfx-col.is-on,
.cu-gfx-track > li.is-on,
.cu-gfx-fork > div.is-on,
.cu-gfx-form .is-on,
.cu-gfx-form.is-on {
    outline: 6px solid rgba(13, 148, 136, 0.15);
}
.cu-gfx-col__band {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}
.cu-gfx-col.is-on .cu-gfx-col__band {
    background: #0f766e;
    color: #fff;
    margin: -0.65rem -0.75rem 0.55rem;
    padding: 0.65rem 0.75rem;
    border-radius: 12px 12px 0 0;
}
.cu-gfx-col.is-on .cu-ico { color: #fff; }
.cu-gfx-col h3,
.cu-gfx-list-title {
    margin: 0;
    font-size: 15px;
    font-weight: 650;
    font-family: "IBM Plex Sans", "Helvetica Neue", sans-serif;
}
.cu-gfx-col p,
.cu-gfx-col li,
.cu-gfx-track span,
.cu-gfx-fork span,
.cu-gfx-checks,
.cu-gfx-note,
.cu-gfx-source,
.cu-gfx-form p {
    font-size: 12px;
    margin: 0.15rem 0 0;
}
.cu-gfx-col ul { margin: 0.45rem 0 0; padding-left: 1.1rem; }
.cu-gfx-track > li > div,
.cu-demo-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    min-width: 0;
}
.cu-gfx-track > li > div strong,
.cu-gfx-track > li > div span,
.cu-demo-copy strong,
.cu-demo-copy span {
    display: block;
    margin: 0;
}
.cu-gfx-fork > div {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}
.cu-gfx-fork > div > strong {
    flex: 0 0 auto;
}
.cu-gfx-fork > div > span {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: break-word;
}
.cu-gfx-col,
.cu-gfx-col__band > div {
    min-width: 0;
}
.cu-gfx-col h3,
.cu-gfx-col p,
.cu-gfx-col li {
    overflow-wrap: break-word;
}
@media (max-width: 799px) {
    .cu-gfx-fork > div {
        flex-direction: column;
    }
}
.cu-gfx-fork {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.cu-gfx-fork:has(> :nth-child(3)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 767px) {
    .cu-gfx-fork:has(> :nth-child(3)) {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 390px) {
    .cu-demo .cu-gfx-fork {
        grid-template-columns: 1fr;
    }
}
.cu-gfx-list-title { margin: 0.85rem 0 0.35rem; }
.cu-gfx-checks { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.cu-gfx-checks li { margin: 0 0 0.4rem; }
.cu-dial{position:relative;width:11.5rem;height:11.5rem;margin:.25rem auto .75rem;border-radius:50%;border:2px solid #0f766e;background:conic-gradient(rgba(28,25,23,.14) 0deg 180deg,#fff 180deg 300deg,rgba(28,25,23,.14) 300deg 360deg)}.cu-dial__face{position:absolute;inset:2.2rem;display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:650}.cu-dial__mark{position:absolute;left:50%;top:50%;width:2px;height:4.4rem;margin-left:-1px;margin-top:-4.4rem;background:#0f766e;transform-origin:bottom center}.cu-dial__mark i{position:absolute;top:-1.15rem;left:50%;transform:translateX(-50%);font-style:normal;font-size:12px;white-space:nowrap}.cu-dial__mark--out{background:#1c1917}
.cu-gfx-clock {
    display: grid;
    gap: 0.35rem;
}
.cu-gfx-clock .is-on { font-weight: 700; color: #0f766e; }
.cu-gfx-source { margin: 0.45rem 0 0; color: #44403c; }
html[data-theme="dark"] .cu-learn-stage,
.cu-shell[data-theme="dark"] .cu-learn-stage,
html[data-theme="dark"] .cu-gfx,
.cu-shell[data-theme="dark"] .cu-gfx,
html[data-theme="dark"] .cu-gfx__stage,
.cu-shell[data-theme="dark"] .cu-gfx__stage {
    background: #0f1c1a;
    color: #f5f0e6;
}
html[data-theme="dark"] .cu-gfx-col,
.cu-shell[data-theme="dark"] .cu-gfx-col,
html[data-theme="dark"] .cu-gfx-track > li,
.cu-shell[data-theme="dark"] .cu-gfx-track > li,
html[data-theme="dark"] .cu-gfx-fork > div,
.cu-shell[data-theme="dark"] .cu-gfx-fork > div,
html[data-theme="dark"] .cu-gfx-form,
.cu-shell[data-theme="dark"] .cu-gfx-form,
html[data-theme="dark"] .cu-gfx-clock,
.cu-shell[data-theme="dark"] .cu-gfx-clock {
    background: linear-gradient(#16302c, #11231f);
    border-color: rgba(94, 234, 212, 0.28);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45);
    color: #f5f0e6;
}
html[data-theme="dark"] .cu-ico,
.cu-shell[data-theme="dark"] .cu-ico { color: #5eead4; }
html[data-theme="dark"] .cu-gfx-col.is-on .cu-ico,
.cu-shell[data-theme="dark"] .cu-gfx-col.is-on .cu-ico { color: #fff; }
html[data-theme="dark"] .cu-gfx-clock .is-on,
.cu-shell[data-theme="dark"] .cu-gfx-clock .is-on { color: #99f6e4; }
html[data-theme="dark"] .cu-gfx-source,
.cu-shell[data-theme="dark"] .cu-gfx-source { color: #f5f0e6; }
.cu-strategy-rail {
    display: grid;
    gap: 0.45rem;
    margin: 0 0 0.75rem;
}
.cu-strategy-stop {
    display: flex;
    gap: 0.55rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border-radius: 12px;
    border: 1px dashed rgba(15, 118, 110, 0.55);
    background: #fffdf8;
    font-size: 12px;
}
.cu-strategy-stop.is-live { border-style: solid; background: #0f766e; color: #fff; }
.cu-strategy-stop.is-live .cu-ico { color: #fff; }
.cu-strategy-stop.is-now { outline: 6px solid rgba(13, 148, 136, 0.18); }
.cu-strategy-stop strong { display: block; font-size: 15px; }
html[data-theme="dark"] .cu-strategy-stop,
.cu-shell[data-theme="dark"] .cu-strategy-stop {
    background: #11231f;
    color: #f5f0e6;
}
.cu-shell[data-theme="dark"] .cu-strategy-stop.is-live { background: #0f766e; color: #fff; }
.cu-gfx,
.cu-gfx-branches,
.cu-gfx-fork,
.cu-gfx-track {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/* .cu-learn-stage p is 68ch. That left a blank band beside the source on a wide preview. */
.cu-learn-stage .cu-gfx-source,
.cu-learn-stage .cu-gfx-col p,
.cu-learn-stage .cu-gfx-col li {
    max-width: none;
}

@media (min-width: 800px) {
    .cu-gfx-branches { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .cu-gfx-branches,
    .cu-gfx-fork {
        width: 100%;
    }

    .cu-civic-diagram__preview .cu-gfx-branches,
    .cu-civic-diagram__preview .cu-gfx-fork {
        min-width: 0;
    }
}
.cu-gfx-svg {
    display: block;
    width: 100%;
    max-width: min(40rem, 46vh);
    max-height: 46vh;
    height: auto;
    margin-inline: auto;
    color: #1c1917;
}

html[data-theme="dark"] .cu-gfx__stage .cu-gfx-svg,
.cu-shell[data-theme="dark"] .cu-gfx__stage .cu-gfx-svg {
    color: #f5f0e6;
}

html[data-theme="dark"] .cu-gfx-svg text,
.cu-shell[data-theme="dark"] .cu-gfx-svg text {
    fill: #f5f0e6;
}

.cu-learn-you-dig {
    padding-left: 0.75rem;
    border-left: 4px solid #0d9488;
}

@media (prefers-reduced-motion: no-preference) {
    .cu-gfx-gap {
        stroke-dasharray: 8 6;
        animation: cu-gfx-dash 1.6s linear infinite;
    }
}

@keyframes cu-gfx-dash {
    to { stroke-dashoffset: -28; }
}

@media (prefers-reduced-motion: reduce) {
    .cu-gfx-col,
    .cu-gfx-track > li,
    .cu-gfx-svg,
    .cu-gfx-svg * {
        transition: none;
        animation: none;
    }
}