:root{--bg-page-base:rgb(243 243 240/1);--bg-page-mid:rgb(236 235 229/1);--bg-page-deep:rgb(229 228 221/1);--bg-page:var(--bg-page-base);--bg-page-gradient:linear-gradient(168deg,var(--bg-page-base) 0%,var(--bg-page-mid) 38%,var(--bg-page-base) 72%,var(--bg-page-deep) 100%);--bg-surface:#ffffff;--bg-surface-soft:color-mix(in srgb,var(--bg-surface) 72%,var(--bg-page-mid) 28%);--header-bg:color-mix(in srgb,var(--bg-page-base) 88%,transparent);--text-primary:#1a1a1a;--text-muted:#525250;--text-faint:#73736e;--accent:#009b72;--accent-bright:#00c896;--accent-soft:#dff8f1;--accent-soft-border:#b3e8d9;--border-default:#d1d1cd;--border-subtle:#e6e6e2;--border-strong:#b8b8b2;--btn-primary-bg:var(--accent);--btn-primary-fg:#ffffff;--code-block-bg:#121816;--code-block-border:#24302c;--code-bar-bg:#0d1311;--code-bar-label:#9dd9c9;--shadow-card:0 4px 20px rgba(26,26,26,0.08);--font-ui:system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:"Fira Code","Cascadia Code","JetBrains Mono",ui-monospace,monospace;--radius-sm:6px;--radius-md:10px;--radius-lg:14px;--transition:0.16s ease;--header-h:48px;--sidebar-w:clamp(190px,13%,230px);--panel-h:520px;--ok:#16a34a;--error:#dc2626;--editor-bg:#ffffff;--editor-text:#1e1e1e;--editor-placeholder:#b0b0a8;--editor-header-bg:#f5f4f0;--editor-header-border:#e6e5e0;--editor-border:#ddddd8;--editor-shadow:0 1px 3px rgba(0,0,0,0.06),0 6px 20px rgba(0,0,0,0.07);--editor-shadow-focus:0 0 0 2px var(--accent),0 6px 20px rgba(0,0,0,0.08);--editor-btn-color:#737370;--editor-btn-border:#ddddd8;--editor-btn-hover:#1a1a1a;--editor-stats-color:#b0b0a8;--segment-bg:#f5f4f0;--segment-border:#ddddd8;--segment-text:#73736e;--segment-active-bg:var(--accent);--segment-active-fg:#ffffff}html.dark{--bg-page-base:#121214;--bg-page-mid:#16161a;--bg-page-deep:#0c0c0e;--bg-page-gradient:linear-gradient(168deg,var(--bg-page-base) 0%,var(--bg-page-mid) 40%,var(--bg-page-base) 68%,var(--bg-page-deep) 100%);--bg-surface:#1a1a1f;--bg-surface-soft:color-mix(in srgb,var(--bg-surface) 68%,var(--bg-page-mid) 32%);--header-bg:color-mix(in srgb,var(--bg-page-base) 90%,transparent);--text-primary:#ecece8;--text-muted:#a3a39c;--text-faint:#8c8c85;--accent:#4adeb8;--accent-bright:#5ef0c8;--accent-soft:rgba(74,222,184,0.14);--accent-soft-border:rgba(94,240,200,0.35);--border-default:#3a3a37;--border-subtle:#262625;--border-strong:#4a4a47;--btn-primary-bg:var(--accent-bright);--btn-primary-fg:#0e1614;--code-block-bg:#0a0f0e;--code-block-border:#2a3330;--code-bar-bg:#060908;--code-bar-label:#7dd3bf;--shadow-card:0 4px 24px rgba(0,0,0,0.45);--ok:#4ade80;--error:#f87171;--editor-bg:#0d1117;--editor-text:#c9d1d9;--editor-placeholder:rgba(255,255,255,0.16);--editor-header-bg:#0a0e14;--editor-header-border:#21262d;--editor-border:#21262d;--editor-shadow:0 2px 6px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04);--editor-shadow-focus:0 0 0 2px var(--accent),0 4px 20px rgba(0,0,0,0.55);--editor-btn-color:rgba(255,255,255,0.32);--editor-btn-border:rgba(255,255,255,0.1);--editor-btn-hover:rgba(255,255,255,0.72);--editor-stats-color:rgba(255,255,255,0.25);--segment-bg:rgba(255,255,255,0.05);--segment-border:rgba(255,255,255,0.1);--segment-text:rgba(255,255,255,0.45);--segment-active-bg:var(--accent);--segment-active-fg:#0a1210}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{scrollbar-gutter:stable}body{font-family:var(--font-ui);font-size:14px;background:var(--bg-page-gradient);background-attachment:fixed;color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app,body{min-height:100vh}.app{display:flex;flex-direction:column}.app-header{justify-content:space-between;height:var(--header-h);padding:0 20px 0 0;background:var(--header-bg);border-bottom:1px solid var(--border-subtle);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);position:-webkit-sticky;position:sticky;top:0;z-index:200}.app-header,.app-header-left{display:flex;align-items:center}.app-header-left{min-width:0}.app-logo{display:flex;gap:9px;text-decoration:none;padding:0 20px;height:100%;border-right:1px solid var(--border-subtle)}.app-logo,.app-logo-mark{align-items:center;flex-shrink:0}.app-logo-mark{display:inline-flex;justify-content:center;width:28px;height:28px;background:var(--accent);color:#fff;border-radius:8px}.app-logo-wordmark{font-family:var(--font-mono);font-size:13px;font-weight:700;letter-spacing:-.04em;color:var(--text-primary);white-space:nowrap}.logo-accent{color:var(--accent)}.app-header-right{display:flex;align-items:center;gap:10px;flex-shrink:0}.theme-toggle{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;transition:all var(--transition)}.theme-toggle:hover{background:var(--bg-surface);border-color:var(--border-strong);color:var(--text-primary)}.app-badge{font-size:11.5px;color:var(--text-faint);text-decoration:none;padding:4px 11px;border:1px solid var(--border-subtle);border-radius:20px;transition:all var(--transition);white-space:nowrap}.app-badge:hover{color:var(--text-muted);border-color:var(--border-default)}.app-workspace{display:flex;align-items:flex-start;flex:1 1}.app-sidebar{width:var(--sidebar-w);flex-shrink:0;position:-webkit-sticky;position:sticky;top:var(--header-h);height:calc(100dvh - var(--header-h));overflow:hidden;overscroll-behavior:contain;display:flex;flex-direction:column;border-right:1px solid var(--border-subtle);background:var(--bg-surface-soft);padding:24px 0 0}.sidebar-label{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--text-faint);text-transform:uppercase;padding:0 18px 10px;flex-shrink:0}.sidebar-nav{display:flex;flex-direction:column;gap:2px;padding:0 10px;flex:1 1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}.sidebar-nav::-webkit-scrollbar{display:none}.sidebar-link{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-sm);text-decoration:none;color:var(--text-muted);font-size:13px;font-weight:500;transition:all var(--transition)}.sidebar-link:hover{background:var(--bg-surface);color:var(--text-primary)}.sidebar-link.active{background:var(--accent-soft);color:var(--accent);font-weight:600}html.dark .sidebar-link:hover{background:rgba(255,255,255,.06)}.sidebar-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex-shrink:0;color:inherit;opacity:.6}.sidebar-icon svg{width:20px;height:20px;display:block}.sidebar-link.active .sidebar-icon{opacity:1}.sidebar-link:hover .sidebar-icon{opacity:.9}.sidebar-link-label{flex:1 1;line-height:1}.sidebar-footer{flex-shrink:0;padding:14px 18px;border-top:1px solid var(--border-subtle)}.sidebar-footer-link{font-size:11.5px;color:var(--text-faint);text-decoration:none;transition:color var(--transition)}.sidebar-footer-link:hover{color:var(--accent)}.app-main{flex:1 1;min-width:0}.tool-ui{min-height:70vh;padding:24px 32px 28px;display:flex;flex-direction:column}.tool-intro{margin-bottom:18px}.tool-intro p{font-size:14px;color:var(--text-muted);line-height:1.6;max-width:680px;margin-top:6px}.tool-header{display:flex;align-items:center;gap:14px;margin-bottom:16px;flex-wrap:wrap}.tool-name{font-size:19px;font-weight:700;letter-spacing:-.03em;color:var(--text-primary);line-height:1.2}.tool-badges{display:flex;flex-wrap:wrap;gap:8px;row-gap:8px}.tool-badge,.tool-badges{align-items:center;max-width:100%}.tool-badge{display:inline-flex;justify-content:center;box-sizing:border-box;font-size:11px;font-weight:500;letter-spacing:.02em;line-height:1.25;color:var(--text-faint);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:999px;padding:5px 12px;min-height:26px;white-space:normal;overflow-wrap:anywhere;word-break:normal;text-align:center;-webkit-hyphens:auto;hyphens:auto}.tool-badge--accent{color:var(--accent);background:var(--accent-soft);border-color:var(--accent-soft-border)}.panels{display:grid;grid-template-columns:1fr 1fr;grid-gap:12px;gap:12px;height:var(--panel-h);flex-shrink:0}.panel{display:flex;flex-direction:column;height:100%;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--editor-border);box-shadow:var(--editor-shadow);transition:box-shadow .2s ease;background:var(--editor-bg)}.panel:focus-within{box-shadow:var(--editor-shadow-focus)}.panel-header{display:flex;align-items:center;justify-content:space-between;height:38px;min-height:38px;padding:0 12px;background:var(--editor-header-bg);border-bottom:1px solid var(--editor-header-border);flex-shrink:0;gap:8px}.panel-label{font-size:10.5px;font-weight:600;color:var(--editor-stats-color);text-transform:uppercase;letter-spacing:.08em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.panel-action-btn,.panel-copy-btn{background:transparent;border:1px solid var(--editor-btn-border);border-radius:4px;color:var(--editor-btn-color);cursor:pointer;font-family:var(--font-ui);font-size:11px;font-weight:500;padding:2px 8px;line-height:1.5;transition:all var(--transition);white-space:nowrap}.panel-action-btn:hover,.panel-copy-btn:hover{color:var(--editor-btn-hover);border-color:var(--border-default);background:var(--bg-surface)}html.dark .panel-action-btn:hover,html.dark .panel-copy-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22)}.panel-copy-btn.copied{color:var(--ok);border-color:rgba(22,163,74,.3)}html.dark .panel-copy-btn.copied{border-color:rgba(74,222,128,.3)}.panel-action-btn{padding:2px 6px}.panel-sample-btn{background:transparent;border:1px solid var(--accent-soft-border);border-radius:4px;color:var(--accent);cursor:pointer;font-family:var(--font-ui);font-size:11px;font-weight:500;padding:2px 8px;line-height:1.5;transition:all var(--transition);white-space:nowrap}.panel-sample-btn:hover{background:var(--accent-soft)}.panel-stats{font-family:var(--font-mono);font-size:10px;color:var(--editor-stats-color);letter-spacing:.02em;-webkit-user-select:none;-moz-user-select:none;user-select:none;opacity:.8}.panel-editor{flex:1 1;display:flex;min-height:0;overflow:hidden}.panel-editor[data-readonly]{overflow:auto}.panel-gutter{flex-shrink:0;width:40px;overflow:hidden;background:var(--editor-bg);padding:18px 0;box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:none}.panel-gutter-line{font-size:11px;color:var(--text-faint);text-align:right;padding-right:12px;opacity:.35}.panel-editor textarea,.panel-gutter-line{font-family:var(--font-mono);line-height:1.8}.panel-editor textarea{flex:1 1;min-height:0;background:var(--editor-bg);border:none;color:var(--editor-text);padding:18px 20px;font-size:12.5px;resize:none;outline:none;-moz-tab-size:2;tab-size:2;caret-color:var(--accent);overflow:auto}.panel-editor textarea::placeholder{color:var(--editor-placeholder);font-style:italic}.toolbar{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:16px 0 0}.toolbar-mobile-row{display:contents}.toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary),.toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle){display:inline-flex;align-items:center;gap:5px;padding:9px 22px;border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:13px;font-weight:600;letter-spacing:.01em;cursor:pointer;border:none;background:var(--btn-primary-bg);color:var(--btn-primary-fg);transition:opacity var(--transition),transform var(--transition),box-shadow var(--transition);box-shadow:0 1px 3px rgba(0,155,114,.25),0 2px 8px rgba(0,155,114,.15)}@media (hover:hover){.toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary):hover,.toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle):hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,155,114,.35)}html.dark .toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary):hover,html.dark .toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle):hover{box-shadow:0 4px 16px rgba(74,222,184,.3)}}.toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary):active,.toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle):active{transform:translateY(0);box-shadow:none;opacity:1}.toolbar .toolbar-mobile-row--secondary>button.btn-secondary,.toolbar .toolbar-overflow-toggle.btn-secondary,.toolbar>button.btn-secondary{background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-default);font-weight:500;box-shadow:none}@media (hover:hover){.toolbar .toolbar-mobile-row--secondary>button.btn-secondary:hover,.toolbar .toolbar-overflow-toggle.btn-secondary:hover,.toolbar>button.btn-secondary:hover{color:var(--text-primary);border-color:var(--border-strong);background:var(--bg-surface-soft);box-shadow:0 1px 4px rgba(0,0,0,.07);opacity:1;transform:none}}.toolbar-overflow{position:relative;flex-shrink:0;display:none;align-items:center;align-self:center}.toolbar-overflow-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 10px;color:var(--text-muted)}.toolbar-overflow-portal{position:fixed;inset:0;z-index:2147483000;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:0;pointer-events:auto;isolation:isolate}.toolbar-overflow-scrim{flex:1 1 auto;min-height:0;width:100%;border:none;margin:0;padding:0;cursor:pointer;background:rgba(0,0,0,.52);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:toolbar-overflow-scrim-in .18s ease}html.dark .toolbar-overflow-scrim{background:rgba(0,0,0,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@keyframes toolbar-overflow-scrim-in{0%{opacity:0}to{opacity:1}}.toolbar-overflow-sheet{--sheet-x:16px;--sheet-row-h:48px;--sheet-row-fs:13px;--sheet-row-fw:500;--sheet-title-fs:11px;--sheet-title-fw:700;--sheet-title-ls:0.06em;--sheet-gap-after-handle:10px;--sheet-gap-before-list:2px;--sheet-list-pad-bottom:12px;--sheet-list-inline:16px;--sheet-item-shrink:24px;--sheet-radius-top:20px;flex-shrink:0;align-self:stretch;width:100%;max-width:100%;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0 env(safe-area-inset-right,0) 0 env(safe-area-inset-left,0);border-radius:var(--sheet-radius-top) var(--sheet-radius-top) 0 0;border:none;border-top:1px solid var(--border-default);border-inline:1px solid var(--border-default);background:var(--bg-surface);background-clip:padding-box;box-shadow:0 -16px 56px rgba(0,0,0,.28),0 0 0 1px rgba(0,0,0,.05);max-height:min(78vh,460px);overflow:hidden;animation:toolbar-overflow-sheet-in .28s cubic-bezier(.22,1,.36,1)}.toolbar-overflow-sheet-handle{flex-shrink:0;width:36px;height:4px;margin:var(--sheet-gap-after-handle) auto var(--sheet-gap-before-list);border-radius:999px;background:var(--border-strong);opacity:.45}.toolbar-overflow-sheet-head{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:48px;padding:0 var(--sheet-x);box-sizing:border-box;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}.toolbar-overflow-sheet-title{flex:1 1;min-width:0;padding:6px 0;font-family:var(--font-ui);font-size:var(--sheet-title-fs);font-weight:var(--sheet-title-fw);letter-spacing:var(--sheet-title-ls);line-height:1.25;text-transform:uppercase;color:var(--text-muted)}.toolbar-overflow-sheet-close{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:48px;height:48px;margin:0;padding:0;border:none;border-radius:12px;background:transparent;color:var(--text-muted);font-size:28px;font-weight:300;line-height:1;cursor:pointer;transition:background var(--transition),color var(--transition)}.toolbar-overflow-sheet-close:hover{background:var(--bg-surface-soft);color:var(--text-primary)}.toolbar-overflow-sheet-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:var(--sheet-gap-before-list) var(--sheet-list-inline) var(--sheet-list-pad-bottom);background:var(--bg-surface)}.toolbar-overflow-sheet-footer{flex-shrink:0;padding:14px var(--sheet-x) max(18px,calc(12px + env(safe-area-inset-bottom, 0px)));border-top:1px solid var(--border-subtle);background:var(--bg-surface-soft)}.toolbar-overflow-sheet-field-stack{display:flex;flex-direction:column;gap:12px}.toolbar-overflow-sheet-field{display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0}.toolbar-overflow-sheet-field-label{font-family:var(--font-ui);font-size:var(--sheet-title-fs);font-weight:var(--sheet-title-fw);letter-spacing:var(--sheet-title-ls);line-height:1.25;text-transform:uppercase;color:var(--text-muted)}.toolbar-overflow-sheet-field input{width:100%;box-sizing:border-box;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--sheet-row-fs);font-weight:var(--sheet-row-fw);background:var(--bg-surface);color:var(--text-primary)}.toolbar-overflow-sheet-footer-btn{width:100%;min-height:var(--sheet-row-h);padding:0 var(--sheet-x);box-sizing:border-box;border:none;border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:var(--sheet-row-fs);font-weight:600;letter-spacing:-.01em;cursor:pointer;background:var(--btn-primary-bg);color:var(--btn-primary-fg)}.toolbar-overflow-sheet-footer-btn:active{opacity:.92}@keyframes toolbar-overflow-sheet-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media (prefers-reduced-motion:reduce){.toolbar-overflow-scrim,.toolbar-overflow-sheet{animation:none}}.toolbar-overflow-sheet-item{display:flex;align-items:center;width:calc(100% - var(--sheet-item-shrink, 24px));max-width:calc(100% - var(--sheet-item-shrink, 24px));margin-inline:auto;min-height:var(--sheet-row-h,48px);padding:0 var(--sheet-x,16px);box-sizing:border-box;border:none;background:transparent;font-family:var(--font-ui);font-size:var(--sheet-row-fs,13px);font-weight:var(--sheet-row-fw,500);letter-spacing:-.01em;line-height:1.3;color:var(--text-primary);text-align:left;cursor:pointer;transition:background .12s ease;word-break:break-word}.toolbar-overflow-sheet-item+.toolbar-overflow-sheet-item{border-top:1px solid var(--border-subtle)}.toolbar-overflow-sheet-item:hover{background:var(--bg-surface-soft)}.toolbar-overflow-sheet-item:active{background:color-mix(in srgb,var(--accent-soft) 55%,var(--bg-surface-soft))}.toolbar-overflow-toggle-label{display:none}@media (max-width:768px){.toolbar-overflow-toggle{gap:4px;min-width:auto;min-height:34px;padding:0 9px 0 7px;border-radius:8px}.toolbar-overflow-toggle-label{display:inline;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--text-muted)}}.toolbar.toolbar--cleaner .toolbar-mobile-row--primary,.toolbar.toolbar--primary-more .toolbar-mobile-row--primary,.toolbar.toolbar--with-field .toolbar-mobile-row--primary{display:contents}.toolbar-inline-field{display:inline-flex;align-items:center;gap:10px;flex:1 1 220px;min-width:0;font-size:13px;font-weight:500;color:var(--text-muted)}.toolbar-inline-field input{flex:1 1 auto;min-width:0;margin-left:4px;padding:6px 10px;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-ui);font-size:13px;background:var(--bg-surface);color:var(--text-primary)}.toolbar-sep{width:1px;height:22px;background:var(--border-default);margin:0 2px;flex-shrink:0}.indent-toggle{display:flex;border:1px solid var(--segment-border);border-radius:var(--radius-sm);overflow:hidden;background:var(--segment-bg)}.indent-btn{padding:6px 13px;background:transparent;color:var(--segment-text);border:none;border-right:1px solid var(--segment-border);font-family:var(--font-ui);font-size:12px;font-weight:500;cursor:pointer;transition:all var(--transition)}.indent-btn:last-child{border-right:none}.indent-btn:hover{color:var(--text-primary);background:var(--bg-surface)}html.dark .indent-btn:hover{background:rgba(255,255,255,.06)}.indent-btn.active{background:var(--segment-active-bg);color:var(--segment-active-fg);font-weight:600}.toolbar label{color:var(--text-muted);display:flex;align-items:center;gap:7px}.toolbar input[type=text],.toolbar label{font-family:var(--font-ui);font-size:13px}.toolbar input[type=text]{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);padding:6px 11px;outline:none;transition:border-color var(--transition),box-shadow var(--transition)}.toolbar input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,155,114,.1)}html.dark .toolbar input[type=text]:focus{box-shadow:0 0 0 3px rgba(74,222,184,.1)}.shortcuts-hint{font-size:11.5px;color:var(--text-faint);display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.shortcuts-hint kbd{background:var(--bg-surface);border:solid var(--border-default);border-width:1px 1px 2px;border-radius:4px;padding:1px 6px;font-size:10.5px;color:var(--text-muted)}@media (max-width:768px){.shortcuts-hint{display:none}}.status{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--radius-sm);font-size:12.5px;font-weight:500;margin-top:12px;animation:statusIn .18s ease}@keyframes statusIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.status:before{font-size:13px}.status--ok:before{content:"✓"}.status--error:before{content:"✕"}.status--ok{background:rgba(22,163,74,.08);color:var(--ok);border:1px solid rgba(22,163,74,.2)}.status--error{background:rgba(220,38,38,.07);color:var(--error);border:1px solid rgba(220,38,38,.18)}html.dark .status--ok{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.2)}html.dark .status--error{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.2)}.diff-results-section{margin-top:20px;scroll-margin-top:24px}.diff-summary{flex-wrap:wrap;padding:0;background:none;border:none}.diff-summary,.diff-summary-stat{display:flex;align-items:center;gap:6px}.diff-summary-stat{padding:6px 12px 6px 10px;border-radius:6px;font-size:12px;font-weight:600;letter-spacing:.01em;border:1px solid transparent}.diff-summary-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}.diff-summary-stat--added{background:rgba(22,163,74,.08);border-color:rgba(22,163,74,.18);color:#15803d}.diff-summary-stat--removed{background:rgba(220,38,38,.07);border-color:rgba(220,38,38,.16);color:#b91c1c}.diff-summary-stat--changed{background:rgba(217,119,6,.08);border-color:rgba(217,119,6,.18);color:#b45309}.diff-summary-stat--total{background:var(--bg-surface);border-color:var(--border-default);color:var(--text-muted)}.diff-summary-dot--added{background:#16a34a}.diff-summary-dot--removed{background:#dc2626}.diff-summary-dot--changed{background:#d97706}.diff-summary-dot--total{background:var(--text-faint)}html.dark .diff-summary-stat--added{background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.2);color:#4ade80}html.dark .diff-summary-stat--removed{background:rgba(248,113,113,.1);border-color:rgba(248,113,113,.2);color:#f87171}html.dark .diff-summary-stat--changed{background:rgba(251,191,36,.1);border-color:rgba(251,191,36,.2);color:#fbbf24}.diff-filters{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}.diff-filter-types{display:flex;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:8px;padding:3px;gap:2px}.diff-filter-btn{display:flex;align-items:center;gap:5px;padding:5px 12px;border-radius:5px;font-size:12px;font-weight:600;border:none;background:transparent;color:var(--text-muted);cursor:pointer;transition:all var(--transition);white-space:nowrap}.diff-filter-btn:hover{color:var(--text-primary);background:var(--bg-surface-soft)}.diff-filter-btn.active{background:var(--bg-page);color:var(--text-primary);box-shadow:0 1px 3px rgba(0,0,0,.1)}html.dark .diff-filter-btn.active{background:rgba(255,255,255,.08)}.diff-filter-count{font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;background:rgba(0,0,0,.06);color:var(--text-faint);min-width:16px;text-align:center}.diff-filter-btn.active .diff-filter-count{background:rgba(0,0,0,.08);color:var(--text-muted)}html.dark .diff-filter-count{background:rgba(255,255,255,.07)}.diff-filter-search{flex:1 1;min-width:160px;max-width:280px;padding:7px 12px;border-radius:7px;font-size:12.5px;border:1px solid var(--border-default);background:var(--bg-surface);color:var(--text-primary);outline:none;transition:border-color var(--transition)}.diff-filter-search:focus{border-color:var(--accent)}.diff-table{margin-top:14px;border:1px solid var(--border-default);border-radius:10px;overflow:hidden;background:var(--bg-surface)}.diff-tr{display:flex;align-items:center;gap:0;min-height:44px;padding:10px 0;border-bottom:1px solid var(--border-subtle);transition:background var(--transition);position:relative}.diff-tr:last-child{border-bottom:none}.diff-tr--added{background:rgba(22,163,74,.03)}.diff-tr--removed{background:rgba(220,38,38,.025)}.diff-tr--changed{background:rgba(217,119,6,.02)}.diff-tr:hover{filter:brightness(.975)}html.dark .diff-tr--added{background:rgba(74,222,128,.04)}html.dark .diff-tr--removed{background:rgba(248,113,113,.04)}html.dark .diff-tr--changed{background:rgba(251,191,36,.03)}.diff-tr:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:0}.diff-tr--added:before{background:#16a34a}.diff-tr--removed:before{background:#dc2626}.diff-tr--changed:before{background:#d97706}.diff-td-type{display:flex;align-items:center;gap:7px;width:100px;flex-shrink:0;padding:0 12px 0 16px}.diff-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.diff-dot--added{background:#16a34a}.diff-dot--removed{background:#dc2626}.diff-dot--changed{background:#d97706}.diff-type-lbl{font-family:var(--font-ui);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}.diff-tr--added .diff-type-lbl{color:#15803d}.diff-tr--removed .diff-type-lbl{color:#b91c1c}.diff-tr--changed .diff-type-lbl{color:#b45309}html.dark .diff-tr--added .diff-type-lbl{color:#4ade80}html.dark .diff-tr--removed .diff-type-lbl{color:#f87171}html.dark .diff-tr--changed .diff-type-lbl{color:#fbbf24}.diff-td-path{flex:1 1;font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--text-primary);padding:0 16px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.diff-td-values{display:flex;align-items:center;gap:6px;padding:0 16px 0 0;flex-shrink:0;max-width:55%;flex-wrap:wrap}.diff-val{font-family:var(--font-mono);font-size:12px;padding:2px 8px;border-radius:4px;white-space:nowrap;max-width:220px;overflow:hidden;text-overflow:ellipsis}.diff-val--old{background:rgba(220,38,38,.09);color:#b91c1c;text-decoration:line-through;-webkit-text-decoration-color:rgba(185,28,28,.4);text-decoration-color:rgba(185,28,28,.4)}.diff-val--new{background:rgba(22,163,74,.09);color:#15803d}html.dark .diff-val--old{background:rgba(248,113,113,.13);color:#f87171}html.dark .diff-val--new{background:rgba(74,222,128,.13);color:#4ade80}.diff-val-arrow{color:var(--text-faint);font-size:14px;flex-shrink:0;line-height:1}.diff-empty{text-align:center;color:var(--text-faint);font-size:13px;padding:32px 0}.cleaner-options{display:flex;gap:5px;flex-wrap:wrap;align-items:center}.cleaner-options label{display:flex;align-items:center;gap:5px;color:var(--text-muted);font-size:12.5px;cursor:pointer;padding:5px 11px;border:1px solid var(--border-default);border-radius:6px;background:var(--bg-surface);transition:all var(--transition);-webkit-user-select:none;-moz-user-select:none;user-select:none}.cleaner-options label:hover{color:var(--text-primary);border-color:var(--border-strong)}.cleaner-options input[type=checkbox]{accent-color:var(--accent)}.jsonpath-results{display:flex;flex-direction:column;gap:6px;padding:16px;background:var(--editor-bg);flex:1 1;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.2) transparent}.jsonpath-result-item{padding:10px 13px;background:var(--bg-surface-soft);border:1px solid var(--border-subtle);border-radius:6px;font-size:12px}.jsonpath-result-path{font-family:var(--font-mono);color:var(--text-faint);margin-bottom:4px;font-size:11px}.jsonpath-result-value{font-family:var(--font-mono);color:var(--accent);font-weight:600;word-break:break-all}html.dark .jsonpath-result-item{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.06)}html.dark .jsonpath-result-value{color:#4adeb8}.jsonpath-not-found{color:var(--error);font-size:12px}.jsonpath-placeholder{color:var(--editor-placeholder);font-size:13px;padding:16px 0;font-style:italic}@keyframes revealUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}.seo-content{padding:72px 40px 96px;border-top:1px solid var(--border-subtle);max-width:960px;opacity:0}.seo-content.in-view{animation:revealUp .7s cubic-bezier(.22,1,.36,1) forwards}@media (prefers-reduced-motion:reduce){.seo-content{opacity:1}.seo-content.in-view{animation:none}}.seo-content h1{font-size:28px;font-weight:800;letter-spacing:-.035em;color:var(--text-primary);margin-bottom:14px;line-height:1.2;max-width:780px}.seo-lead{font-size:15px;color:var(--text-muted);line-height:1.8;max-width:680px}.seo-article.seo-content{max-width:720px;margin-inline:auto;padding-top:80px;padding-bottom:100px}.seo-article h1{max-width:none;font-size:clamp(26px,4vw,32px);margin-bottom:18px}.seo-article .seo-lead{max-width:none;font-size:17px;line-height:1.75;margin-bottom:2.25rem;padding-bottom:1.75rem;border-bottom:1px solid var(--border-subtle)}.seo-article>p:not(.seo-lead){font-size:15px;line-height:1.85;color:var(--text-muted);margin:0 0 1.35em;letter-spacing:-.012em}.seo-article>p:not(.seo-lead):last-of-type{margin-bottom:2rem}a.seo-tool-chip{direction:ltr;display:inline-flex;align-items:center;gap:4px;vertical-align:middle;margin:0 2px;padding:4px 10px 5px 12px;font-size:12px;font-weight:600;letter-spacing:-.01em;line-height:1.35;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:999px;text-decoration:none;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition),background var(--transition)}a.seo-tool-chip:after{content:"\2197";font-size:12px;font-weight:800;line-height:1;opacity:.72;flex-shrink:0;speak:never}a.seo-tool-chip:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--accent-soft-border));box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 12%,transparent);transform:translateY(-1px)}a.seo-tool-chip:hover:after{opacity:1}html.dark a.seo-tool-chip{background:color-mix(in srgb,var(--accent-soft) 80%,transparent)}.seo-label{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700;letter-spacing:.11em;color:var(--text-muted);text-transform:uppercase;margin:56px 0 14px;line-height:1.35}.home-faq-section>.home-section-inner>.seo-label:first-child,.home-section-inner>.seo-label:first-child{margin-top:0}.seo-label:before{content:"";width:4px;height:15px;border-radius:999px;flex-shrink:0;background:linear-gradient(180deg,var(--accent-bright),var(--accent));box-shadow:0 0 14px color-mix(in srgb,var(--accent) 28%,transparent)}html.dark .seo-label:before{box-shadow:0 0 16px color-mix(in srgb,var(--accent) 22%,transparent)}.seo-steps{display:flex;flex-direction:column;gap:0;max-width:720px;margin-top:4px;list-style:none;counter-reset:seo-steps}.seo-steps li{counter-increment:seo-steps;position:relative;display:block;padding:14px 12px 14px 40px;margin:0;background:transparent;border:none;border-radius:0;border-left:3px solid color-mix(in srgb,var(--accent) 30%,var(--border-subtle));font-size:14px;color:var(--text-muted);line-height:1.65;text-wrap:pretty;box-shadow:none;transition:border-left-color var(--transition),background var(--transition)}.seo-steps li+li{border-top:1px solid var(--border-subtle)}.seo-steps li:hover{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 18%,transparent);transform:none;box-shadow:none}.seo-steps li:before{content:counter(seo-steps);position:absolute;left:12px;top:14px;width:auto;height:auto;bottom:auto;padding:0;display:block;border:none;border-radius:0;background:transparent;font-family:var(--font-mono);font-size:12px;font-weight:700;font-feature-settings:"tnum";font-variant-numeric:tabular-nums;color:var(--accent);letter-spacing:-.02em;line-height:1.65}html.dark .seo-steps li:before{background:transparent;border:none}.seo-steps li strong{font-weight:700;color:var(--text-primary)}html.dark .seo-steps li{background:transparent;box-shadow:none}html.dark .seo-steps li:hover{background:color-mix(in srgb,var(--accent-soft) 28%,transparent);box-shadow:none}.seo-example-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:20px 24px;gap:20px 24px;max-width:900px;align-items:stretch}.seo-example-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px}@media (max-width:900px){.seo-example-grid--3{grid-template-columns:1fr}}.seo-code-panel{display:flex;flex-direction:column;border:none;border-radius:0;overflow:visible;background:transparent;box-shadow:none}.seo-code-label{display:block;height:auto;padding:0 0 8px;margin:0;background:transparent;border:none;font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;-webkit-user-select:none;-moz-user-select:none;user-select:none}.seo-code-panel pre{flex:1 1;margin:0;padding:14px 16px;font-family:var(--font-mono);font-size:12px;line-height:1.75;color:var(--editor-text);overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgba(128,128,128,.2) transparent;background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:var(--radius-sm);box-shadow:none}html.dark .seo-code-panel pre{border-color:var(--editor-border)}.seo-compare-table-wrap{overflow-x:auto;margin:16px 0 22px;max-width:900px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--bg-surface)}.seo-compare-table{width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;color:var(--text-muted)}.seo-compare-table td,.seo-compare-table th{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-subtle)}.seo-compare-table tr:last-child td{border-bottom:none}.seo-compare-table th{font-weight:700;color:var(--text-primary);background:var(--bg-surface-soft);font-size:12px;text-transform:uppercase;letter-spacing:.06em}html.dark .seo-compare-table-wrap{background:rgba(255,255,255,.02)}.comparison-choice-grid{display:grid;grid-template-columns:1fr 1fr;grid-gap:14px;gap:14px;max-width:900px;margin:0 0 24px}@media (max-width:640px){.comparison-choice-grid{grid-template-columns:1fr}}.comparison-choice-grid--3{grid-template-columns:repeat(3,1fr)}@media (max-width:900px){.comparison-choice-grid--3{grid-template-columns:1fr}}.comparison-choice-card{padding:14px 16px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);background:var(--bg-surface);font-size:14px;line-height:1.55;color:var(--text-muted)}.comparison-choice-card strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-primary);margin-bottom:8px}.comparison-tool-section{max-width:960px;margin:0 0 28px;padding:18px 18px 8px;border:1px solid var(--accent-soft-border);border-radius:var(--radius-md);background:color-mix(in srgb,var(--accent-soft) 35%,var(--bg-surface))}html.dark .comparison-tool-section{background:rgba(0,155,114,.08);border-color:rgba(74,222,184,.2)}.comparison-tool-heading{font-size:1.15rem;font-weight:700;margin:0 0 8px;color:var(--text-primary)}.comparison-tool-instruction{font-size:14px;line-height:1.55;color:var(--text-muted);margin-bottom:14px}.comparison-tool-stack{display:flex;flex-direction:column;gap:20px}.comparison-tool-stack .comparison-tool-subheading{font-size:15px;font-weight:600;margin:0 0 6px;color:var(--text-primary)}.comparison-cta-row{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0 4px}.comparison-cta-row a{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;background:var(--btn-primary-bg);color:var(--btn-primary-fg);text-decoration:none}.comparison-cta-row a:hover{filter:brightness(1.06)}.seo-content>pre,.seo-single-code pre{background:var(--editor-bg);border:1px solid var(--editor-border);border-radius:var(--radius-md);padding:18px 20px;overflow-x:auto;font-family:var(--font-mono);font-size:12px;line-height:1.8;color:var(--editor-text);box-shadow:var(--editor-shadow)}.seo-features{display:flex;flex-direction:column;gap:0;max-width:720px;margin-top:4px;list-style:none}.seo-features li{display:block;padding:12px 12px 12px 20px;margin:0;background:transparent;border:none;border-radius:0;border-left:3px solid color-mix(in srgb,var(--accent) 30%,var(--border-subtle));font-size:14px;color:var(--text-muted);line-height:1.55;transition:border-left-color var(--transition),background var(--transition)}.seo-features li+li{border-top:1px solid var(--border-subtle)}.seo-features li:hover{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 18%,transparent)}html.dark .seo-features li{background:transparent}html.dark .seo-features li:hover{background:color-mix(in srgb,var(--accent-soft) 28%,transparent)}.seo-features li .seo-tool-chip{margin:2px 3px 2px 0;vertical-align:middle}.seo-faqs{display:flex;flex-direction:column;gap:4px;margin-bottom:20px}.seo-faq-item{border:1px solid var(--border-default);border-radius:var(--radius-md);overflow:hidden;background:var(--bg-surface);transition:border-color var(--transition)}.seo-faq-item:hover{border-color:var(--border-strong)}html.dark .seo-faq-item{background:rgba(255,255,255,.02)}.seo-faq-item summary{padding:14px 16px;cursor:pointer;font-weight:600;font-size:14px;color:var(--text-primary);list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background var(--transition)}.seo-faq-item summary::-webkit-details-marker{display:none}.seo-faq-item summary:hover{background:var(--bg-surface-soft)}.seo-faq-item summary:after{content:"+";color:var(--accent);font-weight:700;font-size:18px;flex-shrink:0;margin-left:12px}.seo-faq-item[open] summary:after{content:"−"}.seo-faq-item[open] summary{border-bottom:1px solid var(--border-subtle)}.seo-faq-item p{padding:14px 16px;color:var(--text-muted);font-size:13.5px;line-height:1.7}.seo-faq-item p a:not(.seo-tool-chip),.seo-lead a:not(.seo-tool-chip){color:var(--accent);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;-webkit-text-decoration-color:color-mix(in srgb,var(--accent) 55%,var(--text-muted));text-decoration-color:color-mix(in srgb,var(--accent) 55%,var(--text-muted));transition:color var(--transition),-webkit-text-decoration-color var(--transition);transition:color var(--transition),text-decoration-color var(--transition);transition:color var(--transition),text-decoration-color var(--transition),-webkit-text-decoration-color var(--transition)}.seo-faq-item p a:not(.seo-tool-chip):visited,.seo-lead a:not(.seo-tool-chip):visited{color:var(--accent)}.seo-faq-item p a:not(.seo-tool-chip):hover,.seo-lead a:not(.seo-tool-chip):hover{color:var(--accent-bright);-webkit-text-decoration-color:var(--accent-bright);text-decoration-color:var(--accent-bright)}.seo-faq-item p a:not(.seo-tool-chip):focus-visible,.seo-lead a:not(.seo-tool-chip):focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:2px}.seo-errors-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));grid-gap:12px;gap:12px}.seo-error-card{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-md);padding:16px;display:flex;flex-direction:column;gap:8px}html.dark .seo-error-card{background:rgba(255,255,255,.02)}.seo-error-name{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint)}.seo-error-bad{background:rgba(220,38,38,.08);color:#991b1b}.seo-error-bad,.seo-error-good{border-radius:6px;padding:8px 10px;font-family:var(--font-mono);font-size:11.5px;overflow-x:auto;margin:0}.seo-error-good{background:rgba(22,163,74,.08);color:#166534}html.dark .seo-error-bad{background:rgba(248,113,113,.1);color:#fca5a5}html.dark .seo-error-good{background:rgba(74,222,128,.1);color:#86efac}.seo-error-arrow{font-size:11px;color:var(--text-faint);font-weight:600;letter-spacing:.04em}.seo-info-grid{display:flex;flex-direction:column;gap:0;max-width:720px;margin-top:4px}.seo-info-card{position:relative;margin:0;padding:16px 12px 16px 20px;background:transparent;border:none;border-radius:0;box-shadow:none;border-left:3px solid color-mix(in srgb,var(--accent) 35%,var(--border-subtle));transition:border-left-color var(--transition),background var(--transition)}.seo-info-card:before{display:none}.seo-info-card+.seo-info-card{border-top:1px solid var(--border-subtle)}.seo-info-card:hover{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 22%,transparent);transform:none;box-shadow:none}html.dark .seo-info-card{background:transparent;box-shadow:none}html.dark .seo-info-card:hover{background:color-mix(in srgb,var(--accent-soft) 35%,transparent);border-left-color:var(--accent-bright);box-shadow:none}.seo-info-card-title{font-size:15px;font-weight:700;letter-spacing:-.02em;color:var(--text-primary);margin:0 0 6px;line-height:1.3}.seo-info-card-desc{font-size:14px;color:var(--text-muted);line-height:1.65;text-wrap:pretty;margin:0}.seo-info-card-desc .seo-tool-chip{margin:2px 3px 2px 0;vertical-align:middle}.related-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:0}.related-tools a{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;background:var(--bg-surface);color:var(--text-muted);border:1px solid var(--border-default);border-radius:var(--radius-sm);text-decoration:none;font-size:13px;font-weight:500;transition:all var(--transition)}.related-tools a:after{content:"↗";font-size:11px;opacity:.5}.related-tools a:hover{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft-border);transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,155,114,.12)}html.dark .related-tools a:hover{box-shadow:0 3px 10px rgba(74,222,184,.1)}.seo-content code{font-family:var(--font-mono);font-size:12px;background:var(--bg-surface-soft);color:var(--accent);padding:1px 6px;border-radius:4px;border:1px solid var(--border-subtle)}html.dark .seo-content code{background:rgba(74,222,184,.1);border-color:rgba(74,222,184,.15)}.seo-content kbd{font-size:11px;background:var(--bg-surface);border:solid var(--border-default);border-width:1px 1px 2px;border-radius:4px;padding:1px 6px;color:var(--text-muted)}.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;padding:48px 24px}.not-found h1{font-size:64px;font-weight:900;color:var(--accent);line-height:1;margin-bottom:12px}.not-found h2{font-size:22px;font-weight:700;color:var(--text-primary);margin-bottom:10px}.not-found p{font-size:14px;color:var(--text-muted);margin-bottom:32px}.not-found-links{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.app-footer{position:fixed;bottom:0;left:0;right:0;border-top:1px solid var(--border-subtle);padding:14px 32px max(14px,env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;background:var(--bg-surface-soft);z-index:150;transform:translateY(100%);transition:transform .28s cubic-bezier(.25,.46,.45,.94)}.app-footer.footer-visible{transform:translateY(0)}.footer-text{font-size:12.5px;color:var(--text-faint)}.footer-text a{color:var(--accent);text-decoration:none}.footer-text a:hover{text-decoration:underline}.footer-privacy{font-size:12px;color:var(--text-faint);display:flex;align-items:center;gap:6px}.footer-privacy:before{content:"🔒";font-size:11px}.error-boundary-fallback{margin:24px 0;padding:28px 24px;border-radius:var(--radius-md);border:1px solid var(--border-default);background:var(--bg-surface);text-align:center;max-width:480px}.error-boundary-title{font-weight:700;font-size:18px;color:var(--text-primary);margin-bottom:8px}.error-boundary-text{font-size:14px;color:var(--text-muted);line-height:1.55;margin-bottom:16px}.error-boundary-retry{padding:8px 18px;border-radius:var(--radius-sm);border:1px solid var(--border-default);background:var(--accent-soft);color:var(--accent);font-weight:600;cursor:pointer}.error-boundary-retry:hover{border-color:var(--accent)}.tool-pair-link{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:13px;color:var(--text-muted);margin:12px 0 0}.tool-pair-link a{direction:ltr;display:inline-flex;align-items:center;gap:4px;padding:5px 11px 6px 13px;font-size:12px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:999px;text-decoration:none;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.tool-pair-link a:after{content:"\2197";font-size:12px;font-weight:800;line-height:1;opacity:.72;flex-shrink:0;speak:never}.tool-pair-link a:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--accent-soft-border));box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 12%,transparent);transform:translateY(-1px)}.tool-pair-link a:hover:after{opacity:1}html.dark .tool-pair-link a{background:color-mix(in srgb,var(--accent-soft) 80%,transparent)}.jsonpath-subset-details{margin-top:12px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--bg-surface-soft);font-size:12.5px;color:var(--text-muted);line-height:1.55}.jsonpath-subset-details>summary{cursor:pointer;list-style:none;padding:10px 12px;font-weight:600;color:var(--text-primary);-webkit-user-select:none;-moz-user-select:none;user-select:none}.jsonpath-subset-details>summary::-webkit-details-marker{display:none}.jsonpath-subset-details>summary:after{content:"+";float:right;color:var(--accent);font-weight:700;font-size:16px}.jsonpath-subset-details[open]>summary:after{content:"−"}.jsonpath-subset-body{padding:0 12px 12px;border-top:1px solid var(--border-subtle)}.jsonpath-subset-body ul{margin:8px 0 0 1.1em;padding:0}.jsonpath-subset-body li{margin:4px 0}.jsonpath-subset-body code{font-size:11.5px;padding:1px 4px}.jsonpath-subset-more{margin:10px 0 0;font-size:12px}html.dark .jsonpath-subset-details{background:rgba(255,255,255,.03)}.panel-json-foot{font-size:11px;color:var(--editor-stats-color);padding:6px 12px 8px 44px;border-top:1px solid var(--editor-header-border);background:var(--editor-header-bg)}.panel-history-select{font-size:11px;padding:3px 8px;border-radius:4px;border:1px solid var(--editor-btn-border);background:var(--editor-bg);color:var(--text-muted);max-width:140px}.panel-copy-wrap{position:relative}.panel-copy-menu{position:absolute;right:0;top:100%;margin-top:4px;min-width:180px;padding:4px 0;border-radius:var(--radius-sm);border:1px solid var(--editor-border);background:var(--editor-bg);box-shadow:var(--editor-shadow);z-index:20}.panel-copy-menu button{display:block;width:100%;text-align:left;padding:8px 14px;font-size:12.5px;border:none;background:transparent;color:var(--editor-text);cursor:pointer}.panel-copy-menu button:hover{background:var(--editor-header-bg)}.code-viewer.panel-highlight-view{flex:1 1;min-height:0;height:100%;overflow:auto;margin:0;padding:12px 14px 12px 8px;font-family:var(--font-mono);font-size:13px;line-height:1.55;white-space:pre;color:var(--editor-text);background:var(--editor-bg)}.hl-json-key{color:var(--text-primary);font-weight:600}.hl-json-str{color:var(--accent)}.hl-json-num{color:#2563eb}html.dark .hl-json-num{color:#93c5fd}.hl-json-bool{color:#ea580c}html.dark .hl-json-bool{color:#fdba74}.hl-json-null{color:var(--text-faint)}.jwt-meta-panel{border:1px solid var(--editor-border);border-radius:var(--radius-md);overflow:hidden;background:var(--editor-bg);box-shadow:var(--editor-shadow);min-height:120px}.jwt-meta-panel .panel-header{padding:8px 12px;background:var(--editor-header-bg);border-bottom:1px solid var(--editor-header-border)}.jwt-meta-body{padding:14px;font-size:13px;color:var(--text-muted);font-family:var(--font-mono)}@media (max-width:1024px){:root{--sidebar-w:180px}.tool-ui{padding:20px 24px 16px}}@media (min-width:769px){.app-logo{width:var(--sidebar-w)}.toolbar-overflow{display:none!important}.toolbar.toolbar--primary-more,.toolbar.toolbar--with-field{flex-wrap:nowrap;align-items:center;gap:8px}.toolbar.toolbar--primary-more .toolbar-sep,.toolbar.toolbar--with-field .toolbar-sep{flex-shrink:0}.toolbar.toolbar--with-field .toolbar-inline-field{flex:1 1 auto;min-width:0;max-width:min(520px,50vw)}.toolbar.toolbar--with-field .toolbar-inline-field input{min-width:200px}.toolbar.toolbar--cleaner{flex-wrap:wrap;align-items:center;gap:8px;row-gap:10px}.toolbar.toolbar--formatter{flex-wrap:wrap;align-items:center;gap:8px;row-gap:8px}.toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary),.toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle){min-height:36px;padding:8px 20px;box-shadow:0 1px 3px rgba(0,155,114,.22),0 2px 8px rgba(0,155,114,.12)}html.dark .toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary),html.dark .toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle){box-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 10px rgba(0,0,0,.35)}.toolbar .toolbar-mobile-row--secondary>button.btn-secondary,.toolbar>button.btn-secondary:not(.toolbar-overflow-toggle){min-height:32px;padding:7px 14px;font-size:13px;border-radius:var(--radius-sm);box-shadow:0 1px 0 rgba(0,0,0,.04)}.toolbar .toolbar-inline-field input{min-height:32px;padding:7px 12px;border-radius:var(--radius-sm);box-shadow:inset 0 1px 2px rgba(0,0,0,.05)}html.dark .toolbar .toolbar-inline-field input{box-shadow:inset 0 1px 2px rgba(0,0,0,.35)}.toolbar .indent-btn{min-height:32px;padding:6px 12px}}@media (max-width:768px){:root{--sidebar-w:0px;--panel-h:clamp(300px,min(52dvh,520px),560px)}html{scrollbar-gutter:auto}.app,body,html{overflow-x:hidden;max-width:100%}.app-main,.app-workspace{min-width:0;max-width:100%;overflow-x:hidden}.app-header{padding-left:max(14px,env(safe-area-inset-left,0px));padding-right:max(14px,env(safe-area-inset-right,0px));column-gap:8px}.app-header-left{gap:10px;min-width:0;align-items:center}.app-header-right{gap:10px;flex-shrink:0;align-items:center}.app-logo{width:auto;min-width:0;border-right:none;padding:0 0 0 8px;gap:8px}.app-badge{font-size:11px;padding:3px 10px}.tool-badges{gap:6px;row-gap:6px;max-width:100%}.tool-badge{font-size:10px;font-weight:500;letter-spacing:.03em;line-height:1.3;min-height:22px;padding:3px 10px;border-radius:999px}.tool-ui{min-width:0;max-width:100%;width:100%;padding:20px max(16px,env(safe-area-inset-left,0px)) 24px max(16px,env(safe-area-inset-right,0px));overflow-x:hidden;box-sizing:border-box}.tool-name{overflow-wrap:anywhere;word-break:break-word;min-width:0}.panels{grid-template-columns:1fr}.panel,.panels{min-width:0;max-width:100%}.panel-header{min-width:0;flex-wrap:wrap;height:auto;min-height:38px;padding-top:6px;padding-bottom:6px}.panel-editor{min-width:0}.code-viewer.panel-highlight-view{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.panel-editor textarea{resize:vertical;max-width:100%;overflow-x:auto}.toolbar{max-width:100%;min-width:0;flex-wrap:wrap;align-items:center}.tool-intro{margin-bottom:14px}.tool-header{margin-bottom:10px;gap:10px;row-gap:6px;align-items:center;max-width:100%;overflow-x:hidden}.shortcuts-hint{font-size:12px;opacity:.88}.toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary),.toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle){min-height:34px;padding:5px 12px;font-size:13px;border-radius:8px;box-shadow:0 1px 2px rgba(0,155,114,.1),0 1px 4px rgba(0,155,114,.04)}html.dark .toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary),html.dark .toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle){box-shadow:0 1px 3px rgba(0,0,0,.42)}.toolbar.toolbar--primary-more{flex-direction:column;align-items:stretch;gap:8px;padding-top:12px}.toolbar.toolbar--primary-more .toolbar-mobile-row--primary{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0}.toolbar.toolbar--primary-more .toolbar-mobile-row--primary>button:not(.btn-secondary):not(.toolbar-overflow-toggle){flex:0 1 auto;min-width:0}.toolbar.toolbar--with-field{flex-direction:column;align-items:stretch;gap:10px;padding-top:12px}.toolbar.toolbar--with-field .toolbar-mobile-row--primary{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0}.toolbar.toolbar--with-field .toolbar-mobile-row--primary>button:not(.btn-secondary):not(.toolbar-overflow-toggle){flex:0 1 auto;min-width:0}.toolbar.toolbar--with-field .toolbar-inline-field{flex:none;width:100%;flex-direction:column;align-items:stretch;gap:6px}.toolbar.toolbar--with-field .toolbar-inline-field input{margin-left:0;width:100%}.toolbar.toolbar--cleaner{flex-direction:column;align-items:stretch;gap:10px;padding-top:12px}.toolbar.toolbar--cleaner .toolbar-mobile-row--primary{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;width:100%;min-width:0}.toolbar.toolbar--cleaner .toolbar-mobile-row--primary>button:not(.btn-secondary):not(.toolbar-overflow-toggle){flex:0 1 auto;min-width:0}.toolbar.toolbar--cleaner .cleaner-options{width:100%;justify-content:flex-start}.toolbar:not(.toolbar--formatter) .indent-toggle{flex:1 1 auto;min-width:0;max-width:100%}.toolbar:not(.toolbar--formatter) .indent-toggle .indent-btn{flex:1 1;min-width:0;padding-left:8px;padding-right:8px}.toolbar.toolbar--formatter{flex-direction:row;flex-wrap:nowrap;align-items:center;gap:8px;padding:8px 0 0;margin-top:4px;background:transparent;border:none;box-shadow:none}html.dark .toolbar.toolbar--formatter{border:none;box-shadow:none}.toolbar.toolbar--formatter .toolbar-mobile-row--primary{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:8px;width:100%;max-width:100%;min-width:0}.toolbar.toolbar--formatter .toolbar-mobile-row--primary>button:not(.toolbar-overflow-toggle){flex:0 1 auto;min-width:0;min-height:34px;justify-content:center;font-size:13px;border-radius:8px}.toolbar.toolbar--cleaner .toolbar-cleaner-options-desktop-only,.toolbar.toolbar--formatter .toolbar-formatter-desktop-only{display:none!important}.seo-content{min-width:0;max-width:100%;padding:52px max(20px,env(safe-area-inset-left,0px)) 64px max(20px,env(safe-area-inset-right,0px));box-sizing:border-box}.seo-article.seo-content{padding-top:56px;padding-bottom:72px}.seo-article .seo-lead{font-size:16px;margin-bottom:1.75rem;padding-bottom:1.25rem}.seo-content h1{font-size:22px}.seo-example-grid{grid-template-columns:1fr}.app-footer{position:static;left:auto;right:auto;bottom:auto;transform:none!important;z-index:0;flex-shrink:0;width:100%;justify-content:center;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px max(20px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));border-top:1px solid var(--border-subtle);background:var(--bg-surface-soft)}}@media (max-width:480px){.toolbar{gap:5px}.toolbar .toolbar-mobile-row--primary>button:not(.btn-secondary),.toolbar>button:not(.btn-secondary):not(.toolbar-overflow-toggle){padding:5px 11px;font-size:12.5px}.toolbar.toolbar--formatter .toolbar-mobile-row--primary>button:not(.toolbar-overflow-toggle){min-height:34px;font-size:13px}.tool-name{font-size:17px}}.skip-link{position:fixed;top:-48px;left:12px;z-index:9999;padding:8px 16px;background:var(--accent);color:#fff;font-size:13px;font-weight:600;border-radius:var(--radius-sm);text-decoration:none;transition:top .15s ease}.skip-link:focus{top:12px;outline:2px solid var(--accent-bright);outline-offset:2px}.mobile-nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:299}.hamburger{display:none;position:relative;align-items:center;justify-content:center;width:36px;height:36px;background:transparent;border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-muted);cursor:pointer;flex-shrink:0;transition:color var(--transition),background var(--transition)}.hamburger:hover{background:var(--bg-surface);color:var(--text-primary)}.hamburger svg{display:block}@media (max-width:768px){.hamburger{display:flex;width:44px;height:44px;padding:0;border:none;background:transparent}.hamburger:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;box-sizing:border-box;border:1px solid var(--border-default);border-radius:var(--radius-sm);pointer-events:none;transition:background var(--transition),border-color var(--transition)}.hamburger:focus-visible,.hamburger:hover{background:transparent;color:var(--text-primary)}.hamburger:focus-visible:before,.hamburger:hover:before{background:var(--bg-surface);border-color:var(--border-strong)}html.dark .hamburger:focus-visible:before,html.dark .hamburger:hover:before{background:var(--bg-surface-soft);border-color:var(--border-strong)}.hamburger svg{position:relative;z-index:1;width:14px;height:14px}.theme-toggle{position:relative;width:44px;height:44px;padding:0;border:none;background:transparent}.theme-toggle:before{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:28px;height:28px;box-sizing:border-box;border:1px solid var(--border-default);border-radius:var(--radius-sm);pointer-events:none;transition:background var(--transition),border-color var(--transition)}.theme-toggle:focus-visible,.theme-toggle:hover{background:transparent;color:var(--text-primary)}.theme-toggle:focus-visible:before,.theme-toggle:hover:before{background:var(--bg-surface);border-color:var(--border-strong)}html.dark .theme-toggle:focus-visible:before,html.dark .theme-toggle:hover:before{background:var(--bg-surface-soft);border-color:var(--border-strong)}.theme-toggle svg{position:relative;z-index:1;width:14px;height:14px}.hamburger:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:12px}.theme-toggle:focus-visible{outline:2px solid var(--accent-bright);outline-offset:2px;border-radius:12px}.mobile-nav-overlay.open{display:block}.app-sidebar{position:fixed;left:-100%;top:var(--header-h);height:calc(100dvh - var(--header-h));width:240px;z-index:300;transition:left .22s ease;box-shadow:4px 0 24px rgba(0,0,0,.15)}.app-sidebar.mobile-open{left:0;display:flex}.toolbar-overflow{display:flex}.toolbar-hide-sm{display:none!important}}.home-section{padding:36px 40px 40px;border-bottom:1px solid var(--border-subtle)}.home-section:last-child{border-bottom:none}.home-section-inner{max-width:960px}.home-hero{padding:32px 40px 28px;border-bottom:1px solid var(--border-subtle)}.home-hero-inner{max-width:720px}.home-hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent-soft-border);border-radius:999px;padding:4px 12px 4px 8px;margin-bottom:16px;letter-spacing:.01em}.home-hero-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;animation:pulse-dot 2.4s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.75)}}.home-hero-h1{font-size:clamp(22px,3.2vw,32px);font-weight:800;letter-spacing:-.035em;color:var(--text-primary);line-height:1.2;margin-bottom:10px}.home-hero-lead{font-size:14px;color:var(--text-muted);line-height:1.7;max-width:540px;margin:0}.home-tools-search{position:relative;margin-bottom:24px;max-width:300px}.home-tools-search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--text-faint);pointer-events:none}.home-tools-search-input{width:100%;padding:8px 12px 8px 32px;font-size:13px;font-family:inherit;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-base);color:var(--text-primary);outline:none;transition:border-color var(--transition),box-shadow var(--transition)}.home-tools-search-input::placeholder{color:var(--text-faint)}.home-tools-search-input:focus{border-color:var(--accent-soft-border);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}.home-tools-search-input::-webkit-search-cancel-button{display:none}.home-tools-no-results{font-size:13px;color:var(--text-faint);padding:24px 0}.home-categories{display:grid;grid-template-columns:repeat(6,1fr);grid-gap:32px 40px;gap:32px 40px}.home-category{grid-column:span 2}.home-category--wide{grid-column:span 3}.home-category-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint);margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--border-subtle)}.home-tool-list{display:flex;flex-direction:column;gap:6px;list-style:none}.home-tool-item{display:flex;align-items:center;gap:12px;padding:12px 14px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-md);text-decoration:none;transition:border-color var(--transition),box-shadow var(--transition),transform var(--transition)}.home-tool-item:hover{border-color:var(--accent-soft-border);box-shadow:0 2px 10px color-mix(in srgb,var(--accent) 8%,transparent);transform:translateY(-1px)}.home-tool-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:var(--radius-sm);background:var(--accent-soft);color:var(--accent);transition:background var(--transition)}.home-tool-item:hover .home-tool-icon{background:color-mix(in srgb,var(--accent-soft) 140%,transparent)}.home-tool-text{display:flex;flex-direction:column;gap:2px;flex:1 1;min-width:0}.home-tool-name{font-size:13px;font-weight:600;color:var(--text-primary);letter-spacing:-.01em;line-height:1.3}.home-tool-desc{font-size:11.5px;color:var(--text-faint);line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-tool-arrow{color:var(--accent);flex-shrink:0;opacity:0;transition:opacity var(--transition),transform var(--transition)}.home-tool-item:hover .home-tool-arrow{opacity:1;transform:translate(1px,-1px)}.home-faq-section .seo-faqs{max-width:720px}@media (max-width:1024px){.home-category,.home-category--wide{grid-column:span 3}}@media (max-width:768px){.home-hero{padding:24px 20px 20px}.home-hero-h1{font-size:22px}.home-section{padding:28px 20px 32px}.home-categories{gap:16px}.home-category,.home-category--wide{grid-column:span 6}.home-tools-search{max-width:100%}}@media (max-width:480px){.home-hero-h1{font-size:20px}}