*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{color:#000;background:#fff;max-width:1024px;margin:0 auto;padding:15px;font-family:monospace;font-size:1rem;line-height:1.5}h1{color:#000;background:linear-gradient(145deg,rgba(81,255,0,0),rgba(81,255,0,.4));border-bottom:4px solid #51ff00;margin:20px 0 10px;padding-bottom:4px;font-family:monospace;font-size:2rem;font-weight:700}h2{color:#000;background:linear-gradient(145deg,rgba(81,255,0,0),rgba(81,255,0,.4));border-bottom:4px solid #51ff00;margin:20px 0 10px;padding-bottom:4px;font-family:monospace;font-size:1.5rem;font-style:italic;font-weight:700}h3{color:#000;margin:15px 0 8px;font-family:monospace;font-size:1rem;font-weight:700}a{color:#00e;text-decoration:underline}a:visited,a:hover{color:#551a8b}p{color:#000;margin:0 0 10px}p:last-child{margin-bottom:0}.tag-green{color:#000;background-color:#51ff00;border-radius:2px;margin-right:8px;padding:2px 8px;font-size:.75em;font-weight:700;display:inline-block}.divider{border-bottom:2px solid #000;margin:20px 0}.site-header{color:#000;background-color:#fff;border-bottom:4px solid #000;margin-bottom:20px;padding:15px 0}.header-content{max-width:1024px;margin:0 auto;padding:0}.site-title{color:#000;margin:0 0 10px;font-family:monospace;font-size:2rem;font-weight:700}.main-nav{flex-wrap:wrap;gap:20px;display:flex}.main-nav a{color:#00e;font-size:1rem;text-decoration:underline}.main-nav a:visited,.main-nav a:hover{color:#551a8b}.json-diff-container{padding:20px 0}.json-diff-title{text-align:center;margin-bottom:20px}.json-diff-subtitle{text-align:center;color:#000;margin-bottom:30px}.input-section{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px;display:grid}.input-column{flex-direction:column;display:flex}.input-label{color:#000;justify-content:space-between;align-items:center;margin-bottom:8px;font-weight:700;display:flex}.input-textarea{color:#000;resize:vertical;background:#fff;border:2px solid #000;width:100%;min-height:200px;padding:12px;font-family:monospace;font-size:.9rem}.input-textarea:focus{border:2px solid #51ff00;outline:none;box-shadow:0 0 0 2px rgba(81,255,0,.2)}button{color:#000;cursor:pointer;background:#fff;border:2px solid #000;padding:10px 20px;font-family:monospace;font-size:1rem;font-weight:700;transition:all .2s}button:hover{background:#51ff00;border-color:#000}button:active{transform:translateY(1px)}button:disabled{opacity:.5;cursor:not-allowed}.copy-button{padding:4px 8px;font-size:.85rem}.button-group{justify-content:center;gap:10px;margin:20px 0;display:flex}.results-section{margin-top:30px}.results-grid{grid-template-columns:1fr 1fr;gap:20px;display:grid}.result-panel{background:#fff;border:2px solid #000}.result-header{background:#f2f2f2;border-bottom:2px solid #000;padding:10px;font-weight:700}.result-content{max-height:500px;padding:10px;font-family:monospace;font-size:.9rem;overflow-y:auto}.diff-line{white-space:pre-wrap;word-break:break-word;border-left:3px solid transparent;margin:1px 0;padding:4px 8px}.diff-line.added{color:#000;background-color:#d4ffd4;border-left-color:#51ff00;font-weight:700}.diff-line.removed{color:#000;background-color:#ffd4d4;border-left-color:red;font-weight:700}.diff-line.modified{color:#000;background-color:#d4e5ff;border-left-color:#00e;font-weight:700}.diff-line.unchanged{color:#666;background-color:#fff}.diff-line.context{color:#000;background-color:#f9f9f9}.collapsible-header{cursor:pointer;background:#f2f2f2;border:1px solid #000;align-items:center;gap:8px;margin:4px 0;padding:8px;display:flex}.collapsible-header:hover{background:rgba(81,255,0,.2)}.collapsible-icon{font-weight:700}.collapsible-content{padding-left:20px}.alert{background:#f2f2f2;border:2px solid #000;margin:20px 0;padding:12px}.alert.info{background:#e6e6ff;border-color:#00e}.alert.error{background:#ffe6e6;border-color:red}.alert.success{background:#f0ffe6;border-color:#51ff00}@media (max-width:768px){body{padding:10px}h1{font-size:1.5rem}h2{font-size:1.2rem}.site-title{font-size:1.5rem}.main-nav{gap:10px;font-size:.9rem}.input-section,.results-grid{grid-template-columns:1fr}.button-group{flex-direction:column}button{width:100%}}