*{margin:0;padding:0;box-sizing:border-box}.single-line-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-md) 0;margin-bottom:var(--spacing-lg);border-bottom:1px solid #e9ecef}.breadcrumb-section{display:flex;align-items:center;font-size:14px;color:var(--secondary-color)}.breadcrumb-section a{color:var(--primary-color);text-decoration:none;transition:color 0.2s ease}.breadcrumb-section a:hover{text-decoration:underline}.separator{margin:0 8px;color:var(--secondary-color)}.current-page{color:var(--secondary-color)}.header-nav{display:flex;gap:var(--spacing-lg);align-items:center}.header-nav a{color:var(--secondary-color);text-decoration:none;font-size:14px;transition:color 0.2s ease}.header-nav a:hover{color:var(--primary-color)}@media (max-width:768px){.single-line-header{flex-direction:column;gap:var(--spacing-sm);text-align:center}.header-nav{gap:var(--spacing-md);flex-wrap:wrap;justify-content:center}}.tool-description-minimal{margin:16px 0 24px 0;max-width:600px}.tool-description-minimal .tool-description-main{font-size:16px;color:#555;text-align:center}:root{--primary-color:#007acc;--secondary-color:#6c757d;--success-color:#28a745;--danger-color:#dc3545;--warning-color:#ffc107;--info-color:#17a2b8;--diff-added:#d4edda;--diff-removed:#f8d7da;--diff-modified:#fff3cd;--diff-unchanged:#ffffff;--font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-mono:'SF Mono',Monaco,'Cascadia Code','Roboto Mono',Consolas,'Courier New',monospace;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-xxl:3rem;--mobile:480px;--tablet:768px;--desktop:1024px;--wide:1200px}body{font-family:var(--font-family);line-height:1.6;color:#333;background-color:#fff;font-size:16px;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tool-container{max-width:1400px;margin:0 auto;padding:20px;min-height:100vh}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.2;margin-bottom:var(--spacing-sm)}h1{font-size:2rem}h2{font-size:1.75rem}h3{font-size:1.5rem}p{margin-bottom:var(--spacing-md)}.simple-header{text-align:right;margin-bottom:40px}.simple-nav{display:flex;gap:24px;justify-content:flex-end}.simple-nav a{color:#666;text-decoration:none;font-size:14px;font-weight:400;transition:color 0.2s ease}.simple-nav a:hover{color:#007acc}.main-content{padding:0}.tool-main{margin-bottom:40px}.tool-header{text-align:left;margin-bottom:40px}.tool-title{font-size:3rem;font-weight:300;color:#333;margin-bottom:8px;letter-spacing:-1px}.tool-subtitle{font-size:1.2rem;color:#666;margin-bottom:16px;font-weight:400}.tool-description{font-size:1rem;color:#777;line-height:1.5;margin-bottom:16px;max-width:600px}.tool-credits{font-size:0.9rem;color:#999}.tool-description-enhanced{margin:24px 0;max-width:800px}.tool-description-main{font-size:1.1rem;color:#555;line-height:1.6;margin-bottom:24px}.tool-features-list{margin:20px 0}.tool-features-list ul{list-style:none;padding:0;margin:0}.tool-features-list li{margin:12px 0;padding:8px 0;font-size:0.95rem;line-height:1.5;color:#666}.use-cases-preview{margin-top:24px;padding:16px;background:#f8f9fa;border-radius:8px;border-left:4px solid var(--primary-color)}.use-cases-preview p{margin:0 0 12px 0;font-weight:600;color:#333}.use-case-tag{display:inline-block;background:var(--primary-color);color:white;padding:4px 12px;border-radius:16px;font-size:0.85rem;margin:4px 8px 4px 0;font-weight:500}.tool-credits a{color:#007acc;text-decoration:none}.tool-credits a:hover{text-decoration:underline}.comparison-container{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:start;margin-bottom:40px}.btn{padding:var(--spacing-sm) var(--spacing-md);border:none;border-radius:4px;font-size:0.9rem;font-weight:500;cursor:pointer;transition:all 0.2s ease;text-decoration:none;display:inline-block;text-align:center;min-width:120px}.btn-primary{background-color:var(--primary-color);color:white}.btn-primary:hover{background-color:#0056b3;transform:translateY(-1px)}.btn-secondary{background-color:var(--secondary-color);color:white}.btn-secondary:hover{background-color:#545b62;transform:translateY(-1px)}.input-panel{display:flex;flex-direction:column}.input-panel textarea{width:100%;min-height:400px;font-family:var(--font-mono);font-size:13px;line-height:1.4;border:2px solid #ccc;border-radius:4px;padding:12px;resize:vertical;background:#fff;transition:border-color 0.2s ease}.input-panel textarea:focus{outline:none;border-color:#007acc;box-shadow:0 0 0 2px rgba(0,122,204,0.1)}.compare-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-top:150px}.compare-button{background:#007acc;color:white;border:none;border-radius:4px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:all 0.2s ease;box-shadow:0 2px 4px rgba(0,0,0,0.1)}.compare-button:hover{background:#0056b3;transform:translateY(-1px);box-shadow:0 4px 8px rgba(0,0,0,0.15)}.compare-button:active{transform:translateY(0)}.compare-options{text-align:center;font-size:14px;color:#666}.compare-options a{color:#007acc;text-decoration:none}.compare-options a:hover{text-decoration:underline}.results-section{margin-top:24px;padding:16px;background:#fff;border-radius:6px;border:1px solid #e9ecef;box-shadow:0 1px 3px rgba(0,0,0,0.1)}.results-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;justify-content:flex-start}.summary-item{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:3px;font-size:12px;font-weight:500;border:1px solid transparent}.summary-item.added{background:#f0fff0;color:#28a745;border-color:#28a745}.summary-item.removed{background:#fff5f5;color:#dc3545;border-color:#dc3545}.summary-item.modified{background:#fffbf0;color:#e67e22;border-color:#ffc107}.summary-item.unchanged{background:#f8f9fa;color:#6c757d;border-color:#dee2e6}.diff-output{background:#fff;border:1px solid #ddd;border-radius:4px;overflow:hidden}.diff-container{display:flex;flex-direction:column;min-height:400px}.diff-main{display:flex;flex:1}.diff-summary{background:#f5f5f5;padding:8px 16px;border-bottom:1px solid #ddd;font-size:14px;font-weight:500;color:#333}.diff-panels{display:flex;flex:1;min-height:300px}.diff-panel{flex:1;display:flex;flex-direction:column}.diff-panel.left-panel{border-right:1px solid #ddd}.diff-header{background:#f8f9fa;padding:8px 12px;border-bottom:1px solid #ddd;font-size:12px;font-weight:600;color:#666;text-transform:uppercase}.diff-content-panel{flex:1;overflow-y:auto;font-family:var(--font-mono);font-size:13px;line-height:1.4}.diff-line{display:flex;align-items:stretch;min-height:20px;border-bottom:1px solid rgba(0,0,0,0.05)}.diff-line:hover{background-color:rgba(0,0,0,0.02)}.line-number{background:#f8f9fa;color:#999;padding:2px 8px;border-right:1px solid #eee;font-size:11px;min-width:40px;text-align:right;user-select:none}.line-content{padding:2px 8px;flex:1;white-space:pre-wrap;word-break:break-word}.line-added{background-color:#d4edda}.line-added .line-number{background-color:#c3e6cb}.line-removed{background-color:#f8d7da}.line-removed .line-number{background-color:#f1b0b7}.line-modified{background-color:#fff3cd}.line-modified .line-number{background-color:#ffeaa7}.line-unchanged{background-color:#fff}.line-empty{background-color:#f8f9fa;opacity:0.5}.line-empty .line-number{background-color:#e9ecef}.diff-sidebar{width:280px;background:#f8f9fa;border-left:1px solid #ddd;display:flex;flex-direction:column}.sidebar-header{padding:12px 16px;border-bottom:1px solid #ddd;background:#e9ecef}.sidebar-header h4{margin:0;font-size:14px;color:#333}.sidebar-items{flex:1;overflow-y:auto}.sidebar-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid #e9ecef;cursor:pointer;transition:background-color 0.2s}.sidebar-item:hover{background-color:#e9ecef}.diff-icon{width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;margin-right:8px}.diff-added .diff-icon{background:#28a745;color:white}.diff-removed .diff-icon{background:#dc3545;color:white}.diff-modified .diff-icon{background:#ffc107;color:#333}.diff-text{flex:1;font-size:13px;color:#333}.diff-type{font-size:11px;color:#666;text-transform:uppercase}.no-differences{padding:20px;text-align:center;color:#666;font-style:italic}@media (max-width:768px){.tool-container{padding:12px}.simple-nav{justify-content:center;margin-bottom:20px}.tool-title{font-size:2.5rem}.comparison-container{grid-template-columns:1fr;gap:20px}.compare-section{margin-top:0;order:3}.input-panel textarea{min-height:250px}.diff-container{flex-direction:column}.diff-panels{flex-direction:column}.diff-panel.left-panel{border-right:none;border-bottom:1px solid #ddd}.diff-sidebar{width:100%;border-left:none;border-top:1px solid #ddd}}.syntax-null{color:#6f42c1;font-weight:600}.syntax-undefined{color:#6c757d;font-style:italic}.syntax-string{color:#28a745}.syntax-number{color:#007bff}.syntax-boolean{color:#fd7e14;font-weight:600}.syntax-array{color:#333}.syntax-object{color:#333}.syntax-key{color:#6f42c1;font-weight:500}.syntax-truncated{color:#6c757d;font-style:italic}.syntax-error{color:#dc3545;font-style:italic;background:rgba(220,53,69,0.1);padding:2px 4px;border-radius:2px}.line-number{color:#999;font-size:11px;min-width:24px;text-align:right;padding-right:6px;border-right:1px solid #e9ecef;margin-right:6px;margin-top:1px}.diff-details{margin-top:4px;padding:4px 6px;background:rgba(0,0,0,0.03);border-radius:2px;font-size:10px;border-top:1px solid rgba(0,0,0,0.1)}.diff-type-change,.diff-length-change,.diff-nested-summary,.diff-property-summary{display:inline-block;margin-right:8px;color:#666;font-style:italic}.diff-property-list{margin-top:2px}.diff-property-item{display:inline-block;margin-right:4px;padding:1px 3px;background:rgba(0,0,0,0.08);border-radius:1px;font-size:9px}.content-section{padding:var(--spacing-xxl) 0;background:#fff;margin-bottom:var(--spacing-md)}.content-section:nth-child(even){background:#f8f9fa}.content-section h2{text-align:center;color:var(--primary-color);margin-bottom:var(--spacing-xl)}.section-intro{font-size:1.1rem;color:#666;line-height:1.6;margin-bottom:var(--spacing-xl);text-align:center;max-width:800px;margin-left:auto;margin-right:auto}.example-code{background:#f8f9fa;border:1px solid #e9ecef;border-radius:6px;padding:12px;margin:12px 0;font-family:'Monaco','Menlo','Ubuntu Mono',monospace}.example-code strong{display:block;margin-bottom:8px;color:#495057;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif}.example-code pre{margin:0;padding:0;background:none;border:none;font-size:0.85rem;line-height:1.4;color:#495057}.example-code code{background:none;padding:0;color:inherit}.content-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-xl)}.content-item{text-align:center;padding:var(--spacing-lg)}.content-item h3{color:var(--primary-color);margin-bottom:var(--spacing-md)}.examples-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}.example-item{background:#fff;padding:var(--spacing-lg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);border-left:4px solid var(--primary-color)}.use-cases-compact{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.use-case-compact{background:#fff;padding:var(--spacing-lg);border-radius:8px;border-left:4px solid var(--primary-color);box-shadow:0 1px 3px rgba(0,0,0,0.1)}.use-case-compact h3{margin-bottom:var(--spacing-sm);color:#333;font-size:1.1rem}.use-case-compact p{margin-bottom:var(--spacing-sm);color:#666;line-height:1.5}.use-case-compact code{display:block;background:#f8f9fa;padding:var(--spacing-sm);border-radius:4px;font-family:var(--font-mono);font-size:0.85rem;color:#333;border:1px solid #e9ecef;word-break:break-all}.features-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);margin-top:var(--spacing-xl)}.feature-item{background:#fff;padding:var(--spacing-lg);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);border-left:4px solid var(--primary-color)}.feature-item h3{color:var(--text-color);margin-bottom:var(--spacing-md);font-size:1.2rem}.feature-item p{line-height:1.6;color:var(--text-secondary)}.faq-list{max-width:800px;margin:0 auto}.faq-item{background:#fff;margin-bottom:var(--spacing-md);border-radius:8px;box-shadow:0 2px 4px rgba(0,0,0,0.1);overflow:hidden}.faq-item summary{padding:var(--spacing-lg);cursor:pointer;font-weight:600;color:var(--primary-color);background:#f8f9fa;border-bottom:1px solid #e9ecef;transition:background-color 0.2s ease}.faq-item summary:hover{background:#e9ecef}.faq-item p{padding:var(--spacing-lg);margin:0}.site-footer{background:#343a40;color:#fff;padding:var(--spacing-xl) 0;text-align:center}.footer-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md)}.footer-nav{display:flex;flex-wrap:wrap;gap:var(--spacing-md);justify-content:center}.footer-nav a{color:#adb5bd;text-decoration:none;font-size:0.9rem;transition:color 0.2s ease}.footer-nav a:hover{color:#fff}.ad-container{margin:var(--spacing-xl) 0;text-align:center;min-height:100px;background:#f8f9fa;border:1px dashed #dee2e6;border-radius:4px;display:flex;align-items:center;justify-content:center;color:var(--secondary-color);font-size:0.9rem}.ad-container::before{content:"Advertisement Space"}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,0.9);display:flex;align-items:center;justify-content:center;z-index:9999}.loading-spinner{padding:var(--spacing-lg);background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.15);font-weight:600;color:var(--primary-color)}@media (min-width:768px){.site-title{flex-direction:row;align-items:baseline;gap:var(--spacing-md)}.comparison-panels{grid-template-columns:1fr 1fr}.content-grid{grid-template-columns:repeat(3,1fr)}.examples-grid{grid-template-columns:repeat(3,1fr)}.use-cases-compact{grid-template-columns:repeat(2,1fr)}.features-grid{grid-template-columns:repeat(2,1fr)}.footer-content{flex-direction:row;justify-content:space-between}.panel textarea{min-height:400px}}@media (min-width:1024px){.container{padding:0 var(--spacing-lg)}.tool-controls{justify-content:flex-start}.results-summary{justify-content:flex-start}}@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important}}@media (prefers-contrast:high){:root{--diff-added:#90ee90;--diff-removed:#ffb6c1;--diff-modified:#fffacd}}@media print{.site-header,.site-footer,.ad-container,.tool-controls{display:none}.diff-tool,.results-section{box-shadow:none;border:1px solid #000}}