body {
    margin: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#container {
    display: flex;
    width: 1152px;
    height: 648px;
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    overflow: hidden;
    resize: both;
    align-items: center;
    justify-content: center;
    background: black;
    box-sizing: border-box;

    container: bars / size;
}

#screen {
    display: block;
    /**
     * Hi, Debugging Jackson here. If you omit the extra parentheses around the var call,
     * the parser interprets it as a composable math expression, not as a single variable.
     * As a result, instead of e.g., 100cqw / (16 / 9), you'll get (100cqw / 16) / 9.
     * That's... interesting.
     */
    width: min(calc(100cqh * (var(--aspect-ratio))), 100cqw);
    height: min(calc(100cqw / (var(--aspect-ratio))), 100cqh);
    aspect-ratio: var(--aspect-ratio);
    overflow: hidden;
    position: relative;
    container: screen / size;

    --aspect-ratio: 16 / 9;

    background: url('./background.jpg');
    background-size: cover;
    background-position: center;
}

#compatibility {
    display: block;
    font-size: large;
    text-align: center;
    color: black;
    background: white;
    position: absolute;
    top: 8px;
    left: 8px;
    box-sizing: border-box;
    inline-size: calc(100% - 16px);
    padding: 8px;
    z-index: 1;
}

#bug {
    position: absolute;
    transform-origin: bottom right;
    transform: scale(var(--scale-factor));
    bottom: 8cqmin;
    right: 8cqmin;

    /**
     * Sigh. This doesn't work on Safari at all. And by "doesn't work at all", I mean that
     * on initial load, when Chrome computes the --scale-factor as 0.99999999999995, Safari
     * computes it as -0.0021056257305422077, which just makes the thing completely invisible.
     * Good. Great. Their parsing trees for the value are entirely different, as well:
     * 
     * Chrome: ["calc(tan(atan2(100cqw, 1px)) / 1152)"]
     * Safari: ["calc(tan(atan2(100cqw, 1px", ")", ") / 1152", ")"]
     * Firefox: No idea because it doesn't support Typed OM L1 lmao
     *
     * Despite me not being able to inspect its parsing, Firefox does actually render this
     * correctly. I'm not going to try to monkey patch something together specifically for Safari.
     * That would most likely involve using getBoundingClientRect, which I specifically wanted to
     * avoid on this project. Since this is, by all accounts (i.e., mine) a parser issue, not an
     * interop issue, I can't even patch around it using @supports; I'd have to check the user
     * agent or vendor programmatically. So, I guess either you use Chromium or Firefox or you're
     * not going to see anything. Oh well!
     */
    --scale-factor: calc(tan(atan2(100cqw, 1px)) / 1152);
}