:root{--bg-color: #f3f4f6;--panel-bg: #ffffff;--border-color: #e5e7eb;--text-color: #1f2937;--text-secondary: #6b7280;--header-bg: #ffffff;--line-num-bg: #f9fafb;--line-num-text: #9ca3af;--hover-bg: #f3f4f6;--active-bg: #e5e7eb;--primary-color: #2563eb;--primary-hover: #1d4ed8;--danger-color: #ef4444;--success-color: #10b981;--string-color: #059669;--number-color: #d97706;--boolean-color: #7c3aed;--null-color: #6b7280;--key-color: #0f172a;--font-size: 14px;--line-height: 16px;--output-line-height: calc(var(--font-size) + 4px);--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05)}[data-theme=dark]{--bg-color: #111827;--panel-bg: #1f2937;--border-color: #374151;--text-color: #f3f4f6;--text-secondary: #9ca3af;--header-bg: #1f2937;--line-num-bg: #111827;--line-num-text: #6b7280;--hover-bg: #374151;--active-bg: #4b5563;--primary-color: #3b82f6;--primary-hover: #60a5fa;--string-color: #34d399;--number-color: #fbbf24;--boolean-color: #a78bfa;--null-color: #9ca3af;--key-color: #93c5fd;--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, .3);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .4);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .5)}[data-theme=monokai]{--bg-color: #272822;--panel-bg: #272822;--border-color: #49483e;--text-color: #f8f8f2;--line-num-bg: #3e3d32;--line-num-text: #90908a;--primary-color: #f92672;--string-color: #e6db74;--number-color: #ae81ff;--boolean-color: #ae81ff;--null-color: #ae81ff;--key-color: #66d9ef;--hover-bg: #3e3d32;--header-bg: #1e1f1c}[data-theme=solarized-light]{--bg-color: #fdf6e3;--panel-bg: #fdf6e3;--border-color: #93a1a1;--text-color: #657b83;--line-num-bg: #eee8d5;--line-num-text: #93a1a1;--primary-color: #268bd2;--string-color: #2aa198;--number-color: #d33682;--boolean-color: #b58900;--null-color: #b58900;--key-color: #859900;--hover-bg: #eee8d5;--header-bg: #eee8d5}[data-theme=dracula]{--bg-color: #282a36;--panel-bg: #282a36;--border-color: #44475a;--text-color: #f8f8f2;--line-num-bg: #44475a;--line-num-text: #6272a4;--primary-color: #bd93f9;--string-color: #f1fa8c;--number-color: #ff79c6;--boolean-color: #8be9fd;--null-color: #8be9fd;--key-color: #50fa7b;--hover-bg: #44475a;--header-bg: #191a21}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--bg-color);color:var(--text-color);margin:0;padding:0}.app-layout{height:100vh;display:flex;flex-direction:column}body[data-landing-page] .app-layout{height:auto;min-height:100vh}body[data-landing-page] .editor-container{min-height:640px;flex:none}header{background-color:var(--header-bg);padding:0 24px;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;height:64px;box-shadow:var(--shadow-sm);z-index:10}h1,.site-title{font-size:1.25rem;font-weight:700;color:var(--text-color);display:flex;align-items:center;gap:8px;letter-spacing:-.025em}.actions{display:flex;align-items:center;gap:12px}.actions button{padding:8px;background-color:var(--panel-bg);color:var(--text-color);border:1px solid var(--border-color);border-radius:var(--radius-md);cursor:pointer;font-size:.9rem;font-weight:500;transition:all .2s ease;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;box-shadow:var(--shadow-sm)}.actions button:hover{background-color:var(--hover-bg);border-color:var(--text-secondary)}.actions button:active{transform:translateY(1px)}#format-btn{background-color:transparent;color:var(--primary-color);border-color:transparent}#format-btn:hover{background-color:var(--hover-bg);color:var(--primary-color)}#clear-btn{color:var(--danger-color);border-color:transparent;background:transparent;box-shadow:none}#clear-btn:hover{background-color:var(--hover-bg);color:var(--danger-color)}#feedback-btn{background-color:transparent;border-color:transparent;color:var(--text-secondary);box-shadow:none}#compress-btn:hover,#upload-btn:hover{background-color:var(--hover-bg);color:var(--primary-color)}.panel-header .icon-btn{color:var(--text-secondary)}header .icon-btn{background-color:transparent;border:1px solid transparent;color:var(--text-secondary);padding:8px;border-radius:var(--radius-md);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}header .icon-btn:hover{background-color:var(--hover-bg);color:var(--text-color)}.editor-container{display:flex;flex:1;overflow:hidden;padding:16px;gap:16px}.panel{flex:1;display:flex;flex-direction:column;background:var(--panel-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);min-width:0;overflow:hidden;box-shadow:var(--shadow-sm);transition:box-shadow .2s}.panel:hover{box-shadow:var(--shadow-md)}.panel-header{padding:0 16px;background-color:var(--bg-color);border-bottom:1px solid var(--border-color);font-size:.9rem;font-weight:600;color:var(--text-color);display:flex;justify-content:space-between;align-items:center;height:48px}.panel-actions{display:flex;align-items:center;gap:4px}.panel-header .icon-btn{background:transparent;border:1px solid transparent;cursor:pointer;padding:6px;border-radius:var(--radius-sm);color:var(--text-secondary);transition:all .2s;display:flex;align-items:center;justify-content:center}.panel-header .icon-btn:hover{background-color:var(--hover-bg);color:var(--primary-color)}.panel-header .icon-btn:disabled{color:var(--line-num-text);cursor:not-allowed;opacity:.55}.panel-header .icon-btn:disabled:hover{background-color:transparent;color:var(--line-num-text)}#feedback-btn{color:#06b6d4;border:none;box-shadow:none;background-color:transparent}#feedback-btn:hover{background-color:#06b6d41a}#theme-dropdown-btn{color:#a855f7;border:none;box-shadow:none;background-color:transparent;outline:none}#theme-dropdown-btn:hover{background-color:transparent;color:#a855f7;transform:scale(1.1);border:none}#lang-btn{color:#ea580c;border:none;box-shadow:none;background-color:transparent}#lang-btn:hover{background-color:#ea580c1a;color:#ea580c}#clear-btn{color:var(--danger-color)}#clear-btn:hover{background-color:#ef44441a}#upload-btn{color:#8b5cf6}#upload-btn:hover{background-color:#8b5cf61a}#to-xml-btn{color:#f59e0b}#to-xml-btn:hover{background-color:#f59e0b1a}#to-yaml-btn{color:#6366f1}#to-yaml-btn:hover{background-color:#6366f11a}#download-btn{color:var(--success-color)}#download-btn:hover{background-color:#10b9811a}#copy-result-btn{color:var(--primary-color)}#copy-result-btn:hover{background-color:#2563eb1a}#expand-all-btn,#collapse-all-btn{color:#ec4899}#expand-all-btn:hover,#collapse-all-btn:hover{background-color:#ec48991a}.editor-wrapper{flex:1;display:flex;position:relative;overflow:hidden;background-color:var(--panel-bg)}.line-numbers{width:48px;background-color:var(--line-num-bg);border-right:1px solid var(--border-color);padding:12px 8px 12px 0;text-align:right;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:var(--font-size);line-height:var(--line-height);color:var(--line-num-text);-webkit-user-select:none;user-select:none;overflow:hidden}.line-numbers div{height:var(--line-height);line-height:var(--line-height)!important}.input-backdrop{position:absolute;top:0;left:48px;right:0;bottom:0;background-color:var(--panel-bg);z-index:0;overflow:hidden;pointer-events:none}#json-input{flex:1;border:none;padding:12px;resize:none;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:var(--font-size)!important;line-height:var(--line-height)!important;outline:none;white-space:pre;overflow:auto;background-color:transparent;color:var(--text-color);position:relative;z-index:1}.error-highlight-row{position:absolute;left:0;right:0;background-color:#ef444426;z-index:1}#json-output{flex:1;padding:12px;font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:var(--font-size)!important;line-height:var(--output-line-height)!important;overflow:auto;white-space:pre;color:var(--text-color)}#output-line-numbers{line-height:var(--output-line-height)}#output-line-numbers div{height:var(--output-line-height);line-height:var(--output-line-height)!important}.json-row{display:flex;align-items:center;min-height:var(--output-line-height);line-height:var(--output-line-height);padding-left:8px;position:relative}.json-row>*:not(.json-string){flex-shrink:0}.json-row:hover{background-color:var(--hover-bg)}.json-key{color:var(--key-color);font-weight:600}.json-string{color:var(--string-color)}.json-number{color:var(--number-color)}.json-boolean{color:var(--boolean-color);font-weight:600}.json-null{color:var(--null-color);font-style:italic}.fold-btn{display:inline-block;vertical-align:middle;width:16px;height:16px;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='9 18 15 12 9 6'%3E%3C/polyline%3E%3C/svg%3E");background-size:cover;transition:transform .2s;opacity:.7;margin-right:2px}.fold-btn:hover{opacity:1}.fold-btn.expanded{transform:rotate(90deg)}.fold-placeholder{display:inline-block;color:var(--text-secondary);font-size:.8em;padding:0 6px;background-color:var(--active-bg);border-radius:var(--radius-sm);margin:0 4px;cursor:pointer}.panel-footer{display:flex;justify-content:space-between;align-items:center;padding:8px 16px;background-color:var(--panel-bg);border-top:1px solid var(--border-color);height:52px}.filter-input{padding:8px 12px;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-color);color:var(--text-color);font-size:.85rem;outline:none;transition:all .2s;width:100%;max-width:300px}.filter-input:focus{border-color:var(--primary-color);background-color:var(--panel-bg);box-shadow:0 0 0 2px #2563eb1a}.font-size-group{display:flex;background-color:var(--bg-color);padding:2px;border-radius:var(--radius-md);border:1px solid var(--border-color)}.font-btn{padding:4px 10px;border:none;background:transparent;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:600}.font-btn:hover{color:var(--text-color)}.font-btn.active{background-color:var(--panel-bg);color:var(--primary-color);box-shadow:var(--shadow-sm)}.btn-group{display:inline-flex;align-items:center;margin-left:8px;opacity:0;transition:opacity .2s}.json-row:hover .btn-group{opacity:1}.copy-btn,.copy-line-btn{padding:2px;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;margin-left:4px}.copy-btn:hover,.copy-line-btn:hover{color:var(--primary-color);background-color:#2563eb1a}.copy-key-btn{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;padding:2px;margin-right:4px;cursor:pointer;color:var(--text-secondary);opacity:0;transition:all .2s;border-radius:var(--radius-sm)}.json-row:hover .copy-key-btn{opacity:1}.copy-key-btn:hover{color:var(--primary-color);background-color:#2563eb1a}.error-message{position:absolute;bottom:0;left:48px;right:0;background-color:#fef2f2;color:#b91c1c;border-top:1px solid #fecaca;padding:8px 12px;font-size:.85rem;z-index:5}.error-line{background-color:#ef444426;position:relative}.error-line:before{content:"";position:absolute;left:0;width:4px;height:100%;background-color:var(--danger-color)}.toast{position:fixed;top:24px;left:50%;transform:translate(-50%) translateY(-20px);background-color:#1f2937;color:#fff;padding:10px 20px;border-radius:99px;font-size:.9rem;font-weight:500;opacity:0;transition:all .3s cubic-bezier(.175,.885,.32,1.275);pointer-events:none;z-index:2000;box-shadow:var(--shadow-md)}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}.theme-dropdown-container{position:relative}.theme-dropdown-btn{display:flex;align-items:center;justify-content:center;gap:0;padding:8px;border:1px solid transparent;border-radius:var(--radius-md);background-color:transparent;color:var(--text-secondary);font-size:.85rem;cursor:pointer;width:36px;height:36px;transition:all .2s}.theme-dropdown-btn:hover{border-color:transparent;background-color:var(--hover-bg);color:var(--text-color)}#current-theme-label,.theme-dropdown-btn .chevron-down,#lang-text{display:none}.theme-dropdown-menu{position:absolute;top:100%;right:0;margin-top:6px;background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-md);z-index:1000;min-width:180px;padding:6px;animation:fadeIn .1s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.theme-option{padding:8px 12px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px;cursor:pointer;font-size:.9rem;color:var(--text-color)}.theme-option:hover{background-color:var(--hover-bg);color:var(--primary-color)}.color-preview{width:14px;height:14px;border-radius:50%;border:1px solid var(--border-color);display:inline-block}.color-preview.light{background-color:#fff}.color-preview.dark{background-color:#1f2937;border-color:#374151}.color-preview.monokai{background-color:#272822;border-color:#49483e}.color-preview.solarized-light{background-color:#fdf6e3;border-color:#93a1a1}.color-preview.dracula{background-color:#282a36;border-color:#44475a}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0006;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:2000;display:flex;align-items:center;justify-content:center}.modal-content{background-color:var(--panel-bg);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-lg);max-width:600px;width:90%;overflow:hidden;display:flex;flex-direction:column}.modal-header{background-color:var(--panel-bg);border-bottom:1px solid var(--border-color);padding:16px 24px;display:flex;justify-content:space-between;align-items:center}#modal-title{font-size:1.1rem;font-weight:600;color:var(--text-color)}.modal-body{padding:24px;color:var(--text-color);font-size:.95rem;line-height:1.6;overflow-y:auto;max-height:70vh}.modal-footer{background-color:var(--bg-color);padding:16px 24px;border-top:1px solid var(--border-color);display:flex;justify-content:flex-end;gap:12px}.modal-footer button{padding:8px 16px;border:1px solid var(--border-color);background-color:var(--panel-bg);color:var(--text-color);border-radius:var(--radius-md);cursor:pointer;font-weight:500;transition:all .2s}.modal-footer button:hover{background-color:var(--hover-bg);border-color:var(--text-secondary)}.modal-footer button:last-child{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.modal-footer button:last-child:hover{background-color:var(--primary-hover);border-color:var(--primary-hover)}.close-btn{color:var(--text-secondary);transition:color .2s;font-size:1.5rem;cursor:pointer;line-height:1}.close-btn:hover{color:var(--text-color)}.feedback-modal-content{max-width:480px}.contact-info{margin-top:16px;padding:12px;background-color:var(--hover-bg);border-radius:var(--radius-md);text-align:center;font-weight:500;border:1px solid var(--border-color)}.contact-info a{color:var(--primary-color);text-decoration:none}.contact-info a:hover{text-decoration:underline}#modal-text{width:100%;height:300px;padding:12px;border:1px solid var(--border-color);border-radius:var(--radius-md);background-color:var(--bg-color);color:var(--text-color);font-family:JetBrains Mono,Fira Code,Consolas,monospace;font-size:.85rem;resize:none;outline:none;line-height:1.5}#modal-text:focus{border-color:var(--primary-color);background-color:var(--panel-bg);box-shadow:0 0 0 2px #2563eb1a}.site-footer{background-color:var(--panel-bg);color:var(--text-secondary);padding:16px 0;border-top:1px solid var(--border-color);font-size:.8rem;text-align:center}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#d1d5db;border-radius:5px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background-color:#9ca3af}[data-theme=dark] ::-webkit-scrollbar-thumb{background-color:#4b5563}[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background-color:#6b7280}.checkbox-container{color:var(--text-color);display:flex;align-items:center;position:relative;padding-left:26px;margin-bottom:0;cursor:pointer;font-size:.9rem;-webkit-user-select:none;user-select:none;font-weight:500}.checkbox-container input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.checkmark{position:absolute;top:50%;left:0;transform:translateY(-50%);height:18px;width:18px;background-color:var(--bg-color);border:1px solid var(--border-color);border-radius:4px;transition:all .2s}.checkbox-container:hover input~.checkmark{background-color:var(--hover-bg);border-color:var(--primary-color)}.checkbox-container input:checked~.checkmark{background-color:var(--primary-color);border-color:var(--primary-color)}.checkmark:after{content:"";position:absolute;display:none}.checkbox-container input:checked~.checkmark:after{display:block}.checkbox-container .checkmark:after{left:6px;top:2px;width:4px;height:9px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}#global-tooltip{position:fixed;background-color:#1f2937;color:#fff;padding:6px 10px;font-size:12px;border-radius:4px;box-shadow:var(--shadow-md);z-index:9999;pointer-events:none;opacity:0;transition:opacity .2s;white-space:nowrap}#global-tooltip.show{opacity:1}.hidden{display:none!important}.highlight-text{background-color:#fde047;color:#000;border-radius:2px}.site-footer{background-color:var(--header-bg);color:var(--text-color);text-align:center;padding:10px 0;font-size:.85rem;border-top:1px solid var(--border-color)}.landing-hero{padding:28px 24px;background:radial-gradient(circle at top left,rgba(37,99,235,.14),transparent 38%),linear-gradient(180deg,#ffffffbf,#fff0);border-bottom:1px solid var(--border-color)}[data-theme=dark] .landing-hero,[data-theme=monokai] .landing-hero,[data-theme=dracula] .landing-hero{background:radial-gradient(circle at top left,rgba(59,130,246,.18),transparent 40%),linear-gradient(180deg,#1118274d,#11182700)}.landing-inner,.landing-content-inner{max-width:1200px;margin:0 auto}.landing-inner{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,.9fr);gap:20px;align-items:start}.landing-breadcrumbs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;font-size:.9rem;color:var(--text-secondary)}.landing-breadcrumbs a,.landing-link-chip{color:var(--primary-color);text-decoration:none}.landing-breadcrumbs a:hover,.landing-link-chip:hover{text-decoration:underline}.landing-kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:10px;color:var(--primary-color);font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.landing-title{font-size:clamp(2rem,3vw,2.8rem);line-height:1.05;letter-spacing:-.03em;margin-bottom:12px}.landing-intro,.landing-side-copy,.landing-section p,.landing-faq-item p{color:var(--text-secondary);line-height:1.7}.landing-cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0 18px}.landing-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:999px;background-color:var(--primary-color);color:#fff;text-decoration:none;font-weight:600;box-shadow:var(--shadow-sm);transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}.landing-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--shadow-md)}.landing-btn-secondary{background-color:transparent;color:var(--text-color);border:1px solid var(--border-color)}.landing-btn-secondary:hover{background-color:var(--hover-bg);color:var(--text-color);border-color:var(--text-secondary)}.landing-bullet-list,.landing-step-list{list-style:none;padding:0;margin:0}.landing-bullet-list li{position:relative;padding-left:18px;margin-bottom:10px;line-height:1.6}.landing-bullet-list li:before{content:"";position:absolute;top:.7em;left:0;width:8px;height:8px;border-radius:999px;background-color:var(--primary-color)}.landing-side-card,.landing-card,.landing-faq-item{background-color:var(--panel-bg);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.landing-side-card{padding:18px}.landing-side-label{margin-bottom:10px;font-size:.85rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}.landing-chip-list{display:flex;gap:10px;flex-wrap:wrap}.landing-link-chip{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--border-color);background-color:var(--bg-color);font-size:.92rem}.landing-side-copy{margin-top:16px}.landing-content{padding:28px 24px 40px}.landing-section{margin-bottom:28px}.landing-section:last-child{margin-bottom:0}.landing-section h2{margin-bottom:12px;font-size:1.45rem;letter-spacing:-.02em}.landing-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.landing-card{padding:18px}.landing-card p{line-height:1.6}.landing-step-list li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--border-color)}.landing-step-list li:first-child{border-top:0}.landing-step-index{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background-color:var(--hover-bg);color:var(--primary-color);font-weight:700}.landing-faq-item{padding:18px;margin-bottom:12px}.landing-faq-item:last-child{margin-bottom:0}.landing-faq-item h3{margin-bottom:8px;font-size:1.05rem}@media(max-width:980px){.landing-inner,.landing-card-grid{grid-template-columns:1fr}}@media(max-width:720px){body[data-landing-page] .editor-container{min-height:520px}.landing-hero,.landing-content{padding-left:16px;padding-right:16px}.landing-title{font-size:1.8rem}.landing-cta-row{flex-direction:column}.landing-btn{width:100%}}