:root{color-scheme:light dark;background:#fff}
:root[data-mode=dark]{background:#000}
html,body{padding:0;margin:0;overflow:hidden}
main{position:fixed;top:env(safe-area-inset-top);right:env(safe-area-inset-right);bottom:env(safe-area-inset-bottom);left:env(safe-area-inset-left);container-type:size}
iframe{border:0;position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%);background:inherit}
html[data-side] iframe{width:100cqh;height:100cqw;transform:translate(-50%,-50%) rotate(var(--turn))}
html[data-side=left]{--turn:-90deg}
html[data-side=right]{--turn:90deg}

:root[data-mode=warm]{background:#faf7f2}
:root[data-mode=graphite]{background:#242424;color-scheme:dark}