@font-face{font-family:DM Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(./dm-sans-ext-BccsHJ30.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:DM Sans;font-style:normal;font-weight:400 700;font-display:swap;src:url(./dm-sans-CwMReqGs.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(./manrope-ext-CDracvZH.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Manrope;font-style:normal;font-weight:400 800;font-display:swap;src:url(./manrope-C46ZzDBF.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{font-family:DM Sans,sans-serif;color:#252728;background:#f7f6f2;font-synthesis:none;font-size:14px;--accent: #d6562e;--muted: #8b8b84;--line: #e6e5de;--surface: #fff;--code: #20252a}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.38}button{border:0}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button{transition:background .16s,color .16s,transform .16s}.app-shell{display:flex;min-height:100vh}.sidebar{width:248px;flex-shrink:0;background:#f0efe9;border-right:1px solid var(--line);display:flex;flex-direction:column;padding:31px 19px 0;position:fixed;inset:0 auto 0 0;z-index:20;overflow-y:auto}.brand{display:flex;gap:12px;align-items:center;padding:0 12px 30px}.brand img{width:40px;height:40px}.brand>span{font:800 27px/1 Manrope,sans-serif;letter-spacing:-1.2px}.brand-dot{color:var(--accent)}.brand small{display:block;font:500 10px/1.5 DM Sans,sans-serif;letter-spacing:2px;color:#7c7d75;margin-top:7px;text-transform:uppercase}.sidebar-caption{font-size:9px;letter-spacing:1.8px;color:#96978e;padding:21px 13px 4px;border-top:1px solid #deded5}.nav-group{margin-top:22px}.nav-group h2{font-size:10px;letter-spacing:1.1px;font-weight:600;color:#8a8d84;margin:0 13px 9px;text-transform:uppercase}.nav-tool{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;background:transparent;text-align:left;color:#696c64;border-radius:5px;font-size:12px;min-height:38px}.nav-tool:hover{background:#e7e6df;color:#252728}.nav-tool.active{color:#bb4b2b;background:#f9e7dd;font-weight:650}.active-dot{width:5px;height:5px;background:var(--accent);border-radius:50%;margin-left:auto}.privacy-note{display:flex;gap:10px;padding:38px 11px 20px;color:#6e756a;margin-top:auto}.privacy-note svg{flex-shrink:0}.privacy-note strong{font-size:11px;font-weight:600}.privacy-note p{font-size:10px;line-height:1.7;margin:5px 0 0;color:#90948b}.sidebar-bottom{display:flex;align-items:center;gap:7px;font-size:9px;padding:19px 10px;border-top:1px solid #dddfd5;color:#848b7e}.sidebar-bottom>span:last-child{margin-left:auto}.status-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:#729876;flex-shrink:0}.main-shell{margin-left:248px;min-width:0;width:calc(100% - 248px)}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 42px;gap:20px}.breadcrumb{display:flex;align-items:center;gap:13px;font-size:11px;color:#99998f}.breadcrumb strong{color:#60645c;font-weight:500}.topbar-actions{display:flex;align-items:center;gap:20px}.local-badge{display:flex;align-items:center;gap:7px;font-size:10px;color:#797f70}.language-picker{display:flex;align-items:center;gap:7px;border-left:1px solid var(--line);padding-left:20px;color:#85877c}.language-picker select{border:0;background:transparent;font-size:11px;max-width:126px;color:#64665c}.icon-button{background:transparent;color:#777c72;display:flex;align-items:center;justify-content:center;padding:7px;border-radius:4px}.icon-button:hover{background:#eae9e2}.mobile-menu{display:none}main{max-width:1560px;margin:auto;padding:40px 42px 0}.page-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;color:#888c80;letter-spacing:2px;display:flex;align-items:center;gap:8px}.eyebrow>span{width:13px;height:2px;background:var(--accent)}h1{font:750 36px/1.2 Manrope,sans-serif;letter-spacing:-1.5px;margin:12px 0}.title-dot{color:var(--accent)}.page-intro p{font-size:12px;color:#878b81;margin:0;line-height:1.6}.intro-mark{display:flex;align-items:center;gap:13px;color:#c1c3b7;padding-right:6px}.intro-mark span{font-size:9px;letter-spacing:2px;writing-mode:vertical-rl}.workspace{border:1px solid #dcded5;border-radius:8px;overflow:hidden;background:#fff;box-shadow:0 6px 24px #33372c04;animation:enter .4s both}.workspace-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;height:61px;border-bottom:1px solid var(--line)}.mode-options,.toolbar-right{display:flex;align-items:center;gap:7px}.mode-options{flex-wrap:wrap}.segment{background:transparent;color:#848a7f;padding:7px 12px;font-size:11px;border-radius:4px;display:inline-flex;align-items:center;gap:8px}.segment.selected{background:#efefe9;color:#3f493d;font-weight:600}.toolbar-right{gap:20px}.indent-select{display:flex;align-items:center;gap:7px;font-size:10px;color:#93988c}.indent-select select,.mode-options select,.settings-panel select{border:1px solid #e1e4d9;border-radius:4px;background:#f8f9f4;padding:5px 9px;color:#606655;font-size:11px}.text-button{display:flex;align-items:center;gap:7px;color:#747c6c;font-size:10px;font-weight:500;background:transparent;padding:7px 0}.text-button:hover{color:var(--accent)}.format-label{font-size:11px;font-weight:650;letter-spacing:.8px;margin:0 8px}.swap-button{display:flex;align-items:center;padding:6px;background:#f0f1eb;color:#818775;border-radius:4px}.toolbar-label{font-size:11px;color:#838b79}.editor-grid{display:grid;grid-template-columns:1fr 1fr;min-width:0}.editor-panel{min-width:0;background:var(--code);display:flex;flex-direction:column}.editor-panel+.editor-panel{border-left:1px solid #343b40}.editor-header{display:flex;align-items:center;justify-content:space-between;height:53px;background:#252b30;padding:0 17px;color:#cad0ce;gap:8px}.editor-header>div{display:flex;align-items:center;gap:10px}.editor-header h2{font-size:11px;font-weight:500;margin:0}.panel-number{font-family:monospace;font-size:9px;color:#6e777b}.code-tag{font-size:8px;letter-spacing:.7px;color:#858f91;background:#343b3e;padding:3px 6px;border-radius:3px}.editor-button{padding:5px;display:inline-flex;align-items:center;justify-content:center;background:transparent;color:#899494;border-radius:3px}.editor-button:hover{background:#3b4449;color:#dce4e1}.code-editor{height:380px;min-height:0}.code-editor .cm-editor{height:100%;font-size:12px;background:var(--code)}.code-editor .cm-scroller{font-family:SFMono-Regular,Consolas,Liberation Mono,monospace;line-height:1.95}.code-editor .cm-gutters{background:var(--code);color:#586569;border:0;font-size:10px;padding-right:8px}.code-editor .cm-content{padding:15px 0}.code-editor .cm-gutterElement{padding-top:0}.code-editor .cm-line{padding-left:8px}.code-editor .cm-activeLine,.code-editor .cm-activeLineGutter{background:#ffffff03}.code-editor .cm-focused{outline:0}.code-editor .cm-foldGutter{width:10px}.editor-footer{border-top:1px solid #30373b;background:#22282d;display:flex;align-items:center;justify-content:space-between;padding:11px 17px;color:#747f7e;font-size:9px;min-height:34px;gap:8px}.editor-footer>span{display:flex;align-items:center;gap:6px}.footer-dot{color:#495656;margin:0 3px}.valid-status{color:#8da794}.action-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px}.action-bar>div{display:flex;align-items:center;gap:22px}.primary-button{background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;gap:9px;padding:12px 18px;border-radius:5px;font-size:11px;font-weight:600;min-height:40px;box-shadow:0 2px 2px #bb522918}.primary-button:hover{background:#bf4723;transform:translateY(-1px)}.primary-button kbd{font:10px DM Sans,sans-serif;border-left:1px solid #ffffff40;color:#f4c0ae;padding-left:13px;margin-left:14px}.auto-label{display:flex;align-items:center;gap:7px;font-size:10px;color:#8b9183}.auto-label input{accent-color:var(--accent);width:13px;height:13px}.workspace-notes{display:flex;align-items:center;justify-content:space-between;color:#8c9484;font-size:9px;margin:16px 2px 0;gap:12px}.workspace-notes>div,.workspace-notes>span{display:flex;align-items:center;gap:7px}.quick-guide{margin-top:38px;display:grid;grid-template-columns:175px 1fr;border-top:1px solid var(--line);padding:22px 0 26px;gap:20px}.guide-heading{display:flex;gap:11px;align-items:flex-start}.guide-heading>span{color:var(--accent);font-size:20px;line-height:1}.guide-heading h2{font-size:11px;font-weight:600;margin:2px 0}.guide-content{display:flex;align-items:flex-start;justify-content:space-between;gap:30px}.guide-content p{font-size:11px;color:#969a8f;line-height:1.9;max-width:550px;margin:0}.guide-content>span{white-space:nowrap;font-size:8px;letter-spacing:1.7px;color:#aaa99b;margin-top:4px}.page-footer{max-width:1560px;margin:auto;display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding:22px 42px;color:#a3a69a}.page-footer>span:first-child{font:750 15px Manrope,sans-serif;letter-spacing:-.5px;color:#81887a}.page-footer p{font-size:9px;margin:0;border-left:1px solid var(--line);padding-left:12px}.page-footer>span:last-child{margin-left:auto;font-size:8px;letter-spacing:.8px}.result-state{height:380px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#707d7d;padding:30px;text-align:center}.result-state h3{font-size:13px;font-weight:500;color:#b2bcba;margin:17px 0 8px}.result-state p{font-size:11px;line-height:1.7;max-width:300px;margin:0}.error-state>span{font-size:22px;color:#df916c;border:1px solid #966248;width:38px;height:38px;border-radius:50%;padding-top:3px}.error-state h3{color:#e9b59c}.tree-view{height:380px;overflow:auto;padding:20px;font:12px/1.8 monospace;color:#c6cfc9}.tree-toggle{display:flex;align-items:center;gap:9px;background:transparent;color:#c6cfc9;padding:3px 0;width:100%;text-align:left;font-family:inherit;font-size:inherit}.tree-toggle>span:first-child{color:#798e85}.tree-type{color:#70827d;font-size:10px}.tree-children{padding-left:20px;border-left:1px solid #36433c;margin-left:4px}.tree-leaf{display:flex;gap:14px;padding:3px 0 3px 15px}.tree-node strong{font-weight:400;color:#c0a284}.tree-value.string{color:#a3bb8f}.tree-value.boolean,.tree-value.number{color:#cc9980}.tree-value{overflow-wrap:anywhere}.diff-list{height:380px;overflow:auto;padding:16px}.diff-row{padding:13px 10px;border-bottom:1px solid #344039;font:11px monospace}.diff-row>div{display:flex;gap:9px;align-items:center;color:#bfc7c4}.diff-row small{margin-left:auto;color:#8e9c94;font-family:DM Sans,sans-serif;font-size:9px}.diff-sign{color:#d3a482}.diff-row pre{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.8;margin:9px 0 0;padding-left:18px}.before{color:#d6a094}.after{color:#aac5a2}.empty-result{text-align:center;padding:100px 20px;color:#a4b6a7}.empty-result>span{font-size:30px}.empty-result h3{font-size:14px}.empty-result p{font-size:11px;color:#81948b}.comparing{grid-template-columns:1fr 1fr}.diff-result-panel{grid-column:1/-1;border-top:1px solid #343b40}.diff-result-panel .diff-list,.diff-result-panel .code-editor,.diff-result-panel .result-state{height:240px}.result-toggle{display:flex;gap:3px}.result-toggle button{font-size:9px;padding:4px 6px;background:transparent;color:#71827c;border-radius:3px}.result-toggle button.selected{background:#3a4540;color:#b6c5bd}.password-row{display:flex;align-items:center;gap:15px;padding:13px 18px;border-bottom:1px solid var(--line)}.password-row label{font-size:11px}.password-row input{padding:7px 10px;border:1px solid var(--line);border-radius:4px;font-size:11px;min-width:220px}.password-row small{color:#939b8a;font-size:9px}.settings-backdrop{position:fixed;inset:0;background:#20261b50;z-index:50;display:flex;justify-content:flex-end}.settings-panel{width:360px;max-width:100%;padding:30px;background:#f7f6f2;height:100%;box-shadow:-4px 0 35px #0001;animation:slide .2s both}.settings-panel>div{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.settings-panel h2{font:700 23px Manrope,sans-serif;margin:0}.settings-panel>label{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line);font-size:12px}.settings-panel input{accent-color:var(--accent)}.settings-panel p{color:#899080;font-size:11px;line-height:1.8;margin:25px 0}.settings-panel>.primary-button{width:100%}.toast{position:fixed;bottom:28px;left:50%;transform:translate(-50%);background:#344c39;color:#f1f4ed;padding:13px 20px;border-radius:5px;display:flex;gap:10px;font-size:12px;z-index:60;box-shadow:0 5px 20px #0002}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slide{0%{transform:translate(100%)}to{transform:translate(0)}}@media(min-width:1600px){.code-editor,.tree-view,.result-state,.diff-list{height:460px}.topbar{padding:0 55px}main{padding-top:55px}}@media(max-width:1200px){.sidebar{width:222px;padding-left:12px;padding-right:12px}.main-shell{margin-left:222px;width:calc(100% - 222px)}main{padding:30px 26px 0}.topbar{padding:0 26px}.page-footer{padding:20px 26px}.guide-content>span{display:none}.quick-guide{grid-template-columns:140px 1fr}.local-badge{display:none}.topbar-actions{gap:10px}.language-picker{border:0;padding-left:0}.primary-button kbd{display:none}.editor-header{padding:0 12px}.editor-header>div{gap:6px}}@media(max-width:850px){.sidebar{transform:translate(-100%);transition:transform .2s;width:248px}.sidebar.open{transform:translate(0)}.nav-backdrop{position:fixed;inset:0;background:#0004;z-index:19}.main-shell{margin-left:0;width:100%}.mobile-menu{display:flex}.topbar{height:65px}.page-intro{margin-bottom:24px}h1{font-size:30px}.code-editor,.tree-view,.result-state,.diff-list{height:350px}.page-footer>span:last-child{display:none}.quick-guide{margin-top:30px}.intro-mark svg{width:40px}}@media(max-width:600px){main{padding:27px 16px 0}.topbar{padding:0 13px;gap:6px}.breadcrumb{gap:5px;font-size:10px}.breadcrumb>span{display:none}.topbar-actions{gap:5px}.language-picker{gap:4px}.language-picker select{font-size:10px;max-width:105px}.page-intro p{max-width:290px;font-size:11px}.eyebrow{font-size:7px;letter-spacing:1.4px}.intro-mark{display:none}h1{font-size:29px;letter-spacing:-1px}.editor-grid,.comparing{grid-template-columns:1fr}.editor-panel+.editor-panel{border-left:0;border-top:1px solid #39423c}.workspace-toolbar{height:auto;min-height:60px;padding:11px;gap:7px;flex-wrap:wrap}.toolbar-right{gap:12px;margin-left:auto}.segment{padding:6px 8px;font-size:10px}.code-editor,.tree-view,.result-state,.diff-list{height:280px}.action-bar{padding:14px 12px;gap:8px;flex-wrap:wrap}.action-bar>div{gap:12px;flex-wrap:wrap}.primary-button{padding:11px 13px;font-size:10px}.action-bar>.text-button{font-size:9px}.workspace-notes{font-size:8px;align-items:flex-start}.workspace-notes>span{display:none}.quick-guide{display:block;padding:19px 0;margin-top:26px}.guide-heading{margin-bottom:12px}.guide-content p{font-size:10px}.page-footer{padding:18px 16px}.password-row{flex-wrap:wrap;gap:9px}.password-row input{min-width:0;flex:1}.password-row small{width:100%}.diff-result-panel{grid-column:auto}.result-toggle button{font-size:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
