/* Dedicated canvas: app layout runs at its intended size, independently of the host breakpoint. */
html,body.demo-stage{margin:0;width:100%;min-height:100%;background:transparent;overflow:hidden}
.demo-stage main{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;box-sizing:border-box}
.demo-stage .device-tilt{transform:none!important;animation:none!important}
.demo-stage .device-back{display:none}
.demo-stage .iphone{width:360px;max-width:none}
.demo-stage #npTilt{width:400px}
.demo-stage-iphone main{width:440px;min-height:800px}
.demo-stage .mac-wrap{width:100%;max-width:1181px}
.demo-stage .ipad{max-width:920px}
.demo-stage .apple-tv{width:100%;max-width:880px}
.demo-stage .watch-assembly{transform:none;padding:60px 0;width:100%;height:520px}
.demo-stage #searchPhone{width:400px}
.demo-stage :focus-visible{outline:3px solid var(--accent-text);outline-offset:3px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Direct demo links retain the same canvas on phones; visitors can pan and zoom. */
body.demo-stage{overflow:auto;--canvas:960px}
body.demo-stage-mac{--canvas:1240px}
.demo-stage main{width:var(--canvas);margin-inline:auto}
body.demo-stage-rooms{--canvas:1024px}
body.demo-stage-iphone{--canvas:440px}
body.demo-stage-watch{--canvas:520px}
body.demo-stage-search{--canvas:440px}

.demo-stage-search main{width:440px;min-height:800px}
.demo-stage .mac-host{width:1181px;max-width:100%}
.demo-stage .ipad-host{width:1412px;max-width:100%}
body.demo-stage-rooms{--canvas:1460px}