:root{--border: #ddd;--header-h: 52px;--canvas-bg: #e9e9e9}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font:14px/1.5 system-ui,sans-serif;color:#1a1a1a}.app{display:flex;flex-direction:column;height:100%}.app-header{height:var(--header-h);flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--border)}.app-title{margin:0;font-size:16px;font-weight:600}.app-title-accent{color:#6b6b6b;font-weight:400}.app-actions{display:flex;gap:8px}.app-actions button{padding:6px 12px;font-size:13px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer}.app-actions button:hover{background:#f5f5f5}.app-body{flex:1 1 auto;min-height:0;display:flex}.pane{min-width:0;min-height:0;overflow:hidden}.pane-editor{flex:0 0 42%;border-right:1px solid var(--border)}.pane-editor .cm-editor{height:100%}.pane-preview{flex:1 1 58%;background:var(--canvas-bg)}.canvas-host{width:100%;height:100%}@media (max-width: 720px){.app-body{flex-direction:column}.pane-editor{flex:0 0 45%;border-right:none;border-bottom:1px solid var(--border)}.pane-preview{flex:1 1 55%}}