/* A real nested viewport activates the same mobile CSS and JS as a phone. */
.reference-control-top,.preview-control-top{flex-wrap:wrap}
body :is(.reference-tools,.preview-workspace) .reference-device-views{display:inline-flex;gap:0;margin-left:6px}
body :is(.reference-tools,.preview-workspace) .reference-device-views button{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:8px 14px;border:1px solid #496071!important;border-radius:0!important;font:600 13px/1.4 Arial,sans-serif;cursor:pointer;white-space:nowrap;margin:0}
body :is(.reference-tools,.preview-workspace) .reference-device-views button:first-child{border-radius:6px 0 0 6px!important}
body :is(.reference-tools,.preview-workspace) .reference-device-views button:last-child{border-radius:0 6px 6px 0!important}
body :is(.reference-tools,.preview-workspace) .reference-device-views button[aria-pressed=true]{background:#e7f4fc!important;color:#122333!important}
.reference-device-stage[hidden]{display:none}
body .reference-device-stage{position:fixed;inset:var(--reference-panel-height,90px) 0 0;z-index:140;display:flex;justify-content:center;padding:16px;background:#dbe3e9!important}
body .reference-device-stage[hidden]{display:none}
body .reference-device-stage iframe{display:block;box-sizing:content-box;width:390px;max-width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid #8095a6!important;background:white!important;box-shadow:0 4px 24px #10233326!important;filter:none}
html.reference-mobile-view{overflow:hidden}
html.reference-mobile-view body> :not(.reference-tools):not(.preview-workspace):not(.reference-instructions):not(.reference-device-stage):not(script):not(style){display:none!important}
html.reference-device-frame body :is(.reference-tools,.preview-workspace){display:none!important}
@media(max-width:700px){.reference-device-stage{padding:8px}.reference-device-views{margin-left:0!important}}