json-formatter{display:block}.tool-layout{grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:2.5rem;width:100%;max-width:1600px;margin:0 auto;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%}.json-playground{grid-area:1/1;margin-bottom:1rem;position:static!important}.json-playground .examples{gap:.6rem;padding-bottom:.75rem;overflow-x:auto;flex-direction:row!important;justify-content:flex-start!important}}.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}.formatter-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:.5rem;padding-bottom:1rem;display:flex}.header-title-group{flex-direction:column;flex:1;gap:.4rem;display:flex}.jsonFormatter h1{margin:0;font-size:1.4rem;font-weight:800}.formatter-header p{color:var(--text-muted);max-width:560px;margin:0;font-size:.8rem;line-height:1.6}.formatter-header p strong{color:var(--text-main);font-weight:600}.agent-badge{background:var(--bg-playground);border:1px solid var(--border-accent);color:var(--text-accent);white-space:nowrap;letter-spacing:.03em;border-radius:6px;flex-shrink:0;align-items:center;gap:6px;padding:5px 10px;font-family:ui-monospace,monospace;font-size:.7rem;font-weight:600;display:inline-flex}.agent-badge:before{content:"";background:var(--text-accent);border-radius:50%;flex-shrink:0;width:6px;height:6px}@media (max-width:640px){.formatter-header{flex-direction:column;gap:.75rem}.agent-badge{align-self:flex-start}}#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;padding:1.2rem;font-family:ui-monospace,monospace;font-size:.9rem;line-height:1.6;transition:border-color .2s}#json-input{min-height:160px}#json-output{min-height:400px}.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;margin-bottom:1rem;font-size:.7rem;font-weight:700}.example-btn{text-align:left;background-color:var(--bg-input);border:1px solid var(--border-light);cursor:pointer;width:100%;color:var(--text-main);border-radius:8px;justify-content:flex-start;margin-bottom:.5rem;padding:.6rem 1rem;font-family:ui-monospace,monospace;font-size:.7rem;transition:all .2s}.example-btn:hover{border-color:var(--border-accent);color:var(--text-accent)}#error-display{border-left:4px solid transparent;grid-template-rows:0fr;transition:grid-template-rows .22s ease-out;display:grid}#error-display.visible{border-color:var(--text-error);grid-template-rows:1fr;margin-bottom:1.5rem}#error-display>.error-inner{background-color:var(--bg-surface);padding:0 1.25rem;overflow:hidden}#error-display.visible>.error-inner{padding:1.25rem}.field-label{text-transform:uppercase;color:var(--text-muted);margin-bottom:.5rem;font-family:ui-monospace,monospace;font-size:.75rem;font-weight:700;display:block}.field-label-row{justify-content:space-between;align-items:center;min-height:1.2rem;margin-bottom:.5rem;display:flex}.field-label-row .field-label{margin:0;line-height:1}.visually-hidden{clip:rect(0,0,0,0);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}#size-indicator{color:var(--text-muted);text-transform:uppercase;opacity:0;align-items:center;font-family:ui-monospace,monospace;font-size:.7rem;font-weight:600;line-height:1;transition:opacity .2s;display:inline-flex}#size-indicator:not(:empty){opacity:1}@media (max-width:480px){#size-indicator{font-size:.65rem}}