/* Keep the canvas usable when the editor toolbar wraps on a small screen. */
.layout>.sidebar{min-width:0}
.topbar .searchbox{min-width:0}
.editor[aria-label]{grid-template-rows:auto minmax(0,1fr) auto;max-width:100vw;height:100dvh}
.editor .editor-top{min-width:0}
.editor .editor-filename{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.editor .editor-actions{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;overflow-x:auto;padding:4px 0}
.editor .editor-actions button{flex-shrink:0;white-space:nowrap}
.editor iframe{min-height:0;min-width:0;display:block}
.editor .editor-status{overflow-wrap:anywhere}
.language-selector{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;font-size:13px;color:var(--muted)}
.language-selector select{width:auto;min-height:36px;margin:0;padding:6px 8px;max-width:190px}
#app>.language-selector{display:flex;justify-content:flex-end;padding:10px 20px;background:var(--bg)}
.demo-banner .language-selector{margin-left:auto}
.demo-banner .language-selector span{flex:none;min-width:0}
.editor-top .language-selector span{display:none}
.view-controls{display:flex;align-items:center;gap:6px;flex-shrink:0}
.view-controls button{white-space:nowrap;font-size:12px;padding:7px 10px}
.editor.is-focused .editor-actions,.editor.is-focused .editor-filename,.editor.is-focused .editor-save-hint{display:none}
.editor.is-focused .editor-top{padding:6px 12px}
#demo-editor:fullscreen{background:var(--bg);width:100vw;height:100dvh}
#demo-editor.is-focused #demo-status,#demo-editor.is-focused .demo-toolbar>span{display:none}
#demo-editor.is-focused{grid-template-rows:auto minmax(0,1fr)}
.demo-toolbar{flex-wrap:wrap}
.demo-badge{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#bfeaf0}
@media(max-width:600px){
 .topbar .language-selector span,.demo-banner .language-selector span{display:none}
 .language-selector select{max-width:150px}
 .demo-banner{gap:5px 10px;padding:6px 12px}
 .demo-banner>strong{order:0}.demo-banner>a{order:1;margin-left:auto;position:static}
 .demo-banner>.language-selector{order:2;margin-left:0}
 .demo-banner>span{order:3;min-width:0;flex:1;font-size:10px}
 .demo-toolbar{gap:6px;padding:6px 10px}
 .demo-toolbar>span{display:none}
 .demo-toolbar .view-controls{gap:4px}
 .view-controls button{padding:6px 8px}
}
@media(max-width:850px){
 .editor .editor-actions{order:2;width:100%;border-top:1px solid var(--line);padding-top:8px}
 .editor .editor-top button{min-height:40px}
 .editor .editor-save-hint{display:none}
}
@media(max-width:380px){
 .editor .editor-top{gap:6px}
 .editor .editor-filename{flex-basis:0}
}
@media(max-width:600px){.layout.layout{grid-template-columns:minmax(0,1fr)}}