:root{color:#172033;background:#f3f6fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px}button,textarea{font:inherit}button{border:1px solid #c8d1dc;border-radius:6px;background:#fff;color:#172033;cursor:pointer;font-weight:700;min-height:38px;padding:0 14px}button:hover:not(:disabled){border-color:#0f766e;color:#0f766e}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{min-height:100vh;padding:24px}.topbar{align-items:center;display:flex;gap:20px;justify-content:space-between;margin:0 auto 16px;max-width:1480px}.eyebrow{color:#59657a;font-size:12px;font-weight:800;letter-spacing:0;margin:0 0 4px;text-transform:uppercase}h1,h2,p{margin:0}h1{font-size:28px;line-height:1.15}h2{font-size:15px;line-height:1.2}.actions{align-items:center;display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}.toggle{align-items:center;color:#3a4658;display:inline-flex;font-size:14px;font-weight:700;gap:8px;min-height:38px}.toggle input{accent-color:#0f766e;height:16px;width:16px}.status-row{align-items:center;color:#4a566b;display:flex;flex-wrap:wrap;gap:14px;margin:0 auto 16px;max-width:1480px}.status-row span{font-size:13px;font-weight:700}.status-dot{background:#0f766e;border-radius:999px;display:inline-block;height:10px;width:10px}.status-dot.warning{background:#b45309}.workspace{display:grid;gap:16px;grid-template-columns:minmax(320px,.9fr) minmax(360px,1.1fr);margin:0 auto;max-width:1480px}.editor-pane,.output-pane,.diagnostics{background:#fff;border:1px solid #d8e0ea;border-radius:8px;box-shadow:0 18px 42px #1c273914}.editor-pane,.output-pane{min-height:68vh;overflow:hidden}.pane-header{align-items:center;border-bottom:1px solid #d8e0ea;display:flex;justify-content:space-between;min-height:50px;padding:0 14px}.subtle{background:#f7f9fc;min-height:32px}.editor-actions{display:flex;gap:8px}.code-editor-shell{background:#121826;height:calc(68vh - 50px);overflow:hidden;position:relative}.code-editor-highlight,.code-editor-input,textarea{background:transparent;border:0;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;height:calc(68vh - 50px);line-height:1.55;padding:16px;tab-size:2;width:100%}.code-editor-highlight{color:#dbeafe;left:0;margin:0;overflow:hidden;pointer-events:none;position:absolute;top:0;white-space:pre}.code-editor-input{caret-color:#fff;color:transparent;display:block;left:0;outline:none;overflow:auto;position:absolute;resize:none;top:0;white-space:pre}.code-editor-input::selection{background:#14b8a659;color:transparent}.code-editor-placeholder{color:#8a97aa;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;left:16px;pointer-events:none;position:absolute;top:16px;z-index:1}.syntax-tag{color:#7dd3fc}.syntax-attr{color:#fbbf24}.syntax-string{color:#86efac}.syntax-punctuation{color:#cbd5e1}.syntax-comment,.syntax-doctype{color:#94a3b8}textarea{color:#e6edf6;display:block;outline:none;resize:none}.code-editor{background:#121826;height:calc(68vh - 50px);overflow:hidden}.code-editor .cm-editor{background:#121826;height:100%;outline:none}.code-editor .cm-scroller{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:14px;line-height:1.55}.code-editor .cm-content{min-height:100%;padding:16px 0}.code-editor .cm-line{padding:0 16px}.code-editor .cm-gutters{background:#0d1422;border-right:1px solid rgba(148,163,184,.22);color:#64748b}.code-editor .cm-foldGutter{min-width:22px}.code-editor .cm-foldGutter .cm-gutterElement{color:#94a3b8;cursor:pointer;padding:0 6px}.code-editor .cm-foldGutter .cm-gutterElement:hover{color:#7dd3fc}.code-editor .cm-activeLine{background:#ffffff0d}.code-editor .cm-selected-mjml-line{background:#0f766e57;outline:1px solid rgba(45,212,191,.75)}.tabs,.preview-switch{background:#eef2f7;border:1px solid #d8e0ea;border-radius:7px;display:inline-grid;grid-template-columns:1fr 1fr;padding:3px}.tabs button,.preview-switch button{background:transparent;border:0;min-height:32px}.tabs button.active,.preview-switch button.active{background:#fff;box-shadow:0 1px 4px #1c273929}.preview-switch{min-width:168px}.preview-switch button{font-size:13px;padding:0 10px}.preview-frame{align-items:stretch;background:#e8edf4;display:flex;height:calc(68vh - 50px);justify-content:center;overflow:auto;padding:0}.preview-frame.desktop{background:#fff}.preview-frame.mobile{padding:18px}.preview-frame iframe{background:#fff;border:0;display:block;min-height:100%;width:100%}.preview-frame.mobile iframe{border:1px solid #cad4e1;border-radius:8px;box-shadow:0 16px 32px #1c273929;flex:0 0 390px;max-width:100%;width:390px}.html-output{background:#121826;color:#e6edf6;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;height:calc(68vh - 50px);line-height:1.5;margin:0;overflow:auto;padding:16px;white-space:pre-wrap}.markup-tree{background:#121826;color:#d8e2ee;font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;font-size:13px;height:calc(68vh - 50px);line-height:1.5;overflow:auto;padding:12px 8px}.markup-tree.empty{color:#8a97aa;padding:16px}.tree-node{margin:1px 0}.tree-node summary{cursor:pointer;list-style:none}.tree-node summary::-webkit-details-marker{display:none}.tree-row{align-items:baseline;border-radius:5px;display:flex;gap:2px;min-height:24px;overflow-wrap:anywhere;padding:3px 12px 3px 10px;white-space:pre-wrap}.tree-row:hover{background:#ffffff0f}.tree-row.selected{background:#0f766e38;outline:1px solid rgba(45,212,191,.68)}.tree-row.leaf,.tree-row.close{color:#8a97aa}.tree-caret{color:#94a3b8;flex:0 0 16px;font-size:11px;line-height:1.5}.tree-caret:before{content:"▶"}.tree-node[open]>summary .tree-caret:before{content:"▼"}.tree-tag{color:#7dd3fc}.tree-attrs{color:#fbbf24}.tree-text{color:#e5e7eb}.diagnostics{margin:16px auto 0;max-width:1480px;padding:14px}.diagnostics h2{margin-bottom:10px}.diagnostics p{color:#4a566b;font-size:14px}.diagnostics ul{display:grid;gap:8px;list-style:none;margin:0;padding:0}.diagnostics li{border-left:3px solid #b45309;padding:2px 0 2px 10px}.diagnostics span{color:#7c2d12;display:block;font-size:12px;font-weight:800;margin-bottom:3px}@media(max-width:900px){.app-shell{padding:16px}.topbar{align-items:flex-start;flex-direction:column}.actions{justify-content:flex-start}.pane-header{align-items:flex-start;flex-direction:column;gap:10px;padding:10px 14px}.workspace{grid-template-columns:1fr}.editor-pane,.output-pane{min-height:52vh}textarea,.code-editor,.code-editor-shell,.code-editor-highlight,.code-editor-input,.preview-frame,.html-output,.markup-tree{height:calc(52vh - 70px)}.preview-frame.mobile{padding:12px}}