/* This stylesheet follows the real viewport, not the selected canvas width. */
.display-layout-picker{margin:0 0 23px;padding:15px 10px 12px;border:1px solid #bf94e72a;border-radius:17px;background:linear-gradient(135deg,#30203f70,#19132295)}
.display-layout-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:12px;color:#e4d4f3}
.display-layout-heading small{font-size:9px;color:#a893b8}
.display-layout-heading [data-layout-auto]{border:0;padding:3px 0 3px 8px;background:none;color:#dcc0ef;font:inherit;font-size:10px;cursor:pointer}.display-layout-heading [data-layout-auto]:disabled{color:#a893b8;cursor:default}.display-layout-note{font-size:9px;line-height:1.7;color:#a893b8;margin:10px 0 0}
.display-layout-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.display-layout-options button{position:relative;display:flex;align-items:center;flex-direction:column;gap:7px;padding:13px 3px 11px;border:1px solid #bc9bd524;border-radius:12px;background:#17111f;color:#a995bc;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s}
.display-layout-options svg{width:22px;height:22px}.display-layout-options strong{font-size:11px;font-weight:500}.display-layout-options small{font-size:8px;opacity:.72}
.display-layout-options button.selected{background:linear-gradient(145deg,#78559995,#3e2a57);border-color:#c99ae984;color:#f4e8ff;box-shadow:inset 0 1px #efdcff29,0 4px 15px #ab6be215}
.layout-choice-dot{position:absolute;right:7px;top:7px;width:4px;height:4px;border-radius:50%;background:transparent}.selected .layout-choice-dot{background:#e1b9ff;box-shadow:0 0 7px #c184ff}
.layout-menu-trigger,.layout-menu-close{display:none;align-items:center;justify-content:center;border:1px solid #b993d747;background:#251b34ee;color:#eddafa;border-radius:12px;cursor:pointer;min-width:38px;min-height:38px}
.layout-menu-trigger svg,.layout-menu-close svg{width:18px;height:18px}.layout-menu-trigger{gap:6px;padding:8px;font-size:10px;backdrop-filter:blur(16px);box-shadow:0 3px 14px #10071945}
.layout-menu-shade{display:none;position:fixed;inset:0;z-index:130;background:#090510b8;backdrop-filter:blur(5px);border:0;width:100%;height:100%}
.sidebar{overflow-y:auto;overscroll-behavior:contain}.sidebar .ecosystem-link{margin-bottom:22px}
html[data-display-layout=mobile] #app{max-width:480px;margin-inline:auto;min-width:0}
html[data-display-layout=mobile] .main{margin-left:0}
html[data-display-layout=mobile] .prototype-bar{max-width:480px;margin-inline:auto;left:0;right:0}
html[data-display-layout=mobile] body[data-mode] .bottom-nav{max-width:456px;width:calc(100% - 24px);left:50%;right:auto;transform:translateX(-50%)}
html[data-layout-compact=true] .topbar{padding:12px 12px 10px 64px!important;height:auto!important;min-height:110px;flex-wrap:wrap;gap:10px}
html[data-layout-compact=true] .topbar-right{flex-basis:100%;justify-content:flex-end}
html[data-layout-compact=true] .topbar .mobile-brand{gap:7px;padding:7px 8px;min-height:55px;min-width:0}
html[data-layout-compact=true] .topbar .ecosystem-logo{width:28px;height:28px}
html[data-layout-compact=true] .topbar .ecosystem-copy strong{font-size:12px}
html[data-display-layout=desktop] #app{width:100%;min-width:0;max-width:none}
html[data-display-layout=desktop] .sidebar{width:232px;padding-left:17px;padding-right:17px}
html[data-display-layout=desktop] .main{margin-left:232px}
html[data-layout-drawer=true] .layout-menu-trigger{display:flex;position:fixed;z-index:115;top:calc(49px + var(--sf-safe-top,0px));left:calc(max(10px,(100vw - 480px)/2 + 10px) + var(--sf-safe-left,0px))}
html[data-layout-drawer=true][data-display-layout=desktop] .layout-menu-trigger{left:calc(10px + var(--sf-safe-left,0px))}
html[data-layout-drawer=true] .sidebar{display:flex;position:fixed;top:0;left:0;bottom:0;width:min(310px,calc(100vw - 36px));padding:calc(27px + var(--sf-safe-top,0px)) 20px calc(22px + var(--sf-safe-bottom,0px));z-index:140;visibility:hidden;transform:translateX(-105%);transition:transform .25s ease,visibility .25s;border-right:1px solid #caa0eb45;box-shadow:20px 0 70px #0006}
html[data-layout-drawer=true] .sidebar .ecosystem-link{margin-top:32px;flex-wrap:nowrap;justify-content:flex-start;gap:7px;min-height:64px}
html[data-layout-drawer=true] .sidebar .ecosystem-copy{flex-basis:auto;align-items:flex-start;order:initial}
html[data-layout-drawer=true] .sidebar .ecosystem-logo{width:40px;height:38px}
html[data-layout-drawer=true] .layout-menu-close{display:flex;position:absolute;right:18px;top:calc(14px + var(--sf-safe-top,0px));min-width:32px;min-height:32px}
html.layout-menu-open .layout-menu-shade{display:block}
html.layout-menu-open .sidebar{transform:translateX(0);visibility:visible}
html.layout-menu-open,html.layout-menu-open body{overflow:hidden}
html[data-layout-drawer=true][data-display-layout=desktop] .main{margin-left:0}
html[data-layout-drawer=true][data-display-layout=desktop] .topbar{padding-left:72px}
.display-layout-options button:focus-visible,[data-layout-auto]:focus-visible,.layout-menu-trigger:focus-visible,.layout-menu-close:focus-visible{outline:2px solid #e4baff;outline-offset:3px}
@media(max-width:370px){html[data-layout-compact=true] .topbar{padding-right:10px!important;padding-left:59px!important}html[data-layout-compact=true] .topbar .ecosystem-copy strong{font-size:11px}html[data-layout-compact=true] .topbar .ecosystem-logo{width:24px}}
@media(prefers-reduced-motion:reduce){.sidebar,.display-layout-options button{transition:none}}