/* This is the logical viewport used by every responsive component. */
:root{--app-width:100vw;--app-height:100dvh;--app-left:0px;--app-top:0px;--app-angle:0deg}
/* A normal page must never inherit a rotated workspace from a restored session. */
:root:not([data-presentation=fullscreen]){--app-width:var(--viewport-width,100vw)!important;--app-height:var(--viewport-height,100dvh)!important;--app-left:var(--viewport-left,0px)!important;--app-top:var(--viewport-top,0px)!important;--app-angle:0deg!important}
#viewport-measure{position:fixed;inset:0 auto auto 0;width:100vw;height:100lvh;visibility:hidden;pointer-events:none;contain:strict}
.landscape-viewport{position:fixed;left:var(--app-left);top:var(--app-top);width:var(--app-width);height:var(--app-height);transform:none;container:atelier-viewport / size;overflow:hidden}
.app-frame{width:100%;height:100%;overflow:hidden}
.atelier{height:calc(100% - var(--header-height))}
.toast{position:absolute;max-width:calc(100% - 40px)}
/* Modal dialogs follow the same available viewport as the product. */
.saved-dialog{position:fixed;inset:auto;left:calc(var(--app-left) + var(--app-width)/2);top:calc(var(--app-top) + var(--app-height)/2);margin:0;max-width:calc(var(--app-width) - 32px);max-height:calc(var(--app-height) - 32px);transform:translate(-50%,-50%)}
@container atelier-viewport (max-height:600px) and (orientation:landscape){
  .saved-dialog{width:min(720px,calc(var(--app-width) - 32px));padding:18px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;text-align:left}
  .saved-dialog:not([open]){display:none}
  .saved-dialog>.eyebrow,.saved-dialog>h2,.saved-dialog>.dialog-intro,.saved-description,.dialog-actions{grid-column:2}
  .saved-dialog>.eyebrow{padding-right:24px;font-size:8px}
  .saved-dialog h2{font-size:25px;margin-top:6px}
  .dialog-intro{font-size:10px;margin-top:6px}
  .saved-dialog>img{grid-column:1;grid-row:1/6;align-self:center;margin:0;height:100%;max-height:calc(var(--app-height) - 72px);min-height:150px}
  .saved-description{padding:10px 0}
  .saved-description h3{font-size:20px}
  .saved-description p{font-size:10px;margin-top:4px}
  .dialog-actions .primary-button{min-height:36px;font-size:12px;padding:0 12px}
  .dialog-actions .text-button{margin-top:10px;font-size:10px}
}