@property --vw { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --vh { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --em { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --ch { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --ex { syntax: "<length>"; initial-value: 0px; inherits: false; }
@property --ic { syntax: "<length>"; initial-value: 0px; inherits: false; }

:root {
    color-scheme: light dark;

    --vw: 100vw;
    --vh: 100vh;
    --ic: 1lh;
    --em: 1em;
    --ch: 1ch;
    --ex: 1ex;

    --width: calc(10000 * tan(atan2(var(--vw), 10000px)));
    --height: calc(10000 * tan(atan2(var(--vh), 10000px)));
    --font: calc(10000 * tan(atan2(var(--em), 10000px)));
    --char: calc(10000 * tan(atan2(var(--ch), 10000px)));
    --x: calc(10000 * tan(atan2(var(--ex), 10000px)));
    --i: calc(10000 * tan(atan2(var(--ic), 10000px)));

    --hyp: calc(hypot(var(--height), var(--width)));
    --hyp-angle: calc(atan(var(--height) / var(--width)));

    --vdiff: calc(sqrt(pow(var(--width) - var(--height), 2)));

    --w: 1;
}

body {
    margin: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

ul {
    position: fixed; top: 0; left: 0;
}

#width {
    counter-reset: width var(--width);
    &::after {content: "Width: " counter(width);}
}

#height {
    counter-reset: height var(--height);
    &::after {content: "Height: " counter(height);}
}

#font {
    counter-reset: font var(--font);
    &::after {content: "Font: " counter(font);}
}

#character {
    counter-reset: char var(--char);
    &::after {content: "Character: " counter(char);}
}

#x {
    counter-reset: ex var(--x);
    &::after {content: "x: " counter(ex);}
}

#diff {
    counter-reset: diff var(--vdiff);
    &::after {content: "difference: " counter(diff);}
}

#ic {
    counter-reset: ic var(--i);
    &::after {content: "ic: " counter(ic);}
}

#wacky {
    counter-reset: w var(--w);
    &::after {content: "wacky num: " counter(w);}
}

#hypot {
    counter-reset: hyp var(--hyp);
    &::after {content: "hypotenuse: " counter(hyp);}
}

#hyp {
    transform: rotate(calc(var(--hyp-angle) * -1));
    counter-reset: hyp var(--hyp);
    &::after {content: counter(hyp);}
}