/* The native dialog top layer dims the complete page and keeps the app interactive. */
.catalog-demo-focus-shell[open]:modal {
 position:fixed;
 inset:var(--demo-focus-top) auto auto var(--demo-focus-left);
 width:var(--demo-focus-width);
 height:var(--demo-focus-height);
 max-width:none;
 max-height:none;
 margin:0;
 padding:0;
 border:0;
 border-radius:4px;
 overflow:visible;
 background:#fff;
 box-shadow:0 24px 70px #0f172b40,0 4px 14px #0f172b24;
 transform-origin:top left;
}
.catalog-demo-focus-shell[open]:modal::backdrop {
 background:rgba(15,23,35,.4);
 animation:demo-focus-backdrop-in 200ms ease-out both;
}
.catalog-demo-focus-shell[open]:modal.is-closing::backdrop {
 animation:demo-focus-backdrop-out 160ms ease-in both;
}
.catalog-demo-focus-shell[open]:modal > .catalog-demo-focus-frame {
 position:absolute;
 inset:0 auto auto 0;
 box-sizing:border-box;
 width:1319px;
 height:720px;
 border:1px solid #c9cecd;
 border-radius:4px;
 background:#fff;
 transform:scale(var(--demo-focus-scale));
 transform-origin:top left;
 box-shadow:none;
}
.catalog-demo-focus-shell[open]:modal > .catalog-demo-focus-close {
 display:block;
 position:absolute;
 top:-44px;
 right:0;
 z-index:1;
 height:36px;
 max-width:100%;
 margin:0;
 padding:0 13px;
 border:1px solid #d9dfe5;
 border-radius:4px;
 background:#fff;
 color:#35485d;
 box-shadow:0 3px 12px #0f172b1f;
 font:500 12px/20px 'Segoe UI',sans-serif;
 white-space:nowrap;
 cursor:pointer;
}
.catalog-demo-focus-shell[open]:modal > .catalog-demo-focus-close:hover { background:#f2f5f8; }
.catalog-demo-focus-shell[open]:modal > .catalog-demo-focus-close:focus-visible { outline:2px solid var(--office-embed-accent,#107c41);outline-offset:2px; }
@keyframes demo-focus-backdrop-in { from { background:rgba(15,23,35,0); } to { background:rgba(15,23,35,.4); } }
@keyframes demo-focus-backdrop-out { from { background:rgba(15,23,35,.4); } to { background:rgba(15,23,35,0); } }
@media(prefers-reduced-motion:reduce) {
 .catalog-demo-focus-shell[open]:modal::backdrop,
 .catalog-demo-focus-shell[open]:modal.is-closing::backdrop { animation:none; }
}

/* A responsive spreadsheet uses the real viewport in phone focus mode. */
.catalog-demo-focus-shell.is-responsive-frame[open]:modal > .catalog-demo-focus-frame {
 width:100%;
 height:100%;
 transform:none;
}
.catalog-demo-focus-shell.is-responsive-frame[open]:modal > .catalog-demo-focus-close {
 top:-48px;
 height:44px;
}