*{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;border-bottom:1px solid var(--border-subtle)}.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 cubic-bezier(0.4,0,0.2,1)}.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 cubic-bezier(0.4,0,0.2,1);position:relative}.header-nav a::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:2px;background:var(--primary-color);transform:scaleX(0);transform-origin:right;transition:transform 0.25s cubic-bezier(0.4,0,0.2,1)}.header-nav a:hover{color:var(--primary-color)}.header-nav a:hover::after{transform:scaleX(1);transform-origin:left}.sub-header{display:flex;flex-wrap:wrap;gap:6px 24px;align-items:center;padding:10px 0;margin-bottom:var(--spacing-lg);border-bottom:1px solid var(--border-subtle);font-size:var(--text-sm)}.sub-header-group{display:flex;align-items:center;gap:4px}.sub-header-label{color:var(--gray-400);font-weight:600;text-transform:uppercase;font-size:var(--text-xs);letter-spacing:0.5px;margin-right:4px;white-space:nowrap}.sub-header-group a{color:var(--gray-600);text-decoration:none;padding:3px 8px;border-radius:var(--radius-sm);transition:all 0.15s cubic-bezier(0.4,0,0.2,1);white-space:nowrap}.sub-header-group a:hover{color:var(--primary-color);background:var(--primary-subtle)}.sub-header-group a.active{color:var(--primary-color);background:var(--primary-light);font-weight:600}.sub-header-divider{width:1px;height:16px;background:var(--gray-300)}@media (max-width:768px){.single-line-header{flex-direction:column;gap:var(--spacing-sm);text-align:center}.header-nav{gap:var(--spacing-sm);flex-wrap:wrap;justify-content:center}.header-nav a{min-height:44px;display:inline-flex;align-items:center;padding:8px 12px}.sub-header{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;gap:4px 12px;padding-bottom:12px}.sub-header::-webkit-scrollbar{display:none}.sub-header-divider{display:none}.sub-header-group a{min-height:44px;display:inline-flex;align-items:center;padding:8px 10px}.footer-top{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:1 / -1}.footer-bottom{flex-direction:column;gap:12px;text-align:center}.footer-col a{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}.footer-col li{margin-bottom:0}.footer-bottom a{display:inline-flex;align-items:center;min-height:44px;padding:8px 4px}}@media (max-width:480px){.footer-top{grid-template-columns:1fr}}.privacy-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--badge-bg);color:var(--badge-text);border:1px solid var(--badge-border);border-radius:var(--radius-lg);font-size:var(--text-sm);font-weight:500;margin-top:12px;line-height:1}:root{--primary-color:#2563eb;--primary-hover:#1d4ed8;--primary-light:#dbeafe;--primary-subtle:#eff6ff;--accent-color:#f59e0b;--secondary-color:#6c757d;--success-color:#28a745;--danger-color:#dc3545;--warning-color:#ffc107;--info-color:#17a2b8;--gray-50:#fafafa;--gray-100:#f5f5f5;--gray-200:#e5e5e5;--gray-300:#d4d4d4;--gray-400:#a3a3a3;--gray-500:#737373;--gray-600:#525252;--gray-700:#404040;--gray-800:#262626;--gray-900:#171717;--diff-added:#dcfce7;--diff-removed:#fef2f2;--diff-modified:#fefce8;--diff-unchanged:#ffffff;--diff-added-strong:#bbf7d0;--diff-removed-strong:#fecaca;--diff-modified-strong:#fef08a;--diff-added-text:#166534;--diff-removed-text:#991b1b;--diff-modified-text:#854d0e;--bg-primary:#ffffff;--bg-secondary:var(--gray-50);--bg-elevated:#ffffff;--bg-inset:var(--gray-100);--border-default:var(--gray-200);--border-subtle:var(--gray-100);--shadow-xs:0 1px 2px rgba(0,0,0,0.04);--shadow-sm:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -2px rgba(0,0,0,0.05);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.08),0 4px 6px -4px rgba(0,0,0,0.04);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.08),0 8px 10px -6px rgba(0,0,0,0.04);--shadow-ring:0 0 0 1px rgba(0,0,0,0.05);--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;--text-xs:12px;--text-sm:14px;--text-base:15px;--text-lg:18px;--text-xl:24px;--text-2xl:36px;--text-3xl:48px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--spacing-xs:0.25rem;--spacing-sm:0.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2.5rem;--spacing-xxl:4rem;--spacing-3xl:6rem;--mobile:480px;--tablet:768px;--desktop:1024px;--wide:1200px;--text-primary:var(--gray-700);--text-heading:var(--gray-900);--text-muted:var(--gray-500);--text-faint:var(--gray-400);--surface-primary:#ffffff;--surface-card:#ffffff;--surface-inset:var(--gray-50);--surface-overlay:rgba(255,255,255,0.9);--badge-bg:#ecfdf5;--badge-text:#065f46;--badge-border:#a7f3d0;--error-bg:#fff5f5;--error-border:#f8d7da;--gotcha-bg:#fffbeb;--syntax-null:#6f42c1;--syntax-string:#28a745;--syntax-number:#007bff;--syntax-boolean:#fd7e14;--syntax-default:#333;--syntax-key:#6f42c1;--syntax-muted:#6c757d;--focus-ring:rgba(37,99,235,0.1);--focus-ring-shadow:rgba(37,99,235,0.2);--focus-ring-strong:rgba(37,99,235,0.3)}[data-theme="dark"]{--primary-color:#60a5fa;--primary-hover:#93bbfd;--primary-light:rgba(96,165,250,0.15);--primary-subtle:rgba(96,165,250,0.08);--accent-color:#fbbf24;--secondary-color:#9ca3af;--success-color:#34d399;--danger-color:#f87171;--warning-color:#fbbf24;--info-color:#38bdf8;--gray-50:#1a1d27;--gray-100:#1e2130;--gray-200:#2a2d3a;--gray-300:#3b3f50;--gray-400:#6b7083;--gray-500:#9ca1b0;--gray-600:#c4c8d4;--gray-700:#d8dbe5;--gray-800:#e8eaf0;--gray-900:#f1f2f6;--diff-added:rgba(34,197,94,0.15);--diff-removed:rgba(239,68,68,0.15);--diff-modified:rgba(234,179,8,0.15);--diff-unchanged:var(--surface-primary);--diff-added-strong:rgba(34,197,94,0.25);--diff-removed-strong:rgba(239,68,68,0.25);--diff-modified-strong:rgba(234,179,8,0.25);--diff-added-text:#86efac;--diff-removed-text:#fca5a5;--diff-modified-text:#fde68a;--bg-primary:#0f1117;--bg-secondary:#1a1d27;--bg-elevated:#1e2130;--bg-inset:#161822;--border-default:#2a2d3a;--border-subtle:#1e2130;--shadow-xs:0 1px 2px rgba(0,0,0,0.3);--shadow-sm:0 1px 3px rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3);--shadow-md:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -2px rgba(0,0,0,0.3);--shadow-lg:0 10px 15px -3px rgba(0,0,0,0.4),0 4px 6px -4px rgba(0,0,0,0.3);--shadow-xl:0 20px 25px -5px rgba(0,0,0,0.4),0 8px 10px -6px rgba(0,0,0,0.3);--shadow-ring:0 0 0 1px rgba(255,255,255,0.05);--text-primary:var(--gray-700);--text-heading:var(--gray-900);--text-muted:var(--gray-500);--text-faint:var(--gray-400);--surface-primary:#0f1117;--surface-card:#1a1d27;--surface-inset:#161822;--surface-overlay:rgba(15,17,23,0.92);--badge-bg:rgba(34,197,94,0.12);--badge-text:#86efac;--badge-border:rgba(34,197,94,0.25);--error-bg:rgba(239,68,68,0.1);--error-border:rgba(239,68,68,0.25);--gotcha-bg:rgba(245,158,11,0.1);--syntax-null:#c084fc;--syntax-string:#86efac;--syntax-number:#93bbfd;--syntax-boolean:#fdba74;--syntax-default:#d8dbe5;--syntax-key:#c084fc;--syntax-muted:#9ca1b0;--focus-ring:rgba(96,165,250,0.15);--focus-ring-shadow:rgba(96,165,250,0.25);--focus-ring-strong:rgba(96,165,250,0.35)}body{font-family:var(--font-family);line-height:1.6;color:var(--text-primary);background-color:var(--surface-primary);font-size:var(--text-base);margin:0;padding:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color 0.3s ease,color 0.3s ease}.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);color:var(--gray-900);letter-spacing:-0.025em}h1{font-size:2rem;font-weight:700}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:var(--gray-500);text-decoration:none;font-size:14px;font-weight:400;transition:color 0.2s cubic-bezier(0.4,0,0.2,1)}.simple-nav a:hover{color:var(--primary-color)}.main-content{padding:0}.tool-main{margin-bottom:40px}.tool-header{text-align:left;margin-bottom:40px}.tool-title{font-size:var(--text-3xl);font-weight:700;color:var(--gray-900);margin-bottom:8px;letter-spacing:-0.025em}.tool-subtitle{font-size:1.2rem;color:var(--gray-500);margin-bottom:16px;font-weight:400}.tool-description{font-size:1rem;color:var(--gray-500);line-height:1.5;margin-bottom:16px;max-width:600px}.tool-credits{font-size:0.9rem;color:var(--gray-400)}.tool-description-enhanced{margin:24px 0;max-width:800px}.tool-description-main{font-size:1.1rem;color:var(--gray-600);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:var(--gray-500)}.use-cases-preview{margin-top:24px;padding:16px;background:var(--gray-50);border-radius:var(--radius-md);border-left:4px solid var(--primary-color)}.use-cases-preview p{margin:0 0 12px 0;font-weight:600;color:var(--gray-700)}.use-case-tag{display:inline-block;background:var(--primary-color);color:white;padding:4px 12px;border-radius:var(--radius-lg);font-size:0.85rem;margin:4px 8px 4px 0;font-weight:500}.tool-credits a{color:var(--primary-color);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:12px 28px;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);text-decoration:none;display:inline-block;text-align:center;min-width:120px}.btn-primary,.compare-button,.tool-action-btn{background-color:var(--primary-color);color:white;border:none;border-radius:var(--radius-sm);padding:12px 28px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 4px var(--focus-ring-shadow)}.btn-primary:hover,.compare-button:hover,.tool-action-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 12px var(--focus-ring-strong)}.btn-primary:active,.compare-button:active,.tool-action-btn:active{transform:scale(0.98);box-shadow:0 2px 4px var(--focus-ring-shadow)}.tool-action-btn:disabled{opacity:0.6;cursor:not-allowed;transform:none}.btn-secondary,.tool-secondary-btn{background-color:var(--gray-50);color:var(--gray-700);border:1px solid var(--gray-300);border-radius:var(--radius-sm);padding:12px 28px;font-size:14px;font-weight:500;cursor:pointer;transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}.btn-secondary:hover,.tool-secondary-btn:hover{background-color:var(--gray-200);border-color:var(--gray-300)}.btn-secondary:active,.tool-secondary-btn:active{transform:scale(0.98)}.input-panel{display:flex;flex-direction:column}.input-panel textarea{width:100%;min-height:400px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.4;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:16px;resize:vertical;background:var(--surface-card);color:var(--text-primary);transition:border-color 0.2s cubic-bezier(0.4,0,0.2,1),box-shadow 0.2s cubic-bezier(0.4,0,0.2,1)}.input-panel textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--focus-ring)}.compare-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-top:150px}.compare-options{text-align:center;font-size:14px;color:var(--gray-500)}.compare-options a{color:var(--primary-color);text-decoration:none}.compare-options a:hover{text-decoration:underline}.results-section{margin-top:24px;padding:16px;background:var(--surface-card);border-radius:var(--radius-md);border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}.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:6px 14px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;border:none}.summary-item.added{background:var(--diff-added);color:var(--diff-added-text)}.summary-item.removed{background:var(--diff-removed);color:var(--diff-removed-text)}.summary-item.modified{background:var(--diff-modified);color:var(--diff-modified-text)}.summary-item.unchanged{background:var(--gray-100);color:var(--gray-500)}.diff-output{background:var(--surface-card);border:1px solid var(--gray-200);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}.diff-container{display:flex;flex-direction:column;min-height:400px}.diff-main{display:flex;flex:1}.diff-summary{background:var(--gray-100);padding:8px 16px;border-bottom:1px solid var(--gray-200);font-size:14px;font-weight:500;color:var(--gray-700)}.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 var(--gray-200)}.diff-header{background:var(--gray-50);padding:8px 12px;border-bottom:1px solid var(--gray-200);font-size:var(--text-xs);font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:0.05em}.diff-content-panel{flex:1;overflow-y:auto;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.4;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}.diff-line{display:flex;align-items:stretch;min-height:24px;border-bottom:1px solid rgba(0,0,0,0.04)}.diff-line:hover{background-color:rgba(37,99,235,0.03)}.line-number{background:var(--gray-50);color:var(--gray-400);padding:3px 12px;border-right:1px solid var(--gray-200);font-size:var(--text-xs);min-width:40px;text-align:right;user-select:none}.line-content{padding:3px 12px;flex:1;white-space:pre-wrap;word-break:break-word}.line-added{background-color:var(--diff-added)}.line-added .line-number{background-color:var(--diff-added-strong)}.line-removed{background-color:var(--diff-removed)}.line-removed .line-number{background-color:var(--diff-removed-strong)}.line-modified{background-color:var(--diff-modified)}.line-modified .line-number{background-color:var(--diff-modified-strong)}.line-unchanged{background-color:var(--surface-primary)}.line-empty{background-color:var(--gray-50);opacity:0.5}.line-empty .line-number{background-color:var(--gray-200)}.inline-diff-removed{background-color:rgba(220,53,69,0.2);border-radius:2px;padding:0 1px}.inline-diff-added{background-color:rgba(40,167,69,0.2);border-radius:2px;padding:0 1px}.example-diff-output{margin-top:var(--spacing-sm);border-radius:var(--radius-md);overflow:hidden}.example-diff-output .diff-container{font-size:var(--text-sm);min-height:auto}.diff-sidebar{width:280px;background:var(--gray-50);border-left:1px solid var(--gray-200);display:flex;flex-direction:column}.sidebar-header{padding:12px 16px;border-bottom:1px solid var(--gray-200);background:var(--gray-200)}.sidebar-header h4{margin:0;font-size:14px;color:var(--gray-700)}.sidebar-items{flex:1;overflow-y:auto}.sidebar-item{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid var(--gray-200);cursor:pointer;transition:background-color 0.2s}.sidebar-item:hover{background-color:var(--gray-200)}.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:var(--text-sm);color:var(--gray-700)}.diff-type{font-size:var(--text-xs);color:var(--gray-500);text-transform:uppercase}.no-differences{padding:20px;text-align:center;color:var(--gray-500);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:12px}.compare-section{margin-top:0;order:2}.right-input{order:3}.input-panel textarea{min-height:150px}.compare-button,.tool-action-btn{min-height:48px;min-width:160px;font-size:16px;padding:14px 32px}.diff-container{flex-direction:column}.diff-panels{flex-direction:column}.diff-panel.left-panel{border-right:none;border-bottom:1px solid var(--gray-200)}.diff-sidebar{width:100%;border-left:none;border-top:1px solid var(--gray-200)}.faq-item summary{min-height:44px;display:flex;align-items:center;padding:14px 16px}}.syntax-null{color:var(--syntax-null);font-weight:600}.syntax-undefined{color:var(--syntax-muted);font-style:italic}.syntax-string{color:var(--syntax-string)}.syntax-number{color:var(--syntax-number)}.syntax-boolean{color:var(--syntax-boolean);font-weight:600}.syntax-array{color:var(--syntax-default)}.syntax-object{color:var(--syntax-default)}.syntax-key{color:var(--syntax-key);font-weight:500}.syntax-truncated{color:var(--syntax-muted);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:var(--gray-400);font-size:var(--text-xs);min-width:24px;text-align:right;padding-right:6px;border-right:1px solid var(--gray-200);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:var(--gray-500);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:var(--surface-primary);margin-bottom:0}.content-section:nth-child(even){background:var(--gray-50)}.content-section h2{text-align:center;color:var(--gray-900);margin-bottom:var(--spacing-xl)}.section-intro{font-size:1.1rem;color:var(--gray-500);line-height:1.6;margin-bottom:var(--spacing-xl);text-align:center;max-width:800px;margin-left:auto;margin-right:auto}.example-code{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px;margin:12px 0;font-family:var(--font-mono)}.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(--gray-900);margin-bottom:var(--spacing-md)}.examples-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg)}.example-item{background:var(--surface-card);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-ring),var(--shadow-sm);border:none;transition:box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),transform 0.15s cubic-bezier(0.4,0,0.2,1)}.example-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.use-cases-compact{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);margin-top:var(--spacing-lg)}.use-case-compact{background:var(--surface-card);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-ring),var(--shadow-sm);border:none;transition:box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),transform 0.15s cubic-bezier(0.4,0,0.2,1)}.use-case-compact:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.use-case-compact h3{margin-bottom:var(--spacing-sm);color:var(--gray-700);font-size:1.1rem}.use-case-compact p{margin-bottom:var(--spacing-sm);color:var(--gray-500);line-height:1.5}.use-case-compact code{display:block;background:var(--gray-50);padding:var(--spacing-sm);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:0.85rem;color:var(--gray-700);border:1px solid var(--gray-200);word-break:break-all}.features-grid{display:grid;grid-template-columns:1fr;gap:var(--spacing-lg);margin-top:var(--spacing-xl)}.feature-item{background:var(--surface-card);padding:var(--spacing-lg);border-radius:var(--radius-md);box-shadow:var(--shadow-ring),var(--shadow-sm);border:none;transition:box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),transform 0.15s cubic-bezier(0.4,0,0.2,1)}.feature-item:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.feature-item h3{color:var(--gray-900);margin-bottom:var(--spacing-md);font-size:1.2rem}.feature-item p{line-height:1.6;color:var(--gray-500)}.faq-list{max-width:800px;margin:0 auto}.faq-item{background:var(--surface-card);margin-bottom:var(--spacing-md);border-radius:var(--radius-md);box-shadow:var(--shadow-ring);overflow:hidden}.faq-item summary{padding:var(--spacing-lg);cursor:pointer;font-weight:600;color:var(--gray-700);background:var(--gray-50);border-bottom:1px solid var(--gray-200);transition:background-color 0.2s cubic-bezier(0.4,0,0.2,1),color 0.2s cubic-bezier(0.4,0,0.2,1)}.faq-item summary:hover{background:var(--gray-100)}.faq-item[open] summary{color:var(--primary-color)}.faq-item p{padding:var(--spacing-lg);margin:0;animation:faqFadeIn 0.2s cubic-bezier(0.4,0,0.2,1)}@keyframes faqFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.site-footer{background:var(--gray-900);color:#a3a3a3;padding:56px 0 0;font-size:13px;line-height:1.6;border-top:1px solid var(--gray-200)}.footer-top{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;padding-bottom:48px;border-bottom:1px solid #262626}.footer-bottom{flex-direction:column;gap:12px;text-align:center}.footer-brand p{color:#a3a3a3;margin-top:8px;max-width:260px}.footer-brand-name{font-size:16px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:-0.3px}.footer-brand-name span{color:var(--primary-color)}.footer-col h4{color:#e5e5e5;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;margin-bottom:12px}.footer-col ul{list-style:none}.footer-col li{margin-bottom:6px}.footer-col a{color:#a3a3a3;text-decoration:none;transition:color 0.15s cubic-bezier(0.4,0,0.2,1)}.footer-col a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:24px 0;margin-top:0;font-size:12px;color:#737373}.footer-bottom a{color:#a3a3a3;text-decoration:none;transition:color 0.15s cubic-bezier(0.4,0,0.2,1)}.footer-bottom a:hover{color:#fff}.footer-social{display:flex;align-items:center;gap:10px}.footer-built-by{font-size:12px;color:#737373;letter-spacing:0.02em}.footer-built-by strong{color:#e5e5e5;font-weight:600}.footer-social > a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;background:#262626;color:#a3a3a3;transition:background 0.15s cubic-bezier(0.4,0,0.2,1),color 0.15s cubic-bezier(0.4,0,0.2,1)}.footer-social > a:hover{background:var(--primary-color);color:#fff}.footer-social > a svg{width:14px;height:14px;fill:currentColor}.ad-container{margin:var(--spacing-xl) 0;text-align:center;min-height:100px;background:var(--gray-50);border:1px dashed var(--gray-300);border-radius:var(--radius-sm);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:var(--surface-overlay);display:flex;align-items:center;justify-content:center;z-index:9999}.loading-spinner{padding:var(--spacing-lg);background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-weight:600;color:var(--primary-color);animation:loadingPulse 1.5s ease-in-out infinite}@keyframes loadingPulse{0%,100%{opacity:1}50%{opacity:0.7}}@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-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr}.footer-bottom{flex-direction:row;gap:0;text-align:left}.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}}.tool-input-dual{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:start;margin-bottom:24px}.tool-input-dual textarea{width:100%;min-height:350px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.4;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:16px;resize:vertical;background:var(--surface-card);color:var(--text-primary);transition:border-color 0.2s cubic-bezier(0.4,0,0.2,1),box-shadow 0.2s cubic-bezier(0.4,0,0.2,1)}.tool-input-dual textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--focus-ring)}.tool-input-label{font-size:var(--text-sm);font-weight:600;color:var(--gray-600);margin-bottom:6px;display:block}.tool-output{margin-top:24px;padding:16px;background:var(--surface-card);border-radius:var(--radius-md);border:1px solid var(--gray-200);box-shadow:var(--shadow-sm)}.tool-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;margin-top:120px}.tool-helper-text{font-size:14px;color:var(--gray-500)}.tool-text-input{width:100%;padding:10px 12px;border:1.5px solid var(--gray-200);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:14px;transition:border-color 0.2s cubic-bezier(0.4,0,0.2,1),box-shadow 0.2s cubic-bezier(0.4,0,0.2,1)}.tool-text-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--focus-ring)}.tool-inline-input{width:70px;padding:4px 8px;border:1px solid var(--gray-300);border-radius:var(--radius-sm)}.tool-grid-2col{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}@media (max-width:768px){.tool-grid-2col{grid-template-columns:1fr}}.tool-validate-box{margin-top:24px;padding:16px;background:var(--surface-card);border-radius:var(--radius-md);border:1px solid var(--gray-200)}.mb-sm{margin-bottom:var(--spacing-sm)}.mb-md{margin-bottom:var(--spacing-md)}.mt-sm{margin-top:var(--spacing-sm)}.mt-md{margin-top:var(--spacing-md)}.tool-options{display:flex;flex-wrap:wrap;gap:16px;align-items:center;padding:12px 16px;background:var(--gray-50);border-radius:var(--radius-sm);margin-bottom:16px;font-size:14px}.tool-options label{display:flex;align-items:center;gap:6px;cursor:pointer;color:var(--gray-600)}.tool-options select{padding:4px 8px;border:1px solid var(--gray-300);border-radius:var(--radius-sm);font-size:14px;background:var(--surface-card);color:var(--text-primary)}.tool-stats{display:flex;flex-wrap:wrap;gap:16px;padding:10px 16px;background:var(--gray-50);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--gray-600);margin-bottom:12px}.tool-stats .stat{display:flex;gap:4px}.tool-stats .stat-value{font-weight:600;color:var(--gray-700)}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:24px}.tool-card{background:var(--surface-card);border:none;border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-ring),var(--shadow-xs);transition:box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),transform 0.15s cubic-bezier(0.4,0,0.2,1);text-decoration:none;color:inherit;display:block}.tool-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.tool-card h3{color:var(--gray-900);margin-bottom:8px;font-size:1.2rem;transition:color 0.2s cubic-bezier(0.4,0,0.2,1)}.tool-card:hover h3{color:var(--primary-color)}.tool-card p{color:var(--gray-500);font-size:0.95rem;line-height:1.5;margin:0}.tool-card .tool-card-tag{display:inline-block;background:var(--primary-subtle);color:var(--primary-color);padding:2px 10px;border-radius:var(--radius-lg);font-size:0.8rem;font-weight:500;margin-top:12px}.tools-section-heading{font-size:1.1rem;color:var(--gray-400);text-transform:uppercase;letter-spacing:1px;margin:32px 0 8px;font-weight:600}.tools-section-heading:first-of-type{margin-top:0}.tool-input-single{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.tool-input-single textarea{width:100%;min-height:200px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.4;border:1.5px solid var(--gray-200);border-radius:var(--radius-md);padding:16px;resize:vertical;background:var(--surface-card);color:var(--text-primary);transition:border-color 0.2s cubic-bezier(0.4,0,0.2,1),box-shadow 0.2s cubic-bezier(0.4,0,0.2,1)}.tool-input-single textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px var(--focus-ring)}.tool-actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.tool-actions-row .tool-action-btn,.tool-actions-row .tool-secondary-btn{min-width:auto}.output-panel{width:100%;min-height:200px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;border:1px solid var(--gray-200);border-radius:var(--radius-sm);padding:12px;background:var(--gray-50);white-space:pre-wrap;word-break:break-word;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}.output-panel.has-content{border-color:var(--primary-color);background:var(--surface-card)}.swap-btn{background:none;border:1px solid var(--gray-300);border-radius:var(--radius-sm);padding:6px 12px;font-size:14px;cursor:pointer;color:var(--gray-600);transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}.swap-btn:hover{background:var(--gray-200);border-color:var(--gray-300)}.jwt-sections{display:flex;flex-direction:column;gap:16px}.jwt-section{border:1px solid var(--gray-200);border-radius:var(--radius-sm);overflow:hidden}.jwt-section-header{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--gray-50);border-bottom:1px solid var(--gray-200);font-size:var(--text-sm);font-weight:600;color:var(--gray-600)}.jwt-section-header button{background:none;border:1px solid var(--gray-300);border-radius:var(--radius-sm);padding:2px 8px;font-size:12px;cursor:pointer;color:var(--gray-600)}.jwt-section-header button:hover{background:var(--gray-200)}.jwt-section-body{padding:12px;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;white-space:pre-wrap;word-break:break-word;background:var(--surface-card)}.jwt-expiry-badge{display:inline-block;padding:2px 10px;border-radius:var(--radius-lg);font-size:12px;font-weight:600}.jwt-expiry-badge.valid{background:var(--diff-added);color:var(--diff-added-text)}.jwt-expiry-badge.expired{background:var(--diff-removed);color:var(--diff-removed-text)}.tool-error{padding:12px 16px;background:var(--error-bg);border:1px solid var(--error-border);border-radius:var(--radius-sm);color:var(--danger-color);font-size:14px}@media (max-width:768px){.tool-input-dual{grid-template-columns:1fr;gap:12px}.tool-actions{margin-top:0}.tool-options{flex-direction:column;align-items:flex-start}.tools-grid{grid-template-columns:1fr}.tool-actions-row{flex-direction:column;align-items:stretch}.tool-actions-row .tool-action-btn,.tool-actions-row .tool-secondary-btn{width:100%}}.example-block{margin:16px 0}.example-block strong{display:block;margin-bottom:8px;color:var(--gray-700)}.example-block pre{margin:0}.example-use-case{margin-top:12px}.step-cards{display:grid;grid-template-columns:1fr;gap:24px;margin-top:32px}.step-card{background:var(--surface-card);padding:24px;border-radius:var(--radius-md);box-shadow:var(--shadow-ring),var(--shadow-sm);border-left:4px solid var(--primary-color)}.step-card:nth-child(2){border-left-color:#10b981}.step-card:nth-child(3){border-left-color:var(--accent-color)}.step-card:nth-child(4){border-left-color:#8b5cf6}.step-card h2{color:var(--gray-700);margin-bottom:12px;font-size:1.4rem;text-align:left}.step-card p{color:var(--gray-500);line-height:1.6;margin-bottom:16px}.step-card pre{background:var(--gray-50);padding:16px;border-radius:var(--radius-sm);border:1px solid var(--gray-200);overflow-x:auto;margin:0}.step-card code{font-family:var(--font-mono);font-size:14px;color:var(--gray-700)}.step-card .keyboard-hint{background:var(--primary-subtle);padding:12px;border-radius:var(--radius-sm);margin:0}.step-card .keyboard-hint strong{color:var(--primary-color)}.step-card .keyboard-hint code{background:var(--surface-card);padding:4px 8px;border-radius:4px;border:1px solid var(--gray-200)}.step-card .result-list{list-style:none;padding:0;margin:0}.step-card .result-list li{padding:8px 12px;margin-bottom:8px;border-radius:4px;border-left:3px solid}.step-card .result-list li:last-child{margin-bottom:0}.step-card .result-list .result-added{background:var(--diff-added);border-color:#22c55e}.step-card .result-list .result-removed{background:var(--diff-removed);border-color:#ef4444}.step-card .result-list .result-modified{background:var(--diff-modified);border-color:#f59e0b}.step-card .result-list .result-unchanged{background:var(--gray-200);border-color:var(--gray-500)}.cta-section{margin-top:40px;text-align:center;padding:48px;background:linear-gradient(135deg,#1e40af,#2563eb);border-radius:var(--radius-lg);color:white;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.cta-section::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 30% 20%,rgba(255,255,255,0.1) 0%,transparent 50%);pointer-events:none}.cta-section h2{color:white;margin-bottom:15px;position:relative}.cta-section p{margin-bottom:20px;font-size:var(--text-lg);position:relative}.cta-section .cta-btn{display:inline-block;padding:12px 30px;background:#ffffff;color:var(--primary-color);text-decoration:none;border-radius:var(--radius-sm);font-weight:600;transition:transform 0.2s cubic-bezier(0.4,0,0.2,1),box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);position:relative}.cta-section .cta-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.2)}.cta-section .cta-btn:active{transform:scale(0.98)}.pro-tip-box{margin-top:40px;padding:24px;background:linear-gradient(135deg,#1e40af,#2563eb);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)}.pro-tip-box h2{color:white;margin-bottom:20px;font-size:1.5rem;text-align:left}.pro-tip-box ul{padding-left:0;margin:0;list-style:none}.pro-tip-box li{padding:12px 16px;margin-bottom:12px;background:rgba(255,255,255,0.15);border-radius:var(--radius-sm);color:white;backdrop-filter:blur(10px);border-left:3px solid rgba(255,255,255,0.4)}.pro-tip-box li:last-child{margin-bottom:0}.feature-boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:12px}.feature-box{padding:16px;background:var(--surface-card);border-radius:var(--radius-md);box-shadow:var(--shadow-ring),var(--shadow-xs);transition:box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),transform 0.15s cubic-bezier(0.4,0,0.2,1)}.feature-box:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.feature-box strong{color:var(--gray-700)}.feature-box p{color:var(--gray-500);font-size:0.9rem;margin:4px 0 0}:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,details summary:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.content-section h2{padding-bottom:12px;border-bottom:2px solid var(--gray-200);margin-bottom:20px}.diff-content-panel::-webkit-scrollbar,.output-panel::-webkit-scrollbar,.sidebar-items::-webkit-scrollbar{width:6px}.diff-content-panel::-webkit-scrollbar-track,.output-panel::-webkit-scrollbar-track,.sidebar-items::-webkit-scrollbar-track{background:transparent}.diff-content-panel::-webkit-scrollbar-thumb,.output-panel::-webkit-scrollbar-thumb,.sidebar-items::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}.diff-content-panel::-webkit-scrollbar-thumb:hover,.output-panel::-webkit-scrollbar-thumb:hover,.sidebar-items::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.code-example-block{background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.code-example-block h3{font-size:var(--text-base);margin-bottom:var(--spacing-sm);color:var(--gray-800)}.code-example-block pre{background:var(--gray-900);color:var(--gray-50);border-radius:var(--radius-sm);padding:var(--spacing-md);overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.5;scrollbar-width:thin;scrollbar-color:var(--gray-300) transparent}.code-example-block pre code{font-family:inherit;font-size:inherit}.code-note{font-size:var(--text-sm);color:var(--gray-500);margin-top:var(--spacing-sm);font-style:italic}.gotcha-card{background:var(--gotcha-bg);border-left:4px solid #f59e0b;border-radius:var(--radius-sm);padding:var(--spacing-md) var(--spacing-lg);margin-bottom:var(--spacing-md)}.gotcha-card h3{font-size:var(--text-base);color:var(--gray-800);margin-bottom:var(--spacing-xs)}.gotcha-card p{font-size:var(--text-sm);color:var(--gray-700);line-height:1.6}.related-languages-nav{display:flex;flex-wrap:wrap;gap:var(--spacing-sm)}.related-lang-link{display:inline-block;padding:var(--spacing-xs) var(--spacing-md);background:var(--gray-100);color:var(--primary-color);border:1px solid var(--gray-200);border-radius:var(--radius-lg);text-decoration:none;font-size:var(--text-sm);font-weight:500;transition:box-shadow 0.2s cubic-bezier(0.4,0,0.2,1),transform 0.15s cubic-bezier(0.4,0,0.2,1),border-color 0.2s cubic-bezier(0.4,0,0.2,1)}.related-lang-link:hover{background:var(--gray-50);border-color:var(--primary-color);transform:translateY(-1px);box-shadow:0 2px 4px rgba(0,0,0,0.1)}.related-lang-link:focus-visible{outline:2px solid var(--primary-color);outline-offset:2px}.converter-output{background:var(--gray-50);cursor:default}.converter-output:focus{outline:2px solid var(--primary-color);outline-offset:2px;border-color:var(--primary-color)}.theme-toggle{background:none;border:1px solid var(--gray-300);border-radius:var(--radius-sm);padding:5px 8px;cursor:pointer;color:var(--text-muted);font-size:16px;line-height:1;transition:color 0.2s ease,border-color 0.2s ease,background-color 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.theme-toggle:hover{color:var(--primary-color);border-color:var(--primary-color);background:var(--primary-subtle)}.theme-toggle .icon-sun,.theme-toggle .icon-moon{width:16px;height:16px}.theme-toggle .icon-moon{fill:currentColor}.theme-toggle .icon-sun{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.theme-toggle .icon-sun{display:none}[data-theme="dark"] .theme-toggle .icon-sun{display:block}[data-theme="dark"] .theme-toggle .icon-moon{display:none}[data-theme="dark"] .site-footer{background:#0a0c12;border-top-color:var(--gray-200)}[data-theme="dark"] .footer-top{border-bottom-color:var(--gray-200)}[data-theme="dark"] .tool-text-input{background:var(--surface-card);color:var(--text-primary)}[data-theme="dark"] .diff-line:hover{background-color:rgba(96,165,250,0.05)}[data-theme="dark"] .diff-line{border-bottom:1px solid rgba(255,255,255,0.04)}@media print{.site-header,.site-footer,.ad-container,.tool-controls{display:none}.diff-tool,.results-section{box-shadow:none;border:1px solid #000}}