html,body,#app{color:#b1b8ba;background:#20292b;height:100%;margin:0;font-family:system-ui,sans-serif;overflow:hidden}.editor{grid-template:"toolbar toolbar toolbar"36px"left center right"1fr/240px 1fr 380px;height:100%;display:grid}.editor-toolbar{background:#364346;border-bottom:1px solid #293538;grid-area:toolbar;align-items:center;gap:8px;padding:0 8px;display:flex}.editor-toolbar h1{letter-spacing:.04em;text-transform:uppercase;margin:0 12px 0 0;font-size:12px;font-weight:600}.editor-toolbar .status{color:#7f8b8d;margin-left:auto;font:11px/1 monospace}.editor-left{border-right:1px solid #293538;grid-area:left;overflow:auto}.editor-center{background:#1d1d1f;grid-area:center;position:relative}.editor-right{border-left:1px solid #293538;grid-area:right;grid-template-rows:auto 1fr;display:grid;overflow:hidden}.editor-center iframe{border:0;width:100%;height:100%;display:block}.code-pane{flex-direction:column;min-height:0;display:flex}.code-pane-header{text-transform:uppercase;letter-spacing:.04em;background:#2c393c;border-bottom:1px solid #293538;align-items:center;gap:8px;padding:6px 8px;font-size:11px;display:flex}.code-pane-header .hint{text-transform:none;color:#7f8b8d;margin-left:auto}.code-pane-editor{flex:1;min-height:0}.empty-note{color:#7f8b8d;padding:10px;font-size:12px}