:root{color-scheme:light;--bg:#f7f9f8;--surface:#fff;--soft:#f2f5f3;--text:#202c29;--secondary:#687570;--border:#e0e7e3;--accent:#127565;--accent-hover:#0c6053;--accent-soft:#e9f5ef;--danger:#bc3f42;--danger-soft:#fff3f2;--code-key:#2853a2;--code-string:#13745a;--code-number:#a35723;--code-bool:#804aa3;--shadow:0 5px 24px #233e2e05;--mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace}
:root[data-theme=dark]{color-scheme:dark;--bg:#111917;--surface:#17221e;--soft:#1d2b25;--text:#e2eee7;--secondary:#9aac9f;--border:#2c3a32;--accent:#5dccad;--accent-hover:#7ce4c2;--accent-soft:#203b30;--danger:#f59893;--danger-soft:#332120;--code-key:#9fbef6;--code-string:#8fceae;--code-number:#efb47f;--code-bool:#c5a0e0;--shadow:none}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.55}button,input,select,textarea{font:inherit}button,a,input,select,summary,textarea{ -webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{opacity:.38;cursor:default}button,input,select,textarea{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}a:hover{color:var(--accent)}button{border:0;background:none}h1,h2,h3,p{margin:0}button,select{touch-action:manipulation}[hidden]{display:none!important}.container{max-width:1280px;margin:0 auto;padding-left:32px;padding-right:32px}.site-header{border-bottom:1px solid var(--border);background:var(--surface)}.header-inner{height:86px;max-width:1280px;margin:auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;gap:11px;align-items:center;font-size:20px;font-weight:800;letter-spacing:-.9px;line-height:1.15}.brand-mark{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;background:var(--accent);color:var(--surface);font-family:var(--mono);font-size:21px;letter-spacing:-3px;padding-right:3px}.brand-light{font-weight:400}.brand small{display:block;font-weight:400;letter-spacing:.3px;font-size:10px;color:var(--secondary);margin-top:3px}.header-actions{display:flex;align-items:center;gap:19px}.languages{display:flex;background:var(--soft);padding:4px;border:1px solid var(--border);border-radius:9px;gap:2px}.language{font-size:11px;font-weight:700;letter-spacing:.5px;border-radius:5px;padding:6px 11px;color:var(--secondary)}.language.active{color:var(--text);background:var(--surface);box-shadow:0 1px 3px #0000000c}.header-separator{height:20px;width:1px;background:var(--border)}.icon{width:17px;height:17px;flex:none;vertical-align:middle}.icon-button{display:inline-flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:7px;color:var(--secondary);font-size:22px}.icon-button:hover:not(:disabled){background:var(--soft);color:var(--text)}.theme-button{width:38px;height:38px}.theme-button .icon{width:20px;height:20px}.hero{padding-top:42px;padding-bottom:27px}h1{font-size:clamp(26px,3vw,38px);line-height:1.2;letter-spacing:-1.3px;font-weight:700}.hero-bottom{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:12px}.hero-bottom>p{color:var(--secondary);font-size:14px}.privacy-badge{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:6px 10px;font-size:11px}.privacy-badge .icon{width:13px;height:13px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px;border:1px solid var(--border);border-radius:12px 12px 0 0;background:var(--surface)}.primary-actions,.secondary-actions{display:flex;align-items:center;gap:5px}.button{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:12px;font-weight:600;padding:9px 12px;min-height:38px;border-radius:7px;white-space:nowrap;background:var(--soft);transition:background .15s}.button:hover:not(:disabled){background:var(--border)}.button.primary{background:var(--accent);color:var(--surface);padding:9px 16px}.button.primary:hover:not(:disabled){background:var(--accent-hover)}.braces{font-family:var(--mono);font-size:15px;font-weight:600;letter-spacing:-1.4px}.button.subtle{background:transparent;color:var(--secondary);font-weight:400}.button.subtle:hover:not(:disabled){background:var(--soft);color:var(--text)}.button.tiny{padding:5px 9px;font-size:11px;min-height:31px;background:transparent;color:var(--secondary)}.button.tiny:hover:not(:disabled){background:var(--soft)}.tiny .icon{width:14px;height:14px}.indent-label{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--secondary)}select{padding:7px 22px 7px 9px;font-size:11px;min-height:34px;background:var(--surface);border:1px solid var(--border);border-radius:6px}.toolbar-divider{width:1px;height:23px;background:var(--border);margin:0 8px}.editors{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;border:1px solid var(--border);border-top:0;border-radius:0 0 12px 12px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow)}.editor-panel{position:relative;min-width:0;display:flex;flex-direction:column}.source-panel{border-right:1px solid var(--border)}.panel-heading{height:55px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 15px;gap:10px}.panel-heading h2{font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px;white-space:nowrap}.panel-dot{width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--accent)}.panel-dot.muted{background:var(--secondary);opacity:.5}.source-editor{position:relative;display:flex;height:430px;overflow:hidden}.source-gutter{width:48px;flex:none;padding:17px 10px 17px 0;text-align:right;font:13px/24px var(--mono);color:var(--secondary);opacity:.65;background:var(--surface);user-select:none;white-space:pre;overflow:hidden}.source-editor textarea{height:100%;width:100%;min-width:0;background:var(--surface);resize:none;outline:0;border:0;padding:17px 16px 17px 7px;font:13px/24px var(--mono);tab-size:2;caret-color:var(--accent);overflow:auto}.source-editor:focus-within{box-shadow:inset 0 0 0 1px var(--accent)}textarea::placeholder{color:var(--secondary);opacity:.65}textarea::selection{background:var(--accent-soft);color:var(--text)}.panel-footer{height:36px;min-height:36px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 16px;gap:10px;font-size:10px;color:var(--secondary);background:var(--surface)}.file-name{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}.result-heading{justify-content:initial}.view-tabs{display:flex;gap:1px;padding:3px;background:var(--soft);border-radius:6px;margin-left:auto}.view-tab{padding:4px 10px;font-size:10px;color:var(--secondary);border-radius:4px}.view-tab.active{color:var(--text);background:var(--surface);box-shadow:0 1px 3px #0000000c}.result-actions{display:flex;gap:1px;margin-left:4px}.result-actions .icon-button{width:30px;height:30px}.result-actions .icon{width:15px;height:15px}.result-body{position:relative;height:430px;min-height:0}.empty-state{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;color:var(--secondary);text-align:center;padding:20px}.empty-state strong{font-size:13px;font-weight:500;color:var(--text)}.empty-state p{font-size:11px}.code-view{tab-size:2;height:100%;overflow:auto;font:13px/24px var(--mono);position:relative;background:var(--surface);outline:0}.code-view:focus-visible{box-shadow:inset 0 0 0 1px var(--accent);outline-offset:-1px}.code-space{position:relative;min-height:100%;min-width:100%;padding-top:17px}.code-rows{position:absolute;top:17px;left:0;width:100%;white-space:pre;user-select:text}.code-line{display:flex;height:24px;white-space:pre;width:100%;overflow:hidden}.line-number{flex:none;width:48px;text-align:right;padding-right:11px;color:var(--secondary);opacity:.65;user-select:none;background:var(--surface)}.line-content{flex:1;min-width:0;overflow:hidden;padding-left:7px}.line-text{display:block;white-space:pre}.token-key{color:var(--code-key)}.token-string{color:var(--code-string)}.token-number{color:var(--code-number)}.token-boolean,.token-null{color:var(--code-bool)}.token-punctuation{color:var(--secondary)}.lossless-label{display:flex;gap:4px;align-items:center;font-size:9px}.lossless-label .icon{width:11px;height:11px}.workbench-status{display:flex;align-items:center;gap:14px;min-height:43px;font-size:11px;color:var(--secondary)}#status{display:flex;align-items:center;gap:7px;min-width:0}.status-dot{display:inline-block;width:5px;height:5px;background:var(--secondary);border-radius:50%;flex:none}#status[data-state=success]{color:var(--accent)}#status[data-state=success] .status-dot{background:var(--accent)}#status[data-state=error]{color:var(--danger)}#status[data-state=error] .status-dot{background:var(--danger)}#status[data-state=busy] .status-dot{animation:pulse 1s infinite;background:var(--accent)}.shortcut{margin-left:auto;font-size:10px}.error-card{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:15px 18px;background:var(--danger-soft);border:1px solid color-mix(in srgb,var(--danger) 24%,transparent);border-radius:9px;color:var(--danger);margin:2px 0 16px;font-size:12px}.error-card p{margin-top:3px;overflow-wrap:anywhere}.error-card span{display:block;font:11px var(--mono);margin-top:8px}.error-card .button{color:var(--danger);background:var(--surface)}.drop-overlay{position:absolute;inset:55px 0 36px;z-index:5;background:var(--accent-soft);border:2px dashed var(--accent);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;color:var(--accent);font-size:15px;pointer-events:none}.drop-overlay .icon{width:32px;height:32px}.tree-view{height:100%;display:flex;flex-direction:column;min-height:0}.tree-toolbar{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border)}.search-field{display:flex;align-items:center;gap:7px;flex:1;min-width:0;border:1px solid var(--border);padding:0 6px 0 10px;background:var(--bg);border-radius:6px;color:var(--secondary)}.search-field .icon{width:14px;height:14px}.search-field input{flex:1;min-width:0;background:transparent;border:0;outline:0;font-size:11px;height:33px}.search-field:focus-within{border-color:var(--accent)}.search-field .icon-button{width:25px;height:25px}.search-status{font-size:10px;color:var(--secondary);padding:5px 16px;min-height:22px}.search-status:empty{display:none}.tree-content{flex:1;min-height:0;overflow:auto;padding:10px 13px;font:12px/1.5 var(--mono)}.tree-node{min-width:0}.node-row{display:flex;align-items:center;gap:6px;min-height:31px;min-width:0;border-radius:5px;padding:3px 5px}.node-row:hover{background:var(--soft)}.node-toggle{display:inline-flex;align-items:center;gap:6px;padding:0;min-width:0;max-width:calc(100% - 30px);text-align:left}.node-toggle::before{content:"›";font-size:18px;width:12px;flex:none;transition:transform .1s;color:var(--secondary)}.node-toggle[aria-expanded=true]::before{transform:rotate(90deg)}.node-toggle:not([aria-expanded])::before{content:"·"}.node-name{color:var(--code-key);overflow-wrap:anywhere;white-space:pre-wrap}.node-value{overflow-wrap:anywhere;white-space:pre-wrap}.node-type{font-size:9px;color:var(--secondary);padding:1px 4px;background:var(--soft);border-radius:3px;white-space:nowrap}.node-count{font-size:10px;color:var(--secondary)}.node-reveal{margin-left:auto;width:24px;height:24px;flex:none;color:var(--secondary);font-size:14px}.tree-children{margin-left:13px;padding-left:7px;border-left:1px solid var(--border)}.node-path{font-size:10px;color:var(--secondary);overflow-wrap:anywhere;margin:6px 5px 0}.tree-more{margin:5px 0 5px 17px;font-size:10px;padding:5px 9px;border:1px solid var(--border);border-radius:4px;color:var(--accent)}.search-pagination{display:flex;gap:8px;padding:14px 0}.guide{padding-top:36px}.section-heading{display:flex;align-items:baseline;gap:12px}.section-heading h2{font-size:20px;line-height:1.3;letter-spacing:-.35px;font-weight:600}.steps{padding:0;margin:24px 0 0;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}.steps li{position:relative;padding-left:41px}.step-number{position:absolute;left:0;top:0;font:11px var(--mono);padding:5px;background:var(--accent-soft);color:var(--accent);border-radius:5px}.steps h3{font-size:13px;font-weight:600;padding-top:2px}.steps p{font-size:12px;line-height:1.7;margin-top:7px;color:var(--secondary)}.examples{padding-top:46px}.example-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:23px}.example-grid figure{min-width:0;border:1px solid var(--border);border-radius:9px;background:var(--surface);margin:0;overflow:hidden}.example-grid figcaption{display:flex;align-items:center;gap:7px;padding:12px 14px;font-size:10px;border-bottom:1px solid var(--border)}.example-dot{width:5px;height:5px;border-radius:50%}.example-dot.good{background:var(--accent)}.example-dot.bad{background:var(--danger)}.example-dot.neutral{background:var(--code-number)}.example-grid pre{font:11px/1.9 var(--mono);margin:0;padding:15px;color:var(--secondary);overflow:auto}.example-error{color:var(--danger);font-weight:bold;background:var(--danger-soft)}.example-caption{color:var(--secondary);font-size:11px;margin-top:13px}.faq{padding-top:45px;padding-bottom:49px}.faq-list{margin-top:20px;border-top:1px solid var(--border)}.faq details{border-bottom:1px solid var(--border)}.faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;padding:17px 0;font-size:13px;font-weight:500}.faq summary::-webkit-details-marker{display:none}.faq summary span{color:var(--secondary);font-size:19px;font-weight:400;transition:transform .15s;flex:none}.faq details[open] summary span{transform:rotate(45deg)}.faq details p{color:var(--secondary);font-size:12px;line-height:1.8;max-width:900px;padding:0 34px 19px 0}.site-footer{display:flex;align-items:center;gap:25px;min-height:85px;border-top:1px solid var(--border);font-size:10px;color:var(--secondary)}.footer-brand{color:var(--text);font-weight:600;letter-spacing:.7px;white-space:nowrap}.footer-brand span{color:var(--secondary);font-weight:400;margin-left:6px}.site-footer>a{margin-left:auto}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 20px;background:var(--text);color:var(--surface);font-size:12px;border-radius:8px;z-index:20;max-width:90vw;box-shadow:0 3px 15px #0002}.noscript{padding:16px;color:var(--danger)}dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:22px;max-width:700px;width:90vw;box-shadow:0 10px 70px #0004}dialog::backdrop{background:#0008}.dialog-heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.dialog-heading h2{font-size:18px}dialog p{font-size:12px;color:var(--secondary);margin:12px 0}dialog textarea{display:block;resize:vertical;width:100%;height:250px;padding:12px;border:1px solid var(--border);background:var(--bg);border-radius:6px;font:12px/1.6 var(--mono)}@keyframes pulse{50%{opacity:.25}}
@media(min-width:1500px){.source-editor,.result-body{height:480px}}
@media(max-width:1060px){.toolbar{flex-wrap:wrap;gap:12px}.secondary-actions{margin-left:auto}.privacy-badge{font-size:10px}.hero-bottom>p{max-width:60%}.lossless-label{display:none}.steps{gap:22px}.view-tab{padding:5px 8px}}
@media(max-width:760px){.container{padding-left:20px;padding-right:20px}.header-inner{height:72px;padding:0 20px}.brand{font-size:18px}.brand-mark{width:36px;height:36px;font-size:19px}.header-actions{gap:10px}.header-separator{display:none}.language{padding:5px 8px}.hero{padding-top:28px;padding-bottom:23px}.hero-bottom{align-items:flex-start;flex-direction:column;gap:12px}.hero-bottom>p{max-width:100%;font-size:13px}h1{letter-spacing:-.7px}.toolbar{padding:12px;gap:12px}.primary-actions{width:100%;gap:6px}.primary-actions .button{flex:1;font-size:11px;padding:9px 8px}.secondary-actions{width:100%;justify-content:flex-end;gap:3px}.indent-label{margin-right:auto;gap:6px}.toolbar-divider{display:none}.secondary-actions .button{font-size:11px;padding:6px 8px}.editors{grid-template-columns:minmax(0,1fr)}.source-panel{border-right:0;border-bottom:1px solid var(--border)}.source-editor{height:290px}.result-body{height:340px}.panel-heading{height:49px;padding:0 12px}.panel-heading h2{font-size:11px}.panel-footer{padding:0 12px}.source-gutter,.line-number{width:39px}.drop-overlay{inset:49px 0 36px}.shortcut{display:none}.workbench-status{min-height:46px;font-size:10px}.error-card{align-items:flex-start;flex-direction:column;gap:10px;font-size:11px}.guide{padding-top:27px}.section-heading h2{font-size:18px}.steps{grid-template-columns:1fr;gap:21px;margin-top:23px}.steps li{padding-left:42px}.steps p{margin-top:4px;max-width:500px}.example-grid{grid-template-columns:1fr;gap:12px}.examples,.faq{padding-top:34px}.example-grid pre{font-size:12px}.faq summary{font-size:12px}.site-footer{flex-wrap:wrap;gap:7px 20px;padding-top:18px;padding-bottom:20px}.site-footer p{order:3;width:100%}.site-footer>a{margin-left:auto}.faq{padding-bottom:33px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
