body{margin:0;padding:0;font-family:Arial,sans-serif}.container{display:flex;min-height:100vh}.navbar{width:250px;background-color:#333;color:#fff;padding:20px}.main-content{flex:1 1;padding:20px;background-color:#f4f4f4}.nav-item{padding:10px;margin:5px 0;cursor:pointer}.nav-item:hover{background-color:#444;border-radius:5px}.html-editor-container{padding:65px 20px;display:none;pointer-events:none;transition:opacity .2s ease-in-out;&.visible{display:block;pointer-events:auto}}.json-editor-container{height:100%;flex:1 1;padding:20px;display:grid;grid-template-columns:1fr 3fr 1fr;overflow:hidden}.markdown-editor-container{padding:20px;opacity:0;pointer-events:none;transition:opacity .2s ease-in-out;&.visible{opacity:1;pointer-events:auto}}.display-container{height:800px;overflow:scroll;border:1px solid #d9d9d9;margin:0 10px;border-radius:6px;display:flex;flex-direction:column;align-items:center}.component-editor{height:100%;textarea{width:100%;height:500px}}