/* Physical viewport only here. Other responsive styles use this named frame. */
#app-viewport{container-type:size;container-name:app-viewport;width:100%;height:100dvh;margin-inline:auto;position:relative}
#app{min-height:100%;width:100%}
html[data-screen-orientation=portrait] #app-viewport{width:min(100%,480px);height:max(100dvh,760px);box-shadow:0 0 60px #0006}
/* Top-layer dialogs must fit the visible browser even when the portrait frame scrolls. */
#app-viewport :is(.modal,.release-dialog,.public-effect){max-height:calc(100dvh - 24px)}
#app-viewport .inspector-layer{max-height:100dvh;height:100dvh}
#app-viewport .inspector-layer .card-inspector{width:min(var(--inspector-max,720px),calc(100 * var(--ui-vw,1vw) - 24px),100%)}
@container app-viewport (orientation:landscape) and (max-height:560px){.inspector-layer .card-inspector{--inspector-max:900px}}