json-formatter{display:contents}.tool-layout{grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:2.5rem;width:96%;max-width:1600px;margin:2rem auto;padding:0 1rem;display:grid}.jsonFormatter{grid-area:1/1}.json-playground{grid-area:1/2}@media (max-width:1100px){.tool-layout{grid-template-columns:1fr;gap:1.5rem;width:92%}.jsonFormatter{grid-area:2/1}.json-playground{grid-area:1/1;position:static!important}.json-playground .examples{-webkit-overflow-scrolling:touch;gap:.6rem;padding-bottom:.75rem;overflow-x:auto;flex-direction:row!important;justify-content:flex-start!important}.json-playground .example-btn{white-space:nowrap;flex:none;width:auto!important}}.visually-hidden{clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;position:absolute!important;overflow:hidden!important}::selection{background:var(--text-accent);color:var(--bg-body)}.jsonFormatter{background:var(--bg-surface);border:1px solid var(--border-light);width:100%;color:var(--text-main);border-radius:16px;flex-direction:column;gap:1.25rem;padding:2rem;display:flex;box-shadow:0 4px 20px rgba(0,0,0,.03)}.formatter-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:flex-start;padding-bottom:1rem;display:flex}.header-title-group{flex-direction:column;gap:.25rem;display:flex}.jsonFormatter h1{margin:0;font-size:1.4rem;font-weight:800}.header-subtitle{color:var(--text-muted);margin:0;font-size:.85rem;font-weight:400;line-height:1.4}#size-indicator{color:var(--text-muted);background:var(--bg-input);border:1px solid var(--border-light);white-space:nowrap;border-radius:6px;flex-shrink:0;align-self:flex-start;padding:4px 8px;font-family:ui-monospace,monospace;font-size:.7rem;transition:opacity .2s;display:inline-block}#size-indicator:empty{display:none}.field-group{flex-direction:column;width:100%;display:flex}.field-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-top:.5rem;margin-bottom:.5rem;font-family:ui-monospace,monospace;font-size:.75rem;font-weight:700;display:block}#output-section:has(#json-output:placeholder-shown){display:none}.jsonFormatter textarea{border:1px solid var(--border-light);background-color:var(--bg-input);width:100%;color:var(--text-main);border-radius:10px;min-height:320px;padding:1.2rem;font-family:ui-monospace,monospace;font-size:.9rem;line-height:1.6;transition:border-color .2s}.jsonFormatter textarea:focus{border-color:var(--border-accent);outline:none}.jsonFormatter textarea.error-border{border-color:var(--text-error)!important;background-color:var(--bg-error)!important}.sticky-controls{z-index:10;background-color:var(--bg-surface);border-bottom:1px solid var(--border-light);margin-bottom:1rem;padding:.75rem 0;position:sticky;top:0}@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.sticky-controls{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:transparent}}.jsonFormatter .buttons{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.divider{background:var(--border-light);width:1px;height:24px;margin:0 .5rem}.jsonFormatter button,.example-btn{border:1px solid var(--border-light);background-color:var(--bg-input);color:var(--text-main);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:.5rem 1rem;font-family:ui-monospace,monospace;font-size:.75rem;font-weight:600;transition:all .2s;display:inline-flex;position:relative;overflow:hidden}.jsonFormatter button:not(:disabled):not(.selected):not(.danger-btn):hover,.example-btn:hover{border-color:var(--border-accent);color:var(--text-accent);background-color:var(--bg-surface);transform:translateY(-1px)}.jsonFormatter button:active,.example-btn:active{transform:translateY(0)}.jsonFormatter button:disabled{opacity:1;cursor:not-allowed;border-color:var(--border-light);background-color:var(--btn-disabled-bg);filter:grayscale();transform:none;color:var(--btn-disabled-text)!important}.jsonFormatter button.selected{opacity:1;background-color:var(--btn-bg)!important;color:var(--btn-color)!important;border-color:var(--border-accent)!important}.copy-btn-label{transition:opacity .2s}.copy-btn-feedback{opacity:0;pointer-events:none;white-space:nowrap;transition:opacity .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}button.selected .copy-btn-label{opacity:0}button.selected .copy-btn-feedback{opacity:1}.jsonFormatter button.danger-btn{color:var(--text-muted);background:0 0;border-color:transparent}.jsonFormatter button.danger-btn:disabled{color:var(--btn-disabled-text);background:0 0;border-color:transparent}.jsonFormatter button.danger-btn:hover:not(:disabled){color:var(--text-error);border-color:var(--bg-error);background-color:var(--bg-error)}.json-playground{background:var(--bg-surface);border:1px solid var(--border-light);border-radius:12px;width:100%;padding:1.25rem;position:sticky;top:1.5rem}.json-playground h2{color:var(--text-muted);text-transform:uppercase;letter-spacing:.1em;text-align:left;margin-bottom:1rem;font-size:.7rem;font-weight:700}.json-playground .examples{flex-direction:column;gap:.5rem;display:flex}.example-btn{text-align:left;background-color:var(--bg-input);justify-content:flex-start;width:100%;font-size:.7rem}#error-display{background-color:var(--bg-error);border-left:4px solid var(--text-error);color:var(--text-main);border-radius:8px;margin:1rem 0;padding:1.25rem;font-size:.9rem}#error-display:not(.hidden)~#output-section{display:none}.error-pre{background-color:var(--bg-input);border:1px solid var(--border-light);color:var(--text-muted);white-space:pre-wrap;word-break:break-all;border-radius:6px;margin-top:12px;padding:1rem;font-family:ui-monospace,monospace;font-size:.8rem}.error-pre span{font-weight:700;color:var(--text-error)!important}.json-faq{margin-top:4rem}.faq-item h3{color:var(--text-accent)}.faq-item p{color:var(--text-muted)}.hidden{display:none!important}