*{box-sizing:border-box}body{margin:0;font-family:system-ui,sans-serif}.app{flex-direction:column;height:100vh;display:flex}header{border-bottom:1px solid #ddd;padding:8px 16px}h1{margin:0;font-size:18px}h2{color:#555;margin:0 0 8px;font-size:14px}main{flex:1;grid-template-columns:1fr 1fr;min-height:0;display:grid}.pane{padding:12px 16px;overflow:auto}.pane+.pane{border-left:1px solid #ddd}.editor-pane{flex-direction:column;display:flex}.editor-pane .muted{margin:0 0 8px}.editor{resize:none;tab-size:4;border:1px solid #ccc;border-radius:4px;flex:1;width:100%;min-height:240px;padding:8px;font-family:ui-monospace,Menlo,monospace;font-size:14px;line-height:1.5}.editor:focus{border-color:#888;outline:none}code{background:#f2f2f2;border-radius:3px;padding:0 3px;font-family:ui-monospace,Menlo,monospace}button{font:inherit;cursor:pointer;padding:2px 8px;font-size:12px}pre{margin:0;font-family:ui-monospace,Menlo,monospace;font-size:14px}.muted{color:#888;font-size:13px}.toolbar{border-top:1px solid #ddd;padding:8px 16px}@media (width<=700px){main{grid-template-columns:1fr}.pane+.pane{border-top:1px solid #ddd;border-left:0}}