.content-area{position:relative;min-height:400px}.editor-wrapper,.output-wrapper{position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;transition:opacity .3s,transform .3s;display:flex;flex-direction:column}.editor-wrapper{z-index:1}.output-wrapper{z-index:2;opacity:0;pointer-events:none}.output-wrapper.active{opacity:1;pointer-events:auto}.editor-wrapper.hidden{opacity:0;pointer-events:none}.editor-container{display:flex;border:1px solid var(--border-color);border-radius:var(--border-radius);overflow:hidden;height:500px;position:relative;background:var(--bg-primary)}.line-numbers{background-color:var(--bg-tertiary);color:var(--text-muted);padding:10px 8px;text-align:right;font-family:var(--font-mono);font-size:14px;line-height:1.5;user-select:none;min-width:50px;border-right:1px solid var(--border-color);overflow-y:hidden;overflow-x:hidden;position:sticky;left:0;z-index:1}.line-number{line-height:1.5;height:21px;display:flex;justify-content:flex-end;align-items:center}.editor-content{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.json-editor,.json-output{flex:1;padding:10px 15px;font-family:var(--font-mono);font-size:14px;line-height:1.5;overflow-x:auto;overflow-y:auto;white-space:pre;word-wrap:normal;border:none;outline:0;background-color:transparent;color:var(--text-primary);resize:none}.json-output[contenteditable=true]{cursor:text;white-space:pre;word-break:normal;position:relative}.json-output[contenteditable=true]:focus{background-color:var(--bg-secondary);border-left:2px solid var(--primary-color)}.json-editor::-webkit-scrollbar,.json-output::-webkit-scrollbar{width:10px;height:10px}.json-editor::-webkit-scrollbar-track,.json-output::-webkit-scrollbar-track{background:var(--bg-secondary)}.json-editor::-webkit-scrollbar-thumb,.json-output::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:5px}.json-editor::-webkit-scrollbar-thumb:hover,.json-output::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}@media (max-width:768px){.editor-container{height:400px}.line-numbers{min-width:40px;font-size:12px}.json-editor,.json-output{font-size:12px;padding:8px 10px}.line-number{height:18px}}.error-line{background-color:rgba(255,0,0,.1);display:inline-block;width:100%;border-left:3px solid #f44336;padding-left:5px;animation:.5s ease-in-out errorPulse}@keyframes errorPulse{0%,100%{background-color:rgba(255,0,0,.1)}50%{background-color:rgba(255,0,0,.25)}}.line-number.error-line-number{background-color:#f44336;color:#fff;font-weight:700;padding:0 4px;border-radius:2px}.error-overlay{position:absolute;left:0;right:0;background-color:rgba(244,67,54,.15);border-left:3px solid #f44336;pointer-events:none}.error-marker{display:inline-block;width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:7px solid #f44336;position:absolute;animation:1s infinite errorBlink}@keyframes errorBlink{0%,100%{opacity:1}50%{opacity:.3}}.unformatted-suffix{color:var(--text-muted);opacity:.9}.error-caret{position:absolute;width:2px;background-color:#f44336;animation:1s infinite errorBlink;z-index:3}