@property --_sumbux {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --_sumbuy {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

@property --lebar {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

@property --tinggi {
    syntax: "<integer>";
    inherits: true;
    initial-value: 0;
}

.divratio {
    overflow: auto;

    /* position: relative; */
    --lebar: calc(1/(1 - var(--_sumbux)));
    --tinggi: calc(1/(1 - var(--_sumbuy)));
    timeline-scope: --cx,--cy;
    animation: x linear,y linear;
    animation-timeline: --cx,--cy;
    animation-range: entry 100% exit 100%;
}

.divratio:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    aspect-ratio: 1;
    view-timeline: --cx inline,--cy block;
}

@keyframes x {
    to {
        --_sumbux: 1;
    }
}

@keyframes y {
    to {
        --_sumbuy: 1;
    }
}

.divratio:after {
    content: " ";
    counter-reset: w var(--lebar) h var(--tinggi);
    position: absolute;
    left: 0;
    top: 0;
    background: transparent;
    color: transparent;
    font-size: 23px;
    font-weight: bold;
    padding: .3em;
}

.divframe {
    width: 100%;
    height: calc(0.15% * var(--lebar));
}