/* Shared preview controls. App styles remain inside their original iframe. */
main[data-demo-preview]{grid-template-columns:minmax(0,1fr) 462px}
[data-demo-preview] .device{height:auto;min-height:0;max-width:462px;flex:none}
[data-demo-preview] .device-label{flex-wrap:wrap;gap:8px;padding:10px 12px;letter-spacing:normal}
[data-demo-preview] .device-label>span{width:100%;font-size:10px;letter-spacing:.08em}
.demo-view-switch{display:flex;gap:4px;margin-right:auto;padding:3px;border:1px solid #ffffff38;border-radius:10px}
.demo-view-switch button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:8px 11px;border:1px solid transparent;border-radius:7px;background:transparent;color:inherit;font:600 12px/1.2 system-ui,sans-serif;cursor:pointer}
.demo-view-switch button[aria-pressed=true]{background:#ffffff17;border-color:currentColor}
.demo-view-switch button:hover{background:#ffffff12}
.demo-view-switch button:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.demo-view-icon{display:inline-block;width:12px;height:18px;border:1.5px solid currentColor;border-radius:3px;flex:none}
.demo-view-icon.tablet{width:21px;height:15px}
[data-demo-preview] #demo-fullscreen{margin-left:auto;max-width:155px;min-height:44px;flex:none}
.demo-viewport{position:relative;width:100%;height:820px;flex:none;min-height:0;overflow:hidden;background:#080d16}
[data-demo-preview] .demo-viewport>iframe{position:absolute;top:0;left:0;display:block;width:100%;height:100%;min-height:0;border:0;flex:none;transform-origin:top left}
.demo-view-status{flex:none;margin:0;padding:8px 12px;border-top:1px solid #ffffff24;font-size:11px;line-height:1.5;text-align:center;color:inherit;opacity:.85}
main[data-demo-preview][data-demo-layout=tablet]{display:block;max-width:1240px;height:auto;min-height:100dvh}
[data-demo-layout=tablet] .intro{max-width:840px;margin:0 0 28px}
[data-demo-layout=tablet] .device{max-width:none;margin:0}
[data-demo-layout=tablet] .device-label>span{width:auto;margin-right:auto}
[data-demo-layout=tablet] .demo-view-switch{margin-right:0}
[data-demo-layout=tablet] #demo-fullscreen{margin-left:0}
.demo-expanded main[data-demo-preview]{display:flex;width:100%;max-width:none;height:100dvh;min-height:0;margin:0;padding:0;gap:0}
.demo-expanded [data-demo-preview] .intro{display:none}
.demo-expanded [data-demo-preview] .device{width:100%;max-width:none;height:100%;min-height:0;flex:1;margin:0;border:0;border-radius:0;box-shadow:none}
.demo-expanded [data-demo-preview] .device-label{justify-content:space-between;width:100%;max-width:1240px;margin:auto;padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left))}
.demo-expanded [data-demo-preview] .device-label>span{display:none}
.demo-expanded [data-demo-preview] .demo-view-switch{margin-right:auto}
.demo-expanded [data-demo-preview] .demo-viewport{flex:1;height:0;min-height:0}
.demo-expanded [data-demo-preview] .demo-view-status{padding:4px 12px}
@media(max-width:800px){
 main[data-demo-preview]{height:auto;min-height:100dvh}
 [data-demo-preview] .device{max-width:462px;margin:0 auto}
 [data-demo-layout=tablet] .intro{margin:0}
 [data-demo-layout=tablet] .device{max-width:none}
 [data-demo-preview] .device-label>span{width:100%}
 [data-demo-preview] .demo-view-switch{margin-right:auto}
}
@media(max-height:600px){
 main[data-demo-preview]{height:auto;min-height:100dvh}
 [data-demo-preview] .device{max-width:462px;margin:0 auto}
 [data-demo-layout=tablet] .intro{margin:0}
 [data-demo-layout=tablet] .device{max-width:none}
}
@media(max-width:380px){
 [data-demo-preview] .device-label{padding:8px;gap:6px}
 .demo-view-switch button{font-size:11px;padding:8px;gap:5px}
 [data-demo-preview] #demo-fullscreen{font-size:11px;padding:8px;max-width:130px}
}