.demo-page{height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.demo-banner{display:flex;gap:16px;align-items:center;flex-wrap:wrap;background:#18363e;color:#d8faff;padding:10px 24px;border-bottom:1px solid #3c707c;font-size:13px;flex-shrink:0}
.demo-banner strong{white-space:nowrap}.demo-banner>span{flex:1}.demo-banner a{text-decoration:underline}
#demo-launcher{overflow-y:auto;min-height:0}#demo-launcher .page-title{max-width:820px}#demo-launcher h1{font-size:clamp(26px,4vw,42px)}
#demo-privacy{margin:0;padding:10px 24px;background:#18363e;color:#d8faff;border-bottom:1px solid #3c707c;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
#demo-launcher-notice #demo-privacy{padding:16px;border:1px solid #3c707c;border-radius:8px;max-width:1000px}
.demo-compatibility{font-size:13px;color:var(--muted);max-width:900px}
#demo-editor{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;background:var(--bg)}
.demo-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:8px 24px;border-bottom:1px solid var(--line);flex-shrink:0}
.demo-toolbar strong{margin-right:auto}.demo-toolbar button{white-space:nowrap}
.demo-toolbar .language-selector{margin:0}.demo-toolbar .view-controls{margin-left:0}
.demo-workflow{padding:6px 24px;border-bottom:1px solid var(--line);flex-shrink:0;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.demo-workflow p{margin:2px 0}#demo-format{color:var(--muted)}#demo-budget{font-variant-numeric:tabular-nums}
#demo-frame{flex:1;min-height:160px;min-width:0}#demo-frame iframe{width:100%;height:100%;border:0;display:block}
#demo-status{margin:0;padding:8px 24px;border-top:1px solid var(--line);font-size:12px;overflow-wrap:anywhere;flex-shrink:0}
#demo-editor.is-focused{position:fixed;inset:0;z-index:1000}
body #demo-editor.is-focused #demo-status{display:block}
#demo-editor:fullscreen{width:100%;height:100dvh;overflow:auto}
@media(max-width:600px){
 .demo-banner{padding:8px 12px;gap:6px 12px;font-size:11px}.demo-banner .language-selector{width:100%;justify-content:flex-end}
 .demo-toolbar{padding:6px 12px;gap:6px}.demo-toolbar button{font-size:11px;padding:6px}.demo-toolbar strong{font-size:13px}
 .demo-toolbar .language-selector{margin-left:auto}.demo-toolbar .language-selector select{max-width:150px}
 #demo-privacy{padding:8px 12px;font-size:11px}.demo-workflow{padding:5px 12px;font-size:11px}#demo-status{padding:6px 12px;font-size:11px}
}
@media(max-height:700px){#demo-editor{overflow:auto}#demo-frame{flex-basis:300px;flex-shrink:0}}