/* Screen atlas chrome is separate from the generated prototype's styles. */
#workspace[hidden],#screen-atlas[hidden]{display:none!important}
.app-modes{display:flex;align-items:stretch;flex:0 0 auto}
.flush-controls .app-modes>button{padding:12px 16px;border:0;border-right:1px solid var(--chrome-line);min-height:var(--chrome-height);font-weight:600}
.flush-controls .app-modes>[aria-selected=true]{background:#282724;color:#fff}
body.screens-mode{overflow:hidden}
body.screens-mode .topbar>.workspace-toolbar{display:none}
body.screens-mode .topbar>.top-actions{margin-left:auto}
#screen-atlas{--screen-scale:.4;display:flex;flex-direction:column;min-height:240px;background:#282724}
.screen-toolbar{display:flex;align-items:stretch;flex:0 0 auto;flex-wrap:wrap;background:#fff;border-bottom:1px solid var(--chrome-line);min-height:48px;color:#303342}
.screen-toolbar>label{gap:0;padding-left:14px;font-size:11px;border-right:1px solid var(--chrome-line)}
.screen-toolbar select{align-self:stretch;min-height:48px;max-width:260px;border:0;padding:10px 32px 10px 12px;background-position:right 12px center}
.screen-pan-hint{align-self:center;flex:1;padding:12px 16px;font-size:11px;color:#777168}
.screen-zoom{display:flex;align-items:stretch;margin-left:auto}
.screen-zoom button{border:0;border-left:1px solid var(--chrome-line);padding:10px 14px;min-width:44px}
.screen-zoom output{display:grid;place-items:center;min-width:54px;font-size:11px;border-left:1px solid var(--chrome-line)}
.screen-canvas-body{display:flex;min-height:0;flex:1}
#screen-navigation{flex:0 0 200px;overflow:auto;background:#f6f4f0;border-right:1px solid #56534f;overscroll-behavior:contain}
.screen-nav-group{border-bottom:1px solid var(--chrome-line)}
.screen-nav-group>div{display:grid}
.flush-controls #screen-navigation button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:12px 16px;font-size:12px;white-space:normal;overflow-wrap:anywhere}
.flush-controls #screen-navigation .screen-group-button{font-weight:650;background:#eae7e1;border-bottom:1px solid var(--chrome-line)}
.flush-controls #screen-navigation [data-atlas-select]{padding-left:26px}
.flush-controls #screen-navigation button:hover{background:#e4e0d8}
.flush-controls #screen-navigation [aria-current=true]{background:#282724;color:#fff}
#screen-stage{position:relative;flex:1;min-width:0;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-color:#77716a #282724;outline-offset:-3px;touch-action:pan-x pan-y}
#screen-world{width:max-content;min-width:100%;padding:24px;display:flex;flex-direction:column;gap:32px}
.screen-group>h2{font-size:13px;font-weight:550;color:#e5e1d9;margin:0 0 12px;line-height:20px}
.screen-row{display:flex;align-items:flex-start;gap:24px}
.screen-card{flex:none;width:calc(1280px * var(--screen-scale));background:#fff;outline:1px solid #625e57;box-shadow:0 6px 20px #0002}
.screen-card.is-selected{outline:2px solid #d8c0f0}
.screen-card>header{display:flex;align-items:stretch;background:#f0eee8;color:#36332f;border-bottom:1px solid #c9c5bc}
.flush-controls .screen-card>header>button{min-height:36px;border:0;padding:8px 12px;background:transparent;display:flex;align-items:center;justify-content:center}
.flush-controls .screen-card>header>.screen-card-name{flex:1;justify-content:flex-start;text-align:left;font-size:12px;font-weight:550;white-space:normal}
.flush-controls .screen-card>header>[data-atlas-expand]{border-left:1px solid #c9c5bc;min-width:40px}
.flush-controls .screen-card>header>button:hover{background:#dedad1}
.screen-snapshot{position:relative;width:100%;height:calc(800px * var(--screen-scale));overflow:hidden;cursor:default}
.screen-viewport{position:absolute;left:0;top:0;width:1280px;height:800px;transform:scale(var(--screen-scale));transform-origin:0 0;container-type:inline-size;container-name:device}
.screen-viewport>.prototype{width:100%;height:800px;min-height:800px;max-height:800px;display:flex;flex-direction:column;border-radius:0}
.screen-viewport .proto-shell{flex:1;min-height:0}
#screen-stage.pan-ready,#screen-stage.pan-ready *{cursor:grab!important;user-select:none}
#screen-stage.is-panning,#screen-stage.is-panning *{cursor:grabbing!important}
#screen-stage.pan-ready .screen-card *{pointer-events:none}
#screen-empty{max-width:480px;margin:32px;color:#d0cbc2;line-height:1.7}
#screen-empty[hidden]{display:none}
#screen-focus-dialog{width:calc(100vw - 48px);max-width:none;height:calc(100dvh - 48px);max-height:none;padding:0;border:1px solid #625e57;border-radius:0;background:#282724;overflow:hidden}
#screen-focus-dialog[open]{display:flex;flex-direction:column}
#screen-focus-dialog::backdrop{background:#141310b3}
.screen-focus-heading{display:flex;align-items:stretch;flex:0 0 auto;background:#f0eee8;color:#36332f;border-bottom:1px solid #c9c5bc}
.screen-focus-heading h2{flex:1;margin:0;align-self:center;padding:14px 16px;font-size:14px;font-weight:550}
.screen-focus-heading button{border:0;border-left:1px solid #c9c5bc;padding:12px 16px;min-width:48px;background:transparent}
#screen-focus-body{flex:1;min-height:0;overflow:auto;padding:20px}
.screen-focus-viewport{width:1280px;max-width:100%;min-height:100%;margin:0 auto;container-type:inline-size;container-name:device}
.screen-focus-viewport>.prototype{width:100%;min-height:800px;display:flex;flex-direction:column;border-radius:0}
.screen-focus-viewport .proto-shell{flex:1}
@media(max-width:1100px){
 .flush-controls .topbar{flex-wrap:wrap}
 .flush-controls .topbar>.workspace-toolbar{order:4;flex:1 1 100%;border-top:1px solid var(--chrome-line)}
 .flush-controls .topbar>.top-actions{margin-left:auto}
}
@media(max-width:650px){
 #screen-navigation{flex-basis:145px}
 .screen-pan-hint{flex-basis:100%;order:3;padding:8px 12px}
 .screen-toolbar>label{flex:1}
 .screen-toolbar select{max-width:180px;min-width:0}
 #screen-focus-dialog{width:calc(100vw - 16px);height:calc(100dvh - 16px)}
 #screen-focus-body{padding:8px}
}

.screen-viewport>.prototype{overflow:auto}