*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background:#fff;color:#333}.container{max-width:1200px;margin:auto;padding:20px}textarea{width:100%;background:#f8f9fa;color:#333;border:1px solid #dee2e6;border-radius:6px;padding:12px;font-family:Fira Code,Consolas,monospace;font-size:14px;resize:vertical}textarea:focus{outline:none;border-color:#06f;box-shadow:0 0 0 3px #0066ff1a}button{background:#06f;color:#fff;border:none;padding:10px 16px;margin-right:8px;margin-bottom:8px;border-radius:6px;cursor:pointer;font-weight:600;transition:all .3s ease}button:hover{background:#0052cc;transform:translateY(-2px);box-shadow:0 4px 8px #0066ff4d}button:active{transform:translateY(0);box-shadow:0 2px 4px #06f3}button:disabled{background:#69f;cursor:not-allowed;opacity:.6}button.secondary{background:#6c757d;color:#fff}button.secondary:hover{background:#5a6268}.error{color:#dc3545;background:#f8d7da;padding:12px;border-radius:6px;margin-top:10px;border:1px solid #f5c6cb}.success{color:#155724;background:#d4edda;padding:12px;border-radius:6px;margin-top:10px;border:1px solid #c3e6cb}nav{background:#fff;padding:14px 20px;border-bottom:2px solid #e0e0e0;display:flex;gap:20px;flex-wrap:wrap}nav a{color:#333;text-decoration:none;font-weight:600;padding:8px 12px;border-radius:4px;transition:all .3s ease}nav a:hover{background:#e8f4f8;color:#06c}nav a.active{background:#06f;color:#fff;border-bottom:3px solid #0052cc}.json-key{color:#d63384}.json-string{color:#06c}.json-number{color:#002eff}.json-boolean{color:green}.json-null{color:gray}.json-output{background:#f8f9fa;padding:16px;border-radius:6px;border:1px solid #dee2e6;font-family:Fira Code,Consolas,monospace;font-size:14px;overflow:auto;white-space:pre;max-height:500px}.diff-added{background-color:#d4edda;color:#155724}.diff-removed{background-color:#f8d7da;color:#721c24}.diff-changed{background-color:#fff3cd;color:#856404}.diff-container{display:grid;grid-template-columns:1fr 1fr;gap:16px}@media (max-width: 768px){.diff-container{grid-template-columns:1fr}nav{flex-direction:column;gap:10px}button{width:100%}}.diff-box{background:#f8f9fa;padding:16px;border-radius:6px;border:1px solid #dee2e6;font-family:Fira Code,Consolas,monospace;font-size:14px;white-space:pre-wrap;overflow:auto}.jsondiffpatch-delta{font-family:monospace;font-size:14px}.jsondiffpatch-added{background:#d4edda;color:#155724;font-weight:700}.jsondiffpatch-deleted{background:#f8d7da;color:#721c24;font-weight:700}.jsondiffpatch-modified{background:#fff3cd;color:#856404;font-weight:700}.jsondiffpatch-property-name{color:#0b3c8c;font-weight:700}.jsondiffpatch-value{color:#333}.jsondiffpatch-movedestination{background:#cfe2ff}@media (max-width: 1024px){.container{padding:15px}}@media (max-width: 640px){body{font-size:14px}button{padding:8px 12px;font-size:13px}textarea{padding:10px;font-size:13px}}