.app{min-height:100vh;display:flex;flex-direction:column}.header{background:#1a1a1a;color:#fff;padding:1rem 2rem}.header h1{margin:0;font-size:1.5rem}.header p{margin:.25rem 0 0;opacity:.7;font-size:.875rem}.container{flex:1;display:grid;grid-template-columns:1fr 400px;gap:1rem;padding:1rem;max-width:1400px;margin:0 auto;width:100%;overflow:visible}@media(max-width:1024px){.container{grid-template-columns:1fr}}.toolbar{display:flex;gap:.25rem;padding:.5rem;background:#f0f0f0;border-radius:8px 8px 0 0;border:1px solid #ddd;border-bottom:none}.toolbar button{padding:.5rem .75rem;border:none;background:#fff;border-radius:4px;cursor:pointer;font-size:.875rem;min-width:32px}.toolbar button:hover{background:#e0e0e0}.toolbar .separator{width:1px;background:#ddd;margin:0 .5rem}.editor-section{display:flex;flex-direction:column;overflow:visible}.editor-wrapper{flex:1;background:#fff;border:1px solid #ddd;border-radius:0 0 8px 8px;min-height:400px;overflow:hidden}.editor-wrapper .ob-table-handles{overflow:visible}.editor-wrapper .openblock-editor{min-height:400px}.json-section{background:#1a1a1a;color:#f0f0f0;border-radius:8px;padding:1rem;overflow:auto;max-height:calc(100vh - 200px)}.json-section h3{margin:0 0 1rem;font-size:.875rem;text-transform:uppercase;letter-spacing:.05em;opacity:.7}.json-section pre{margin:0;font-size:.75rem;line-height:1.5;white-space:pre-wrap;word-break:break-all}.footer{background:#f0f0f0;padding:1rem 2rem;text-align:center;font-size:.875rem;color:#666}.footer code{background:#ddd;padding:.125rem .375rem;border-radius:3px;font-size:.8rem}