@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0c1017;--surface:#121823;--surface2:#161e2b;--surface3:#1b2533;--border:#263244;--border2:#324056;--text:#eaf0fa;--muted:#929eb0;--faint:#657286;--accent:#9aaaff;--accent2:#c1cbff;--green:#68d6ac;--red:#ff8f9c;--yellow:#f1ca78;--shadow:0 20px 70px #0003;--sans:'DM Sans',sans-serif;--display:'Manrope',sans-serif;--mono:'DM Mono',monospace}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 50% 0,#172033 0%,var(--bg) 55%);color:var(--text);font-family:var(--sans);min-height:100vh}.topbar{height:70px;padding:0 max(calc((100vw - 1260px)/2),32px);display:flex;align-items:center;gap:30px;border-bottom:1px solid #ffffff0b;background:#0d121bba;backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:10px;color:var(--text);font:600 16px var(--display);text-decoration:none;letter-spacing:-.4px}.brand b{font-weight:800}.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,#a3b0ff,#687ae1);color:#101523;font:500 14px var(--mono);box-shadow:0 4px 20px #788cf444}.privacy{font:12px var(--sans);color:var(--muted);display:flex;align-items:center;gap:8px}.privacy-dot{width:7px;height:7px;background:#72d6af;border-radius:50%;box-shadow:0 0 9px #72d6af88}.privacy-sep{color:#4e5b6f}.top-actions{margin-left:auto;display:flex;gap:9px;align-items:center}.quiet-button,.icon-button,.toolbar-button,.text-button,.search-button{font:500 12px var(--sans);color:var(--text);border:1px solid var(--border);background:#161d29;border-radius:8px;cursor:pointer;transition:.18s}.quiet-button{padding:9px 13px}.icon-button{width:34px;height:34px;font-size:16px}.quiet-button:hover,.icon-button:hover,.toolbar-button:hover,.text-button:hover{background:#222c3c;border-color:var(--border2)}button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.shell{max-width:1170px;margin:0 auto;padding:66px 28px 34px}.intro{margin:0 0 42px 5px}.eyebrow{display:flex;gap:10px;align-items:center;color:#a5b1ff;font:500 10px var(--mono);letter-spacing:1.4px}.eyebrow-line{width:22px;height:1px;background:#8697ff}.intro h1{font:700 clamp(36px,5vw,56px)/1.12 var(--display);letter-spacing:-2.7px;margin:19px 0 12px}.intro h1 span{color:#8d9aff}.intro p{margin:0;color:#aab4c4;font-size:14px;max-width:540px;line-height:1.65}.intro-meta{display:flex;align-items:center;gap:9px;margin-top:20px;color:#8390a4;font-size:11px}.intro-meta span:not(.local-icon){color:#4e5a6b}.local-icon{color:#79d2af;font-size:14px}.workspace{background:linear-gradient(135deg,#121923,#101620);border:1px solid #293445;border-radius:13px;box-shadow:var(--shadow);overflow:hidden}.workspace-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 22px;height:58px}.tabs{height:100%;display:flex;gap:22px}.tab{position:relative;background:none;border:0;color:#8390a3;font:500 12px var(--sans);cursor:pointer;padding:0 2px}.tab.active{color:#e4eaff}.tab.active:after{content:"";height:2px;position:absolute;bottom:-1px;left:0;right:0;background:#a4b0ff;border-radius:2px}.head-actions{display:flex;align-items:center;gap:8px}.status{margin-right:10px;color:#8390a3;font:11px var(--mono)}.toolbar-button{padding:8px 11px;font-size:11px}.primary-button{background:#8495f1;border-color:#8495f1;color:#111728;font-weight:700}.primary-button:hover{background:#a0adff;border-color:#a0adff}.panel{padding:22px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.editor-card,.inspector-card,.tree-card,.diff-card{border:1px solid var(--border);background:#111823;border-radius:9px;overflow:hidden}.card-heading{display:flex;align-items:center;justify-content:space-between;padding:14px 15px;border-bottom:1px solid #273142;min-height:53px}.card-heading>div:first-child{display:flex;align-items:center;gap:9px}.card-heading h2{margin:0;color:#e5ebf6;font:600 12px var(--display)}.step{font:10px var(--mono);letter-spacing:.5px;color:#8596e8}.card-caption{color:#748195;font-size:10px;margin-left:3px}.text-button{border:0;background:none;color:#a8b3c5;padding:5px 7px;font-size:10px}.text-button:hover{color:#d9e0ee;background:#1d2837}.compact-actions{display:flex;gap:4px}.editor-card textarea,.diff-card textarea{width:100%;height:244px;resize:vertical;border:0;border-radius:0;background:#0f151e;color:#d6e1f2;padding:17px 16px;font:11px/1.75 var(--mono);tab-size:2;outline:0}.editor-card textarea:focus,.diff-card textarea:focus{box-shadow:inset 0 0 0 1px #7183d8}.editor-card textarea::placeholder,.diff-card textarea::placeholder{color:#637187}.editor-footer{height:32px;display:flex;justify-content:space-between;align-items:center;padding:0 13px;background:#111823;color:#718096;font:9px var(--mono)}.parse-state{display:flex;align-items:center;gap:6px}.parse-state i{width:6px;height:6px;border-radius:50%;background:#718096}.parse-state.valid{color:#74d6b0}.parse-state.valid i{background:#74d6b0;box-shadow:0 0 7px #74d6b066}.parse-state.invalid{color:#ff9ba5}.parse-state.invalid i{background:#ff8592}.code-output{height:244px;overflow:auto;margin:0;padding:17px 16px;background:#0f151e;color:#d6e1f2;font:11px/1.75 var(--mono);white-space:pre;tab-size:2}.placeholder-code{color:#637187}.editor-footer span:last-child{color:#8090a5}.inspector-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:13px;margin-top:13px}.inspector-card{min-height:129px}.inspector-heading{min-height:47px;padding:12px 15px}.subtle-label{color:#667489;font-size:9px}.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);padding:15px 10px}.stat{display:flex;flex-direction:column;align-items:center;gap:6px;border-right:1px solid #263142}.stat:last-child{border:0}.stat span{color:#77869a;font-size:9px}.stat b{font:500 14px var(--mono);color:#d7e0f1}.search-row{display:flex;gap:7px;padding:11px 13px 5px}.search-input-wrap{display:flex;align-items:center;gap:8px;flex:1;height:30px;background:#0e151e;border:1px solid #273446;border-radius:6px;padding:0 9px;color:#8795a9}.search-input-wrap>span{font-size:17px}.search-input-wrap input{min-width:0;flex:1;background:none;border:0;outline:0;color:#e5ebf6;font:10px var(--mono)}.search-input-wrap input::placeholder{color:#5d6b80}.search-input-wrap kbd{font:9px var(--mono);color:#718096;border:1px solid #2b394d;border-radius:3px;padding:2px 4px}.search-button{padding:0 12px;font-size:10px;background:#202b3c}.search-results{height:27px;overflow:hidden;padding:3px 15px 8px;color:#718096;font-size:9px}.search-hit{color:#b4c0d2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.search-hit code{color:#9eadff;font:9px var(--mono)}.search-more{color:#8f9bef;margin-left:4px}.tree-card{margin-top:13px}.tree-heading{min-height:52px}.tree-view{max-height:330px;overflow:auto;padding:10px 15px 15px;font:10px/1.9 var(--mono);color:#b5c1d2}.tree-empty{padding:10px 2px 20px;color:#667489;font:10px var(--sans)}.tree-node{white-space:nowrap;min-height:20px}.tree-row{display:flex;align-items:center;gap:7px;min-height:21px}.tree-toggle{width:14px;padding:0;border:0;background:none;color:#91a0b8;font:10px var(--mono);cursor:pointer}.tree-key{color:#c5d0e0}.tree-index{color:#7e91da}.tree-colon{color:#718096}.tree-value.string{color:#85d1b2}.tree-value.number{color:#e6c178}.tree-value.boolean{color:#eda0b0}.tree-value.null{color:#8191a9}.tree-type{color:#75849a}.path-button{border:0;background:none;color:#718096;font:9px var(--mono);cursor:pointer;padding:0 2px;opacity:0}.tree-row:hover .path-button,.path-button:focus-visible{opacity:1}.path-button:hover{color:#a9b5ff}.tree-children{border-left:1px solid #293547;margin-left:6px}.tree-node.collapsed>.tree-children{display:none}.diff-panel[hidden],.panel[hidden]{display:none!important}.diff-intro{display:flex;align-items:center;justify-content:space-between;padding:10px 2px 20px}.diff-intro h2{font:600 20px var(--display);letter-spacing:-.6px;margin:7px 0 5px}.diff-intro p{font-size:11px;color:#8491a3;margin:0}.diff-inputs{display:grid;grid-template-columns:1fr 1fr;gap:13px}.diff-card-head{height:41px;padding:0 13px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font:11px var(--display)}.diff-card textarea{height:210px}.diff-summary{display:flex;gap:9px;margin-top:15px;align-items:center;min-height:33px;font:10px var(--mono)}.diff-empty{color:#718096}.diff-count{padding:5px 8px;border-radius:5px;background:#171f2b}.diff-count.added{color:#7bd9b4;background:#183027}.diff-count.removed{color:#ff9ba5;background:#321f27}.diff-count.changed{color:#edca7d;background:#302a1b}.diff-results{border:1px solid var(--border);border-radius:8px;overflow:hidden}.diff-row{display:grid;grid-template-columns:100px 1fr 1fr;gap:10px;padding:11px 13px;border-bottom:1px solid #242f3f;align-items:center;font:10px var(--mono)}.diff-row:last-child{border-bottom:0}.diff-row code{color:#aebcff;overflow:hidden;text-overflow:ellipsis}.diff-row pre{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#a9b5c7}.diff-kind{font-size:9px;text-transform:uppercase;letter-spacing:.6px}.diff-row.added{background:#13231e}.diff-row.added .diff-kind{color:#74d5ad}.diff-row.removed{background:#26191f}.diff-row.removed .diff-kind{color:#f38d9c}.diff-row.changed{background:#252217}.diff-row.changed .diff-kind{color:#eac572}.diff-none{padding:20px;color:#7fd4b2;font-size:11px}.work-footer{height:42px;border-top:1px solid #263142;display:flex;justify-content:space-between;align-items:center;padding:0 18px;color:#6d7a8e;font-size:9px}.footer-lock{color:#76d3ae;margin-left:3px}.page-footer{display:flex;justify-content:space-between;margin-top:20px;padding:0 5px;color:#617085;font-size:10px}.page-footer span:first-child{color:#7f8ba0}.page-footer #version{font:9px var(--mono);padding-left:4px;color:#5f6c80}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);opacity:0;padding:10px 15px;background:#e9eefb;color:#17202d;border-radius:7px;font:11px var(--sans);box-shadow:0 8px 35px #0008;transition:.2s;pointer-events:none;z-index:5}.toast.show{opacity:1;transform:translate(-50%,0)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
body.light{color-scheme:light;--bg:#f3f5fa;--surface:#fff;--surface2:#f4f6fb;--surface3:#e8edf8;--border:#dce2ee;--border2:#c7d0df;--text:#1b2533;--muted:#627188;--faint:#8190a5;--shadow:0 20px 55px #4050701c;background:radial-gradient(ellipse at 50% 0,#e3e8fc 0%,var(--bg) 55%)}body.light .topbar{background:#ffffffc9;border-color:#dce2ee}body.light .workspace{background:#fff;border-color:#dce2ee}body.light .editor-card,body.light .inspector-card,body.light .tree-card,body.light .diff-card{background:#fff;border-color:#dce2ee}body.light .editor-card textarea,body.light .diff-card textarea,body.light .code-output{background:#f7f9fc;color:#29364b}body.light .workspace-head,body.light .card-heading,body.light .diff-card-head,body.light .work-footer{border-color:#e1e6ef}body.light .editor-footer{background:#f5f7fb}body.light .toolbar-button,body.light .quiet-button,body.light .icon-button,body.light .search-button{background:#f5f7fb;color:#273449;border-color:#dce2ee}body.light .primary-button{background:#7788e9;color:white;border-color:#7788e9}body.light .tab{color:#77859a}body.light .tab.active{color:#313c57}body.light .card-heading h2,body.light .diff-intro h2{color:#202a3b}body.light .intro p{color:#53647b}body.light .diff-row.added{background:#f1faf6}body.light .diff-row.removed{background:#fff5f6}body.light .diff-row.changed{background:#fdf9ed}
@media(max-width:800px){.topbar{padding:0 20px}.privacy{display:none}.shell{padding:45px 16px 24px}.intro{margin-left:2px}.intro h1{letter-spacing:-1.8px}.panel{padding:14px}.workspace-head{padding:0 13px}.status{display:none}.editor-grid,.inspector-grid{grid-template-columns:1fr}.editor-card textarea,.code-output{height:205px}.inspector-card{min-height:120px}.diff-inputs{grid-template-columns:1fr}.diff-intro{align-items:flex-start;gap:12px;flex-direction:column}.diff-row{grid-template-columns:65px minmax(0,1fr);gap:7px}.diff-row pre{grid-column:2}.head-actions{gap:5px}.toolbar-button{padding:7px 8px;font-size:10px}.tabs{gap:14px}.card-caption{display:none}}@media(max-width:430px){.topbar{height:58px;padding:0 13px}.brand{font-size:14px}.quiet-button{padding:8px 9px}.shell{padding:34px 10px 20px}.intro{margin-bottom:28px}.intro h1{font-size:38px}.intro p{font-size:12px}.intro-meta{font-size:9px}.workspace{border-radius:9px}.workspace-head{height:50px}.panel{padding:10px}.card-heading{padding:12px 10px}.editor-card textarea,.code-output{padding:13px 10px;font-size:10px}.head-actions .toolbar-button:first-of-type{display:none}.work-footer{padding:0 10px;font-size:8px}.page-footer{font-size:9px}.diff-row{font-size:9px}}
