.portrait-frame-host{--frame-w:393;--frame-h:880;--frame-scale:1;--frame-bezel:6px;--frame-margin:24px;padding:calc(var(--frame-bezel) + var(--frame-margin));background:#d7d5db;place-items:center;display:grid;position:fixed;inset:0}.portrait-frame-slot{width:calc(var(--frame-w) * var(--frame-scale) * 1px);height:calc(var(--frame-h) * var(--frame-scale) * 1px)}.portrait-frame{width:calc(var(--frame-w) * 1px);height:calc(var(--frame-h) * 1px);transform-origin:0 0;scale:var(--frame-scale);box-shadow:0 0 0 var(--frame-bezel) #1b1c21, 0 0 0 calc(var(--frame-bezel) + 1px) #45464f, 0 30px 60px -12px #00000073;background:#fff;border-radius:32px;overflow:hidden}.portrait-frame-screen{background:#fff;border:0;width:100%;height:100%;display:block}@media (prefers-color-scheme:dark){.portrait-frame-host{background:#0b0c10}.portrait-frame{box-shadow:0 0 0 var(--frame-bezel) #26272e, 0 0 0 calc(var(--frame-bezel) + 1px) #3d3e47, 0 30px 60px -12px #000000b3;background:#16171d}.portrait-frame-screen{background:#16171d}}@media (orientation:portrait){.portrait-frame-host{padding:0}.portrait-frame-slot,.portrait-frame{width:100%;height:100%}.portrait-frame{box-shadow:none;border-radius:0;scale:none}}