@property --w_raw {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vw;
}

@property --h_raw {
    syntax: '<length>';
    inherits: true;
    initial-value: 100vh;
}

:root {
    --w: tan(atan2(var(--w_raw), 1px));
    --h: tan(atan2(var(--h_raw), 1px));
}

.indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: system-ui, sans-serif;
}

.ratio-output {
  text-align: center;
  font-size: 3rem;
  font-weight: 900;
}

.indicator::before {
    content: counter(w) 'x'counter(h);
    counter-reset: h var(--h) w var(--w);
    font-size: 1rem;
    font-weight: 700;
}