:root{
--toolbar:#171717;
--toolbar-line:#2c2c2c;
--text:#fff;
--muted:#b8bec6;
--accent:#2f97df;
--stage:#d8dde2;
--toolbar-height:76px
}

*{
box-sizing:border-box
}

html,
body{
width:100%;
height:100%;
margin:0
}

body{
font-family:Arial,Helvetica,sans-serif;
background:var(--stage);
overflow:hidden
}

.demo-toolbar{
position:relative;
z-index:20;
width:100%;
height:var(--toolbar-height);
display:grid;
grid-template-columns:205px minmax(0,1fr) 150px;
align-items:center;
gap:22px;
padding:0 16px;
background:var(--toolbar);
border-bottom:1px solid var(--toolbar-line);
box-shadow:0 2px 8px rgba(0,0,0,.28);
color:var(--text)
}

.demo-toolbar-brand{
min-width:0;
display:flex;
flex-direction:column;
align-items:flex-start;
justify-content:center;
color:#fff;
text-decoration:none
}

.demo-toolbar-brand img{
display:block;
width:auto;
max-width:155px;
max-height:52px;
object-fit:contain
}

.demo-brand-title{
max-width:190px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:17px;
font-weight:900;
letter-spacing:-.2px
}

.demo-toolbar-brand small{
margin-top:3px;
font-size:6px;
font-weight:700;
letter-spacing:.5px;
color:#d8d8d8
}

.demo-device-area{
min-width:0;
display:flex;
align-items:center;
gap:28px
}

.demo-device-area strong{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
font-size:14px;
line-height:1.2
}

.demo-device-buttons{
display:flex;
align-items:center;
gap:13px
}

.demo-device-button{
width:21px;
height:27px;
display:grid;
place-items:center;
padding:0;
border:0;
background:transparent;
color:#7fa4bd;
cursor:pointer;
transition:color .18s ease,transform .18s ease
}

.demo-device-button:hover{
color:#fff;
transform:translateY(-1px)
}

.demo-device-button.is-active{
color:#fff
}

.demo-device-button svg,
.demo-exit-link svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round
}

.demo-exit-link{
height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:5px;
border:1px solid #3c3c3c;
border-radius:4px;
color:#fff;
background:#262626;
text-decoration:none;
font-size:11px;
font-weight:800;
transition:.2s
}

.demo-exit-link:hover{
border-color:#555;
background:#333
}

.demo-exit-link svg{
width:16px;
height:16px
}

.demo-stage{
width:100%;
height:calc(100vh - var(--toolbar-height));
display:flex;
align-items:flex-start;
justify-content:center;
overflow:auto;
background:linear-gradient(135deg,#cfd5db,#e9ecef);
padding:0
}

.demo-frame-shell{
position:relative;
width:100%;
height:100%;
min-height:100%;
flex:0 0 auto;
background:#fff;
box-shadow:0 0 24px rgba(15,23,42,.2);
transition:width .28s ease,max-width .28s ease
}

.demo-frame-shell[data-device="desktop"]{
width:100%;
max-width:none
}

.demo-frame-shell[data-device="laptop"]{
width:min(1366px,100%)
}

.demo-frame-shell[data-device="tablet"]{
width:min(768px,100%)
}

.demo-frame-shell[data-device="mobile"]{
width:min(390px,100%)
}

.demo-frame-shell[data-device="mobile-small"]{
width:min(360px,100%)
}

.demo-frame-shell iframe{
display:block;
width:100%;
height:100%;
min-height:100%;
border:0;
background:#fff
}

.demo-loading{
position:absolute;
z-index:3;
inset:0;
display:flex;
align-items:center;
justify-content:center;
gap:12px;
background:#fff;
color:#27313a;
transition:opacity .22s ease,visibility .22s ease
}

.demo-loading.is-hidden{
opacity:0;
visibility:hidden;
pointer-events:none
}

.demo-spinner{
width:24px;
height:24px;
border:3px solid #dbe6ee;
border-top-color:var(--accent);
border-radius:50%;
animation:demoSpin .7s linear infinite
}

@keyframes demoSpin{
to{
transform:rotate(360deg)
}
}

@media(max-width:900px){

:root{
--toolbar-height:70px
}

.demo-toolbar{
grid-template-columns:150px minmax(0,1fr) 42px;
gap:12px;
padding:0 12px
}

.demo-toolbar-brand img{
max-width:130px;
max-height:46px
}

.demo-device-area{
justify-content:center;
gap:16px
}

.demo-device-area strong{
display:none
}

.demo-device-buttons{
gap:10px
}

.demo-exit-link{
width:38px;
padding:0
}

.demo-exit-link span{
display:none
}

}

@media(max-width:560px){

:root{
--toolbar-height:64px
}

.demo-toolbar{
grid-template-columns:94px minmax(0,1fr) 36px;
gap:7px;
padding:0 8px
}

.demo-toolbar-brand img{
max-width:90px;
max-height:40px
}

.demo-brand-title{
max-width:88px;
font-size:12px
}

.demo-toolbar-brand small{
display:none
}

.demo-device-buttons{
gap:6px
}

.demo-device-button{
width:18px
}

.demo-device-button svg{
width:17px;
height:17px
}

.demo-exit-link{
width:34px;
height:34px
}

.demo-stage{
align-items:flex-start
}

}