:root{--primary-color: #4f46e5;--primary-light: #eef2ff;--success-color: #10b981;--error-color: #ef4444;--warning-color: #f59e0b}pre{border-radius:8px;margin:1rem 0;overflow-x:auto}code{font-family:Monaco,Menlo,Ubuntu Mono,monospace}.json-editor{position:relative;border:2px solid #e5e7eb;border-radius:8px;overflow:hidden;transition:border-color .3s ease}.json-editor:focus-within{border-color:var(--primary-color)}.json-editor textarea{width:100%;min-height:200px;padding:1rem;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;border:none;outline:none;resize:vertical;background-color:#f9fafb}.json-editor.valid{border-color:var(--success-color)}.json-editor.invalid{border-color:var(--error-color)}.validation-status{padding:.75rem 1rem;border-radius:6px;margin-top:.5rem;font-size:14px;display:flex;align-items:center;gap:.5rem}.validation-status.valid{background-color:#d1fae5;color:#065f46}.validation-status.invalid{background-color:#fee2e2;color:#991b1b}.json-tree{font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.8;padding:1rem;background-color:#f9fafb;border-radius:8px;overflow-x:auto}.json-tree .key{color:#059669;font-weight:500}.json-tree .string{color:#dc2626}.json-tree .number{color:#2563eb}.json-tree .boolean{color:#9333ea}.json-tree .null{color:#6b7280;font-style:italic}.json-tree .bracket{color:#4b5563}.json-tree .toggle{display:inline-block;cursor:pointer;-webkit-user-select:none;user-select:none;margin-right:.25rem;transition:transform .2s ease}.json-tree .toggle.collapsed{transform:rotate(-90deg)}.json-tree .children{margin-left:1.5rem;transition:all .3s ease}.json-tree .children.collapsed{display:none}.sidebar{position:fixed;top:4rem;left:0;width:280px;height:calc(100vh - 4rem);overflow-y:auto;background-color:#f9fafb;border-right:1px solid #e5e7eb;padding:1.5rem 0;transition:transform .3s ease}.sidebar.collapsed{transform:translate(-280px)}.sidebar-section{margin-bottom:2rem}.sidebar-section-title{padding:0 1.5rem;margin-bottom:.5rem;font-size:12px;font-weight:600;text-transform:uppercase;color:#6b7280;letter-spacing:.05em}.sidebar-link{display:block;padding:.5rem 1.5rem;color:#374151;text-decoration:none;transition:all .2s ease;border-left:3px solid transparent}.sidebar-link:hover{background-color:#e5e7eb;color:#111827}.sidebar-link.active{background-color:var(--primary-light);color:var(--primary-color);border-left-color:var(--primary-color);font-weight:500}.main-content{margin-left:280px;padding:2rem 3rem;max-width:1200px}.main-content.expanded{margin-left:0}.card{background-color:#fff;border-radius:12px;box-shadow:0 1px 3px #0000001a;padding:1.5rem;margin-bottom:1.5rem;transition:box-shadow .3s ease}.card:hover{box-shadow:0 4px 6px #0000001a}.exercise{background-color:#f0fdf4;border:2px solid #86efac;border-radius:12px;padding:1.5rem;margin:2rem 0}.exercise-title{font-weight:600;color:#166534;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.exercise-options{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}.exercise-option{padding:.75rem 1rem;border:2px solid #d1d5db;border-radius:8px;cursor:pointer;transition:all .2s ease}.exercise-option:hover,.exercise-option.selected{border-color:var(--primary-color);background-color:var(--primary-light)}.exercise-option.correct{border-color:var(--success-color);background-color:#d1fae5}.exercise-option.incorrect{border-color:var(--error-color);background-color:#fee2e2}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:8px;font-weight:500;cursor:pointer;transition:all .2s ease;border:none;font-size:14px}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#4338ca;transform:translateY(-1px);box-shadow:0 4px 6px #4f46e54d}.btn-secondary{background-color:#f3f4f6;color:#374151}.btn-secondary:hover{background-color:#e5e7eb}.btn-success{background-color:var(--success-color);color:#fff}.btn-success:hover{background-color:#059669}.toolbar{display:flex;gap:.5rem;padding:.75rem;background-color:#f9fafb;border-bottom:1px solid #e5e7eb}.toolbar button{padding:.5rem .75rem;border:1px solid #d1d5db;border-radius:6px;background-color:#fff;cursor:pointer;font-size:13px;transition:all .2s ease}.toolbar button:hover{background-color:#f3f4f6;border-color:#9ca3af}@media (max-width: 768px){.sidebar{transform:translate(-280px);z-index:40}.sidebar.open{transform:translate(0)}.main-content{margin-left:0;padding:1.5rem}.json-tree{font-size:12px}}@media (prefers-color-scheme: dark){:root{--bg-primary: #111827;--bg-secondary: #1f2937;--text-primary: #f9fafb;--text-secondary: #d1d5db}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .3s ease}.highlight{background-color:#fef3c7;padding:.125rem .25rem;border-radius:4px}.tooltip{position:relative;display:inline-block}.tooltip-content{visibility:hidden;position:absolute;bottom:100%;left:50%;transform:translate(-50%);background-color:#374151;color:#fff;padding:.5rem .75rem;border-radius:6px;font-size:12px;white-space:nowrap;opacity:0;transition:all .2s ease;margin-bottom:.5rem}.tooltip:hover .tooltip-content{visibility:visible;opacity:1}.progress-bar{height:4px;background-color:#e5e7eb;border-radius:2px;overflow:hidden}.progress-bar-fill{height:100%;background-color:var(--primary-color);transition:width .3s ease}.badge{display:inline-flex;align-items:center;padding:.25rem .75rem;border-radius:9999px;font-size:12px;font-weight:500}.badge-primary{background-color:var(--primary-light);color:var(--primary-color)}.badge-success{background-color:#d1fae5;color:#065f46}.copy-button{position:absolute;top:.5rem;right:.5rem;padding:.375rem .75rem;background-color:#ffffffe6;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;transition:all .2s ease;opacity:0}pre:hover .copy-button{opacity:1}.copy-button:hover{background-color:#fff;border-color:#9ca3af}.copy-button.copied{background-color:var(--success-color);color:#fff;border-color:var(--success-color)}