*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.5;color:#1a1a1a;background-color:#fafafa;min-height:100vh;display:flex;flex-direction:column}a{color:#3b82f6;text-decoration:none;transition:color 150ms ease}a:hover{color:#2563eb}img{max-width:100%;height:auto}button,input,textarea,select{font-family:inherit;font-size:inherit}code{font-family:"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,monospace;font-size:.9em;background:#f5f5f5;padding:.125em .375em;border-radius:4px}.container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}.main{flex:1}.header{background:#fff;border-bottom:1px solid #e5e5e5;padding:1rem 0;position:sticky;top:0;z-index:100}.nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.logo{display:flex;align-items:center;gap:.5rem;color:#1a1a1a;font-weight:600;font-size:1.125rem}.logo:hover{color:#1a1a1a}.logo-icon{width:32px;height:32px;object-fit:contain}.nav-links{display:flex;align-items:center;gap:.25rem;list-style:none}.nav-link{padding:.5rem 1rem;color:#666;border-radius:8px;transition:all 150ms ease}.nav-link:hover{color:#1a1a1a;background:#f5f5f5}.nav-link.active{color:#3b82f6;background:#dbeafe}.footer{background:#fff;border-top:1px solid #e5e5e5;padding:2rem 0;margin-top:4rem}.footer-content{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}.footer-brand{display:flex;align-items:center;gap:.5rem;font-weight:600}.footer-logo{width:24px;height:24px;object-fit:contain}.footer-nav{display:flex;gap:1.5rem}.footer-nav a{color:#666}.footer-nav a:hover{color:#3b82f6}.footer-copy{color:#999;font-size:.875rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1.5rem;font-weight:500;border-radius:8px;border:1px solid rgba(0,0,0,0);cursor:pointer;transition:all 150ms ease;white-space:nowrap}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:#3b82f6;color:#fff}.btn-primary:hover:not(:disabled){background:#2563eb}.btn-ghost{background:rgba(0,0,0,0);color:#666;border-color:#e5e5e5}.btn-ghost:hover:not(:disabled){background:#f5f5f5;border-color:#e5e5e5}.btn-sm{padding:.25rem .5rem;font-size:.875rem}.btn-icon{font-size:1.1em}.hero{padding:4rem 0 2rem;text-align:center}.hero-logo{width:120px;height:120px;margin-bottom:1.5rem;animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.hero-title{font-size:2.5rem;font-weight:700;line-height:1.25;margin-bottom:1rem}@media(max-width: 768px){.hero-title{font-size:2rem}}.hero-subtitle{font-size:1.125rem;color:#666;max-width:600px;margin:0 auto}.page-header{padding:3rem 0;text-align:center;border-bottom:1px solid #e5e5e5;background:#fff}.page-title{font-size:2rem;font-weight:700;margin-bottom:.5rem}.page-subtitle{font-size:1.125rem;color:#666;max-width:600px;margin:0 auto}.diff-section{padding:3rem 0}.type-selector{display:flex;justify-content:center;gap:.5rem;margin-bottom:2rem}.type-option{cursor:pointer}.type-option input{display:none}.type-option input:checked+.type-label{background:#3b82f6;color:#fff;border-color:#3b82f6}.type-label{display:block;padding:.5rem 1.5rem;border:1px solid #e5e5e5;border-radius:8px;transition:all 150ms ease}.type-label:hover{border-color:#3b82f6}.editors-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem}@media(max-width: 768px){.editors-grid{grid-template-columns:1fr}}.editor{background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden}.editor-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#f5f5f5;border-bottom:1px solid #e5e5e5}.editor-label{font-weight:500;font-size:.875rem;color:#666}.editor-actions{display:flex;gap:.25rem}.editor-input{width:100%;min-height:300px;padding:1rem;border:none;background:rgba(0,0,0,0);font-family:"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,monospace;font-size:.875rem;line-height:1.75;resize:vertical}.editor-input:focus{outline:none}.editor-input::placeholder{color:#999}.diff-controls{display:flex;justify-content:center;gap:1rem;margin-bottom:2rem}.json-options,.array-options{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1.5rem}.checkbox-option{display:flex;align-items:center;gap:.5rem;cursor:pointer;color:#666}.checkbox-option input[type=checkbox]{width:18px;height:18px;accent-color:#3b82f6}.diff-result{background:#fff;border:1px solid #e5e5e5;border-radius:12px;overflow:hidden}.diff-result.hidden{display:none}.result-header{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.5rem;background:#f5f5f5;border-bottom:1px solid #e5e5e5}.result-title{font-size:1.125rem;font-weight:600}.result-stats{display:flex;gap:1rem;font-size:.875rem}.result-stats .stat-add{color:#22c55e}.result-stats .stat-del{color:#ef4444}.result-content{padding:1.5rem;font-family:"SF Mono",Monaco,"Cascadia Code","Roboto Mono",Consolas,monospace;font-size:.875rem;line-height:1.75;overflow-x:auto}.diff-line{display:block;padding:2px .5rem;margin:0 -0.5rem}.diff-line.diff-add{background:#dcfce7;border-left:3px solid #22c55e}.diff-line.diff-del{background:#fee2e2;border-left:3px solid #ef4444}.diff-line.diff-equal{border-left:3px solid rgba(0,0,0,0)}.diff-char-add{background:#dcfce7;color:#15803d;padding:1px 0}.diff-char-del{background:#fee2e2;color:#dc2626;text-decoration:line-through;padding:1px 0}.identical-message{text-align:center;padding:2rem;color:#666}.identical-message .check-icon{font-size:2rem;color:#22c55e;margin-bottom:.5rem}.features-section{padding:4rem 0;background:#fff}.section-title{font-size:1.5rem;font-weight:700;text-align:center;margin-bottom:3rem}.features-grid{display:grid;grid-template-columns:repeat(4, 1fr);gap:1.5rem}@media(max-width: 1024px){.features-grid{grid-template-columns:repeat(2, 1fr)}}@media(max-width: 640px){.features-grid{grid-template-columns:1fr}}.feature-card{text-align:center;padding:1.5rem}.feature-icon{font-size:2rem;margin-bottom:1rem}.feature-title{font-size:1.125rem;font-weight:600;margin-bottom:.5rem}.feature-description{color:#666;font-size:.875rem}.tools-section{padding:4rem 0}.tools-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem}@media(max-width: 768px){.tools-grid{grid-template-columns:1fr}}.tool-card{display:block;padding:2rem;background:#fff;border:1px solid #e5e5e5;border-radius:12px;text-align:center;color:#1a1a1a;transition:all 200ms ease}.tool-card:hover{border-color:#3b82f6;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transform:translateY(-2px);color:#1a1a1a}.tool-icon{font-size:2.5rem;margin-bottom:1rem}.tool-title{font-size:1.25rem;font-weight:600;margin-bottom:.5rem}.tool-desc{color:#666;font-size:.875rem}.info-section{padding:4rem 0;background:#fff}.info-content{max-width:800px;margin:0 auto}.info-content h2{font-size:1.5rem;font-weight:700;margin-bottom:1rem;margin-top:3rem}.info-content h2:first-child{margin-top:0}.info-content h3{font-size:1.125rem;font-weight:600;margin-bottom:.5rem;margin-top:2rem}.info-content p{color:#666;line-height:1.75;margin-bottom:1rem}.info-content ul{margin-left:2rem;margin-bottom:1rem}.info-content ul li{color:#666;margin-bottom:.25rem}.highlight-add{background:#dcfce7;color:#15803d;padding:2px 6px;border-radius:4px}.highlight-del{background:#fee2e2;color:#dc2626;padding:2px 6px;border-radius:4px}.about-section{padding:4rem 0}.about-content{max-width:800px;margin:0 auto}.about-content h2{font-size:1.5rem;font-weight:700;margin-bottom:1rem;margin-top:3rem}.about-content h2:first-child{margin-top:0}.about-content p{color:#666;line-height:1.75;margin-bottom:1rem}.about-features{display:grid;grid-template-columns:repeat(3, 1fr);gap:1.5rem;margin:2rem 0}@media(max-width: 768px){.about-features{grid-template-columns:1fr}}.about-feature{padding:1.5rem;background:#f5f5f5;border-radius:12px}.about-feature h3{font-size:1.125rem;font-weight:600;margin-bottom:.5rem;color:#1a1a1a}.about-feature p{font-size:.875rem;margin-bottom:0}.error-section{padding:4rem 0;text-align:center}.error-content{max-width:500px;margin:0 auto}.error-code{font-size:6rem;font-weight:700;color:#999;line-height:1;margin-bottom:1rem}.error-title{font-size:1.5rem;margin-bottom:1rem}.error-message{color:#666;margin-bottom:2rem}.error-actions{display:flex;justify-content:center;gap:1rem}.hidden{display:none !important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}