*{box-sizing:border-box}
body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;background:#e9ecef;color:#26342f;font:14px Arial,sans-serif}
.demo-toolbar{flex:none;min-height:68px;padding:10px 24px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;background:#fff;border-bottom:1px solid #dce1de;z-index:1}
.demo-toolbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.demo-back{display:inline-flex;align-items:center;gap:8px;justify-self:start;text-decoration:none;color:inherit;padding:10px 12px;border:1px solid #dce1de;border-radius:9px;font-weight:600}
.demo-back:hover{background:#f1f5f2}
.demo-devices{display:flex;gap:4px;padding:4px;border-radius:12px;background:#f0f3f1}
.demo-devices button{display:flex;align-items:center;gap:8px;border:0;border-radius:9px;padding:9px 15px;background:transparent;color:#54635a;cursor:pointer;font:600 14px Arial,sans-serif}
.demo-devices button[aria-pressed=true]{background:#294d3d;color:white;box-shadow:0 2px 5px #0001}
.demo-devices button:hover{box-shadow:inset 0 0 0 2px #294d3d44}
.demo-toolbar :focus-visible{outline:3px solid #6492d5;outline-offset:3px}
.demo-name{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#65716a;font-size:13px}
.demo-stage{flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center;align-items:flex-start;padding:16px}
.demo-screen{position:relative;overflow:hidden;background:white;border-radius:10px;box-shadow:0 8px 32px #192b3526}
.demo-frame{display:block;border:0;transform-origin:top left;background:white}
@media(max-width:650px){.demo-toolbar{padding:8px 12px;min-height:64px;grid-template-columns:auto 1fr;gap:10px}.demo-devices{justify-self:end}.demo-name{display:none}.demo-stage{padding:10px}.demo-back{padding:10px}.demo-devices button{padding:8px 10px}}
@media(max-width:360px){.demo-back span{display:none}}