.pane{height:100%;min-width:0;display:flex;flex-direction:column;gap:var(--space-3);background:var(--pane-bg);padding:var(--space-4);border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow-md);transition:background-color var(--motion-base),border-color var(--motion-base),box-shadow var(--motion-base)}.pane-header{display:flex;min-width:0;align-items:flex-start;justify-content:space-between;gap:var(--space-3);color:var(--pane-text);font-weight:600;letter-spacing:.04em;background:var(--editor-bg);border:1px solid var(--panel-border);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);height:fit-content;box-shadow:var(--shadow-sm);position:relative;z-index:3;transition:background-color var(--motion-base),border-color var(--motion-base),box-shadow var(--motion-base)}.pane-title{display:inline-flex;align-items:center;gap:.5rem;min-width:0}.pane-title__text{font-size:.96rem;line-height:1.3;font-weight:700}.pane-badge{font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;padding:.15rem .4rem;border-radius:999px;background:var(--accent-soft);color:var(--pane-text);border:1px solid var(--panel-border);line-height:1.2}.pane-actions{display:grid;gap:var(--space-1);min-width:0;height:auto;min-height:0;overflow:visible;scrollbar-width:thin}.pane-actions__row{display:inline-flex;gap:var(--space-1);flex-wrap:wrap;align-items:center;min-width:0}.pane-group{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);background:var(--pane-bg);border:1px solid var(--panel-border)}.pane-group__label{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-text);font-weight:700}.view-toggle{display:inline-flex;gap:var(--space-1);min-width:0;background:var(--surface-alt, rgba(255, 255, 255, .05));border:1px solid var(--panel-border);border-radius:999px;padding:var(--space-1);align-items:center}.view-toggle button{border:none;background:transparent;color:var(--pane-text);min-height:2rem;padding:.15rem .62rem;border-radius:999px;font-size:.82rem;font-weight:600;cursor:pointer;transition:background-color var(--motion-fast),color var(--motion-fast)}.view-toggle button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.view-toggle button.active{background:var(--accent-strong);color:var(--button-primary-text)}.btn--icon{width:36px;height:36px;border-radius:var(--radius-sm);border:none;background:var(--surface-alt, rgba(255, 255, 255, .05));color:var(--icon-text);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--motion-fast),color var(--motion-fast),transform var(--motion-fast)}.btn--icon svg{width:16px;height:16px}.btn--icon:hover{background:var(--accent-soft);color:var(--ink);transform:translateY(-1px)}.btn--icon:focus-visible{outline:none;box-shadow:var(--focus-ring)}.editor{display:block;min-width:0;border-radius:var(--radius-md);overflow:hidden;background:var(--editor-bg);border:1px solid var(--panel-border);height:clamp(24rem,62vh,44rem);box-shadow:var(--shadow-sm)}.code-editor{height:100%}.code-editor .cm-editor{height:100%;background:var(--editor-bg);color:var(--editor-text);font-family:var(--mono);font-size:.97rem}#json-input.cm-editor,#json-output.cm-editor{background:var(--editor-bg)!important;color:var(--editor-text)!important}.code-editor .cm-scroller{font-family:var(--mono);line-height:1.62}.code-editor .cm-content{padding:.75rem 1rem;caret-color:var(--editor-cursor);color:var(--editor-text)}.code-editor .cm-line{color:var(--editor-text)}.code-editor .cm-placeholder{color:var(--muted-text)!important;opacity:1!important}.code-editor .cm-gutters{background:var(--gutter-bg);color:var(--gutter-text);border-right:1px solid var(--gutter-border)}.code-editor .cm-activeLineGutter{background:var(--editor-active-gutter)}.code-editor .cm-activeLine{background:var(--editor-active-line);color:var(--editor-text)}.code-editor .cm-foldGutter span{color:var(--gutter-text)}.code-editor .cm-tooltip{background:var(--menu-bg);color:var(--pane-text);border:1px solid var(--menu-border)}.code-editor .cm-selectionBackground,.code-editor .cm-content ::selection{background:var(--editor-selection)}.view-surface{height:100%;min-width:0;padding:var(--space-4);background:var(--view-bg);overflow:auto;border-left:1px solid var(--panel-border)}.view-placeholder{margin:0;color:var(--muted-text);font-weight:600;line-height:1.55}.data-table{width:100%;border-collapse:collapse;font-size:.93rem;line-height:1.55;color:var(--table-text)}.data-table th,.data-table td{border-bottom:1px solid var(--panel-border);padding:.6rem .5rem;text-align:left;vertical-align:top}.data-table th{text-transform:uppercase;letter-spacing:.08em;font-size:.7rem;line-height:1.3;color:var(--table-muted)}.open-menu,.download-menu{position:relative}.open-options,.download-options{position:absolute;right:0;top:calc(100% + 8px);background:var(--menu-bg);border:1px solid var(--menu-border);border-radius:var(--radius-sm);display:grid;gap:.35rem;padding:.35rem;box-shadow:var(--shadow-md);z-index:6}.open-options button,.download-options button{border:none;background:transparent;padding:.35rem .8rem;text-align:left;font-weight:600;color:var(--pane-text);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--motion-fast),color var(--motion-fast)}.open-options button:hover,.download-options button:hover{background:var(--accent-soft)}.open-options button:focus-visible,.download-options button:focus-visible{outline:none;box-shadow:var(--focus-ring)}.hidden-input{display:none}.modal{width:min(420px,92vw);background:var(--modal-bg);border:1px solid var(--modal-border);border-radius:var(--radius-md);padding:1.2rem;display:grid;gap:.9rem;color:var(--ink);box-shadow:var(--shadow-md)}.modal-note,.modal-header h3{color:var(--muted-text);line-height:1.45}.modal input{padding:.55rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--modal-border);background:var(--editor-bg);color:var(--ink)}.modal input:focus-visible{outline:none;border-color:var(--accent-strong);box-shadow:var(--focus-ring)}.modal-actions{display:flex;justify-content:flex-end;gap:.6rem}.ghost-button{border:1px solid var(--line);background:transparent;color:var(--pane-text);padding:.45rem .9rem;border-radius:999px;font-weight:600;cursor:pointer;transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast)}.ghost-button:hover{border-color:var(--accent-strong);background:var(--accent-soft)}.ghost-button:focus-visible{outline:none;box-shadow:var(--focus-ring)}@media(max-width:1024px){.pane{padding:var(--space-3)}.pane-header{flex-direction:column;gap:var(--space-2)}.editor{height:clamp(18rem,52vh,34rem)}.code-editor .cm-editor{font-size:.93rem}.view-surface{height:clamp(15rem,46vh,24rem)}.pane-actions__row{width:100%}.pane-group{width:100%;justify-content:space-between}.open-options,.download-options{right:auto;left:0}}@media(max-width:640px){.code-editor .cm-editor{font-size:.96rem}.code-editor .cm-scroller{line-height:1.68}.pane-title{flex-wrap:wrap}.pane-title__text{font-size:.91rem}.view-toggle{width:100%}.view-toggle button{flex:1;min-width:0;padding:.2rem .5rem;font-size:.78rem}.btn--icon{width:34px;height:34px}.btn--icon svg{width:14px;height:14px}.editor{height:clamp(15rem,42vh,22rem)}}.node{font-family:var(--mono);color:var(--tree-key)}details{padding:.25rem 0}summary{list-style:none;cursor:pointer;display:flex;gap:.75rem;align-items:center;font-weight:600}.caret{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:6px solid var(--tree-meta);transform:rotate(90deg);transition:transform .2s ease}details:not([open])>summary .caret{transform:rotate(0)}summary::-webkit-details-marker{display:none}.children{border-left:1px dashed var(--line);margin-left:.75rem;padding-left:1rem}.key{color:var(--tree-key)}.meta{font-size:.8rem;color:var(--tree-meta)}.primitive{display:flex;gap:.75rem;padding:.25rem 0}.value{color:var(--tree-value)}.action-panel{display:flex;flex-direction:column;gap:var(--space-5);padding-top:var(--space-3);min-width:0}.button-stack{display:grid;gap:var(--space-4)}.button-group{display:grid;gap:var(--space-3);min-width:0;padding:var(--space-3);border-radius:var(--radius-lg);background:var(--pane-bg);border:1px solid var(--line);box-shadow:var(--shadow-sm);transition:background-color var(--motion-base),border-color var(--motion-base),box-shadow var(--motion-base)}.group-label{margin:0;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-text);font-weight:700;line-height:1.2}.inline-select{display:grid;gap:var(--space-2);font-size:.94rem;font-weight:600;color:var(--pane-text)}.inline-select select{min-height:2.5rem;padding:.5rem 2rem .5rem .75rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--editor-bg);color:var(--pane-text);font-weight:600;appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted-text) 50%),linear-gradient(135deg,var(--muted-text) 50%,transparent 50%),linear-gradient(to right,transparent,transparent);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%,calc(100% - 2.25rem) 50%;background-size:6px 6px,6px 6px,1px 1.4rem;background-repeat:no-repeat;box-shadow:var(--shadow-sm);transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast)}.inline-select select:hover{border-color:var(--accent-strong)}.inline-select select:focus-visible{outline:none;border-color:var(--accent-strong);box-shadow:var(--focus-ring)}.inline-select select option{background:var(--editor-bg);color:var(--pane-text);padding:.35rem .6rem}.inline-select select option:checked{background:var(--accent-soft);color:var(--pane-text)}.button-group .btn{min-height:2.5rem;width:100%;border:1px solid var(--button-primary-bg);background:var(--button-primary-bg);color:var(--button-primary-text);padding:.65rem 1.1rem;border-radius:999px;font-size:.92rem;line-height:1.25;font-weight:600;cursor:pointer;text-align:center;transition:background-color var(--motion-fast),border-color var(--motion-fast),transform var(--motion-fast)}.button-group .btn:hover{background:var(--button-primary-bg-hover);border-color:var(--button-primary-bg-hover);transform:translateY(-1px)}.button-group .btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}@media(max-width:1024px){.action-panel{order:2;padding-top:0;gap:var(--space-4)}.button-group{padding:var(--space-2) var(--space-3)}}.tool{display:grid;gap:var(--space-6);height:100%}.workbench{display:grid;gap:var(--space-5);grid-template-columns:minmax(0,1fr) minmax(10.25rem,12.5rem) minmax(0,1fr);align-items:start;height:100%;min-width:0}.status{padding:.75rem 1rem;background:color-mix(in oklab,var(--accent-soft) 75%,transparent);border:1px solid color-mix(in oklab,var(--line) 65%,transparent);border-radius:12px;color:var(--ink);box-shadow:var(--shadow-sm);transition:background-color var(--motion-base),border-color var(--motion-base),color var(--motion-base)}.status--error{background:color-mix(in oklab,#ffdbd4 72%,transparent);border-color:color-mix(in oklab,#b34d3d 45%,var(--line));color:#5e170e}pre{margin:.5rem 0 0;white-space:pre-wrap;line-height:1.5}.tree-view{padding:var(--space-4) var(--space-5);border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--tree-bg);box-shadow:var(--shadow-sm);transition:background-color var(--motion-base),border-color var(--motion-base),box-shadow var(--motion-base)}.tree-placeholder{margin:0;color:var(--tree-meta)}@media(max-width:1180px){.workbench{gap:var(--space-4);grid-template-columns:minmax(0,1fr) minmax(9.5rem,11rem) minmax(0,1fr)}}@media(max-width:1024px){.tool{gap:var(--space-4)}.workbench{grid-template-columns:1fr;gap:var(--space-4)}}