:root{--font-display:"Space Grotesk", "Avenir Next", "Segoe UI", sans-serif;--font-body:"IBM Plex Sans", "Trebuchet MS", sans-serif;--radius-xl:28px;--radius-lg:22px;--radius-md:16px;--shadow-strong:0 28px 80px #0c16282e;--shadow-soft:0 18px 42px #0c16281f;--transition:.18s ease;--transition-smooth:.26s cubic-bezier(.22, 1, .36, 1);--transition-spring:.42s cubic-bezier(.16, 1, .3, 1)}:root[data-theme=light]{--bg:#f7fbff;--bg-elevated:#ffffffc2;--bg-elevated-strong:#ffffffeb;--bg-panel:#ffffffd1;--surface-border:#2140601f;--surface-border-strong:#21406033;--text-primary:#112033;--text-secondary:#4c5f76;--text-muted:#70839c;--accent-primary:#ef6c21;--accent-secondary:#1aa7a1;--accent-highlight:#0f74c8;--success:#0a936b;--warning:#c16d12;--danger:#d34b42;--row-hover:#1673c90f;--chip-bg:#f0f7ffe0;--tree-before:#7a8698;--tree-after:#112033}:root[data-theme=dark]{--bg:#09111f;--bg-elevated:#0f1828c2;--bg-elevated-strong:#121d30eb;--bg-panel:#121d30d1;--surface-border:#799ac224;--surface-border-strong:#799ac23d;--text-primary:#f2f6ff;--text-secondary:#adc0de;--text-muted:#7f95b3;--accent-primary:#ff9a5a;--accent-secondary:#69e2dd;--accent-highlight:#8ec8ff;--success:#65dfb4;--warning:#ffcb6c;--danger:#ff8c7f;--row-hover:#5ba2dc14;--chip-bg:#15233aeb;--tree-before:#91a4bf;--tree-after:#f2f6ff}*{box-sizing:border-box}html,body,#root{min-height:100%}body{font-family:var(--font-body);color:var(--text-primary);background:radial-gradient(circle at top left, #39a8ff2e, transparent 28%), radial-gradient(circle at 90% 10%, #ff9a5a2e, transparent 24%), radial-gradient(circle at 50% 100%, #31c9c324, transparent 28%), linear-gradient(135deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 84%, black 4%) 100%);background-attachment:fixed;margin:0}button,input{font:inherit}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.studio-shell{width:min(1600px,100% - 32px);margin:0 auto;padding:24px 0 40px;position:relative}.studio-glow{filter:blur(48px);opacity:.45;pointer-events:none;z-index:0;border-radius:999px;width:320px;height:320px;position:fixed}.studio-glow--north{background:color-mix(in srgb, var(--accent-highlight) 36%, transparent);top:-80px;left:-80px}.studio-glow--south{background:color-mix(in srgb, var(--accent-primary) 34%, transparent);bottom:-80px;right:-90px}.panel{z-index:1;background:var(--bg-panel);border:1px solid var(--surface-border);box-shadow:var(--shadow-soft);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);position:relative}.studio-topbar{border-radius:30px;grid-template-columns:1.3fr 1fr;align-items:center;gap:18px;padding:18px 20px;animation:.42s rise-in;display:grid}.studio-heading h1,.pane-card h2,.viewer-card h2{font-family:var(--font-display);letter-spacing:-.04em;margin:0;font-weight:700}.studio-heading__title-row{align-items:center;gap:14px;display:flex}.studio-heading h1{font-size:clamp(1.9rem,3vw,3rem);line-height:.98}.studio-title-icon{width:54px;height:54px;color:color-mix(in srgb, var(--accent-highlight) 84%, white 10%);border:1px solid color-mix(in srgb, var(--accent-highlight) 18%, var(--surface-border-strong));background:radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--accent-highlight) 26%, transparent), transparent 34%), radial-gradient(circle at 84% 78%, color-mix(in srgb, var(--accent-primary) 24%, transparent), transparent 42%), linear-gradient(145deg, color-mix(in srgb, var(--accent-highlight) 16%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-secondary) 8%, var(--bg-elevated-strong)) 46%, color-mix(in srgb, var(--accent-primary) 12%, var(--bg-elevated-strong)));border-radius:18px;flex:0 0 54px;place-items:center;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff14,0 16px 30px #08101c24}.studio-title-icon:after{content:"";pointer-events:none;border:1px solid #ffffff0f;border-radius:17px;position:absolute;inset:1px}.studio-title-icon__svg{z-index:1;width:34px;height:34px;position:relative}.studio-title-icon__brace,.studio-title-icon__line{fill:none;stroke-linecap:round}.studio-title-icon__brace{stroke:currentColor;stroke-width:3.5px;stroke-linejoin:round}.studio-title-icon__line{stroke:color-mix(in srgb, var(--accent-primary) 72%, var(--accent-secondary));stroke-width:3.5px}.studio-title-icon__dot{fill:color-mix(in srgb, var(--accent-secondary) 86%, white 8%)}.studio-heading p{max-width:64ch;color:var(--text-secondary);margin:10px 0 0;font-size:.93rem;line-height:1.45}.studio-kicker{color:var(--accent-primary);letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px;font-size:.72rem;font-weight:700}.studio-actions{justify-items:stretch;gap:10px;display:grid}.studio-actions__toggles{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.studio-actions__utility{justify-content:flex-end;gap:10px;display:flex}.utility-button{border:1px solid var(--surface-border-strong);background:var(--bg-elevated);color:var(--text-primary);transition:transform var(--transition), border-color var(--transition), background-color var(--transition), color var(--transition);cursor:pointer;border-radius:999px;padding:10px 14px}.utility-button:hover,.tree-toggle:hover{border-color:color-mix(in srgb, var(--accent-highlight) 32%, var(--surface-border-strong));transform:translateY(-1px)}.utility-button:disabled{cursor:not-allowed;opacity:.48;transform:none}.utility-button--wide{justify-self:stretch;width:auto;min-width:210px}.control-note{border:1px dashed var(--surface-border);color:var(--text-secondary);background:color-mix(in srgb, var(--bg-elevated-strong) 92%, transparent);border-radius:18px;max-width:360px;padding:10px 14px;font-size:.88rem;line-height:1.35}.mode-toggle{gap:4px;display:grid}.mode-toggle__label{color:var(--text-muted);letter-spacing:.14em;text-transform:uppercase;padding-left:4px;font-size:.68rem;font-weight:700}.mode-toggle__track{border:1px solid var(--surface-border-strong);background:color-mix(in srgb, var(--bg-elevated) 88%, transparent);min-width:0;color:var(--text-primary);cursor:pointer;transition:transform var(--transition), border-color var(--transition), background-color var(--transition), box-shadow var(--transition);border-radius:999px;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;padding:4px;display:grid;position:relative;box-shadow:inset 0 1px #ffffff0f}.mode-toggle__track:hover{border-color:color-mix(in srgb, var(--accent-highlight) 32%, var(--surface-border-strong));transform:translateY(-1px)}.mode-toggle__track:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-highlight) 16%, transparent), inset 0 1px 0 #ffffff0f;outline:none}.mode-toggle__thumb{background:linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 20%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-highlight) 18%, var(--bg-elevated-strong)));border:1px solid color-mix(in srgb, var(--accent-highlight) 26%, var(--surface-border-strong));width:calc(50% - 4px);height:calc(100% - 8px);transition:transform var(--transition);border-radius:999px;position:absolute;top:4px;left:4px;box-shadow:0 10px 24px #0c16281f}.mode-toggle__track.is-on .mode-toggle__thumb{transform:translate(100%)}.mode-toggle__text{z-index:1;color:var(--text-muted);text-align:center;transition:color var(--transition);padding:8px 14px;font-size:.92rem;font-weight:600;position:relative}.mode-toggle__text.is-active{color:var(--text-primary)}.status-strip{z-index:1;flex-wrap:wrap;gap:12px;margin:18px 0 22px;display:flex;position:relative}.status-chip,.metric-chip,.signal-pill{border:1px solid var(--surface-border);background:var(--chip-bg);color:var(--text-secondary);border-radius:999px;align-items:center;gap:8px;padding:10px 14px;display:inline-flex}.status-chip strong,.metric-chip strong,.signal-pill{color:var(--text-primary)}.status-chip__label,.metric-chip span{color:var(--text-muted);font-size:.88rem}.status-chip--notice{color:var(--text-primary);border-color:color-mix(in srgb, var(--accent-secondary) 28%, var(--surface-border))}.studio-main{z-index:1;gap:22px;display:grid;position:relative}.pane-grid{gap:20px;display:grid}.pane-grid--one{grid-template-columns:minmax(0,1fr)}.pane-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}.viewer-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;display:grid}.viewer-grid--single{grid-template-columns:minmax(0,1fr)}.viewer-visibility-bar,.viewer-placeholder{border-radius:var(--radius-xl);animation:soft-rise var(--transition-spring) both;padding:18px 20px}.viewer-visibility-bar__content{justify-content:space-between;align-items:center;gap:16px;display:flex}.viewer-visibility-bar__content h2,.viewer-placeholder__inner h2{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:1.16rem}.viewer-visibility-bar__actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.panel-toggle-button{border:1px solid var(--surface-border-strong);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;transition:transform var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth), color var(--transition-smooth), box-shadow var(--transition-smooth);border-radius:999px;padding:10px 14px}.panel-toggle-button:hover{border-color:color-mix(in srgb, var(--accent-highlight) 32%, var(--surface-border-strong));transform:translateY(-2px);box-shadow:0 14px 28px #0a12221f}.panel-toggle-button.is-active{color:var(--text-primary);background:linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 16%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-highlight) 14%, var(--bg-elevated-strong)));border-color:color-mix(in srgb, var(--accent-highlight) 26%, var(--surface-border-strong))}.viewer-placeholder__inner{justify-items:start;gap:10px;padding:6px 0;display:grid}.viewer-placeholder__inner p{max-width:64ch;color:var(--text-secondary);margin:0;line-height:1.5}.pane-card,.viewer-card{border-radius:var(--radius-xl);animation:soft-rise var(--transition-spring) both;padding:22px}.pane-card{overflow:hidden}.pane-card--primary:after,.pane-card--secondary:after,.viewer-card:after{content:"";pointer-events:none;border-radius:inherit;position:absolute;inset:0}.pane-card--primary:after{background:linear-gradient(160deg,#ef6c211a,#0000 30%,#1aa7a114 100%)}.pane-card--secondary:after{background:linear-gradient(160deg,#1aa7a11f,#0000 28%,#0f74c814 100%)}.viewer-card:after{background:linear-gradient(#ffffff0a,#0000 26%,#ffffff05 100%)}.viewer-card--tree:before,.viewer-card--raw:before{content:"";pointer-events:none;border-radius:inherit;position:absolute;inset:0}.viewer-card--tree:before{background:radial-gradient(circle at top right, color-mix(in srgb, var(--accent-highlight) 16%, transparent), transparent 34%), linear-gradient(180deg, #ffffff05, transparent 22%)}.viewer-card--raw:before{background:radial-gradient(circle at top left, color-mix(in srgb, var(--accent-primary) 14%, transparent), transparent 30%), linear-gradient(180deg, #ffffff05, transparent 22%)}.pane-card.is-drag-active{border-color:color-mix(in srgb, var(--accent-secondary) 34%, var(--surface-border-strong));box-shadow:0 0 0 2px color-mix(in srgb, var(--accent-secondary) 18%, transparent), var(--shadow-strong)}.pane-card__header,.viewer-card__header{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.pane-card__meta,.viewer-card__actions,.viewer-card__meta{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.pane-card__toolbar{flex-wrap:wrap;gap:10px;margin:18px 0;display:flex}.pane-card__editor,.raw-panel{border:1px solid var(--surface-border);background:var(--bg-elevated-strong);transition:border-color var(--transition), box-shadow var(--transition), transform var(--transition);border-radius:22px;position:relative;overflow:hidden}.pane-card__editor.is-empty .monaco-editor,.pane-card__editor.is-empty .overflow-guard{opacity:.28}.pane-card__editor.is-focused{border-color:color-mix(in srgb, var(--accent-highlight) 52%, var(--surface-border));box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-highlight) 14%, transparent), 0 18px 38px #0c162829;transform:translateY(-1px)}.pane-card__editor.is-focused .monaco-editor,.pane-card__editor.is-focused .overflow-guard{opacity:.56}.editor-empty-state{z-index:2;border:1px dashed color-mix(in srgb, var(--accent-highlight) 28%, var(--surface-border));background:linear-gradient(180deg, color-mix(in srgb, var(--accent-highlight) 7%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-primary) 4%, var(--bg-elevated-strong)));color:var(--text-secondary);text-align:left;cursor:text;transition:border-color var(--transition), background-color var(--transition), color var(--transition), transform var(--transition);border-radius:18px;align-content:start;justify-items:start;gap:10px;padding:22px 24px;display:grid;position:absolute;inset:16px}.editor-empty-state:hover{border-color:color-mix(in srgb, var(--accent-highlight) 40%, var(--surface-border));transform:translateY(-1px)}.pane-card__editor.is-focused .editor-empty-state{border-color:color-mix(in srgb, var(--accent-highlight) 56%, var(--surface-border));background:linear-gradient(180deg, color-mix(in srgb, var(--accent-highlight) 12%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-primary) 6%, var(--bg-elevated-strong)));box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent-highlight) 20%, transparent), 0 10px 26px #0c16281f}.pane-card__editor.is-focused .editor-empty-state__eyebrow{color:var(--accent-highlight)}.pane-card__editor.is-focused .editor-empty-state strong{color:color-mix(in srgb, var(--accent-highlight) 52%, var(--text-primary))}.editor-empty-state strong{color:var(--text-primary);font-family:var(--font-display);letter-spacing:-.03em;font-size:1.2rem}.editor-empty-state span{max-width:34ch;line-height:1.55}.editor-empty-state__eyebrow{color:var(--accent-primary);letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;font-weight:700}.pane-card__footer{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.drop-hint,.error-banner,.empty-view{border-radius:18px;margin-top:16px;padding:14px 16px;line-height:1.5}.drop-hint,.empty-view{border:1px dashed var(--surface-border);color:var(--text-secondary);background:color-mix(in srgb, var(--bg-elevated-strong) 92%, transparent)}.error-banner{border:1px solid color-mix(in srgb, var(--danger) 44%, transparent);background:color-mix(in srgb, var(--danger) 10%, var(--bg-elevated-strong));color:var(--danger)}.viewer-card__header{margin-bottom:14px}.search-field{border:1px solid var(--surface-border-strong);background:var(--bg-elevated-strong);min-width:220px;color:var(--text-primary);border-radius:999px;outline:none;padding:11px 14px}.search-field:focus{border-color:color-mix(in srgb, var(--accent-highlight) 42%, var(--surface-border-strong));box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-highlight) 16%, transparent)}.viewer-card__meta{justify-content:flex-start;margin-bottom:14px}.tree-studio-banner{border:1px solid var(--surface-border);background:radial-gradient(circle at top right, color-mix(in srgb, var(--accent-highlight) 14%, transparent), transparent 34%), linear-gradient(145deg, color-mix(in srgb, var(--accent-highlight) 6%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-secondary) 4%, var(--bg-elevated-strong)));border-radius:22px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px;margin-bottom:14px;padding:16px 18px;display:grid}.tree-studio-banner__copy{gap:10px;display:grid}.tree-studio-banner__copy strong{font-family:var(--font-display);letter-spacing:-.03em;font-size:1.14rem}.tree-studio-banner__copy span:last-child{color:var(--text-secondary);line-height:1.5}.tree-studio-banner__sparkline{align-items:end;gap:8px;min-height:60px;display:inline-flex}.tree-spark{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-highlight) 76%, transparent), color-mix(in srgb, var(--accent-secondary) 42%, transparent));border-radius:999px;width:10px}.tree-spark:nth-child(4n+1){height:24px}.tree-spark:nth-child(4n+2){height:42px}.tree-spark:nth-child(4n+3){height:32px}.tree-spark:nth-child(4n){height:52px}.tree-insights{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:14px;display:grid}.tree-insight-card{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated-strong) 95%, transparent);animation:soft-rise var(--transition-spring) both;border-radius:20px;gap:8px;padding:14px 16px;display:grid}.tree-insight-card span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}.tree-insight-card strong{font-family:var(--font-display);font-size:1.34rem;line-height:1}.tree-insight-card--object strong{color:var(--accent-highlight)}.tree-insight-card--array strong{color:var(--accent-secondary)}.tree-insight-card--string strong{color:var(--warning)}.compare-overview{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;display:grid}.summary-card{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated-strong) 94%, transparent);animation:soft-rise var(--transition-spring) both;border-radius:22px;gap:8px;padding:16px 18px;display:grid}.summary-card span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.12em;font-size:.84rem}.summary-card strong{font-family:var(--font-display);font-size:1.8rem;line-height:1}.summary-card--added strong{color:var(--success)}.summary-card--removed strong{color:var(--danger)}.summary-card--changed strong{color:var(--warning)}.summary-card--unchanged strong{color:var(--text-secondary)}.compare-toolbar{grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:center;gap:12px;margin-bottom:14px;display:grid}.compare-filter-group{flex-wrap:wrap;gap:8px;display:inline-flex}.filter-chip{border:1px solid var(--surface-border-strong);background:var(--bg-elevated);color:var(--text-secondary);cursor:pointer;transition:transform var(--transition), border-color var(--transition), background-color var(--transition), color var(--transition);border-radius:999px;padding:10px 14px}.filter-chip:hover{border-color:color-mix(in srgb, var(--accent-highlight) 32%, var(--surface-border-strong));transform:translateY(-1px)}.filter-chip.is-active{color:var(--text-primary);background:linear-gradient(135deg, color-mix(in srgb, var(--accent-primary) 18%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-highlight) 16%, var(--bg-elevated-strong)));border-color:color-mix(in srgb, var(--accent-highlight) 26%, var(--surface-border-strong))}.compare-hint{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated-strong) 94%, transparent);color:var(--text-secondary);border-radius:20px;gap:4px;padding:14px 16px;display:grid}.compare-hint strong{color:var(--text-primary)}.signal-pill{font-size:.9rem}.signal-pill.is-valid,.signal-pill--calm,.signal-pill--added{color:var(--success)}.signal-pill--warn,.signal-pill--changed{color:var(--warning)}.signal-pill--removed{color:var(--danger)}.tree-panel{border:1px solid var(--surface-border);background:linear-gradient(180deg, color-mix(in srgb, var(--bg-elevated-strong) 98%, transparent), color-mix(in srgb, var(--bg-elevated) 92%, transparent)), repeating-linear-gradient(180deg, transparent 0, transparent 34px, color-mix(in srgb, var(--surface-border) 28%, transparent) 35px);min-height:420px;animation:panel-glide var(--transition-spring) both;border-radius:24px;padding:12px 0;overflow:auto}.tree-panel--compare{padding-top:0}.compare-table-head{z-index:2;border-bottom:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated-strong) 98%, transparent);color:var(--text-muted);letter-spacing:.12em;text-transform:uppercase;grid-template-columns:minmax(260px,1.2fr) 120px minmax(180px,1fr) minmax(180px,1fr);gap:12px;padding:14px 18px;font-size:.78rem;font-weight:700;display:grid;position:sticky;top:0}.tree-row{min-height:42px;transition:background-color var(--transition-smooth), transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);border-radius:16px;align-items:center;gap:10px;margin:0 10px;padding-right:18px;display:flex}.tree-row:hover{background:var(--row-hover);transform:translate(2px)}.tree-row--single{border:1px solid color-mix(in srgb, var(--surface-border) 60%, transparent);background:color-mix(in srgb, var(--bg-elevated-strong) 90%, transparent);animation:row-fade-up var(--transition-spring) both;animation-delay:var(--entry-delay,0s);margin-bottom:6px;padding-top:10px;padding-bottom:10px;position:relative;box-shadow:0 10px 22px #08101c0f}.tree-row--single:before{content:"";background:color-mix(in srgb, var(--surface-border-strong) 70%, transparent);border-radius:999px;width:4px;position:absolute;top:10px;bottom:10px;left:10px}.tree-row--single.tree-row--object:before{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-highlight) 78%, transparent), transparent)}.tree-row--single.tree-row--array:before{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-secondary) 78%, transparent), transparent)}.tree-row--single.tree-row--string:before{background:linear-gradient(180deg, color-mix(in srgb, var(--warning) 76%, transparent), transparent)}.tree-row--single.tree-row--number:before{background:linear-gradient(180deg, color-mix(in srgb, var(--success) 76%, transparent), transparent)}.tree-row--single.tree-row--boolean:before{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 76%, transparent), transparent)}.tree-row--single.tree-row--null:before{background:linear-gradient(180deg, color-mix(in srgb, var(--text-muted) 76%, transparent), transparent)}.tree-row--diff{min-height:72px;animation:row-fade-up var(--transition-spring) both;animation-delay:var(--entry-delay,0s);border-left:3px solid #0000;grid-template-columns:minmax(260px,1.2fr) 120px minmax(180px,1fr) minmax(180px,1fr);align-items:stretch;gap:12px;padding:0 18px;display:grid}.tree-row--added{border-left-color:color-mix(in srgb, var(--success) 50%, transparent)}.tree-row--removed{border-left-color:color-mix(in srgb, var(--danger) 56%, transparent)}.tree-row--changed{border-left-color:color-mix(in srgb, var(--warning) 56%, transparent)}.tree-toggle{border:1px solid var(--surface-border);background:var(--bg-elevated);width:28px;height:28px;color:var(--text-primary);cursor:pointer;border-radius:50%;flex:none}.tree-toggle--ghost{cursor:default;background:0 0;border-color:#0000;justify-content:center;align-items:center;display:inline-flex}.tree-key{min-width:80px;color:var(--text-primary);font-weight:700}.tree-row__identity{gap:4px;min-width:0;display:grid}.tree-type{background:var(--chip-bg);color:var(--accent-highlight);text-transform:capitalize;border-radius:999px;padding:6px 10px;font-size:.8rem}.tree-value,.tree-diff{color:var(--text-secondary);word-break:break-word}.tree-diff{flex-wrap:wrap;align-items:center;gap:8px;display:inline-flex}.tree-diff__before{color:var(--tree-before);text-decoration:line-through}.tree-diff__after{color:var(--tree-after)}.tree-diff__arrow{color:var(--text-muted)}.compare-row__path{align-items:center;min-width:0;display:flex}.compare-row__path-inner{align-items:center;gap:10px;width:100%;min-width:0;display:flex}.compare-row__identity{gap:4px;min-width:0;display:grid}.compare-row__path-text{color:var(--text-muted);white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;overflow:hidden}.tree-row__path-text--single{white-space:nowrap;text-overflow:ellipsis;max-width:320px;overflow:hidden}.compare-row__status{align-items:center;display:flex}.compare-cell{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated) 92%, transparent);min-width:0;color:var(--text-secondary);word-break:break-word;transition:transform var(--transition-smooth), border-color var(--transition-smooth), background-color var(--transition-smooth), box-shadow var(--transition-smooth);border-radius:18px;align-items:center;margin:10px 0;padding:14px 16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9rem;line-height:1.45;display:flex}.tree-row--diff:hover .compare-cell{transform:translateY(-1px)}.compare-cell--added,.compare-cell--removed,.compare-cell--changed{color:var(--text-primary)}.compare-cell--before.compare-cell--changed,.compare-cell--after.compare-cell--changed{border-color:color-mix(in srgb, var(--warning) 34%, var(--surface-border));background:color-mix(in srgb, var(--warning) 10%, var(--bg-elevated))}.compare-cell--before.compare-cell--removed{border-color:color-mix(in srgb, var(--danger) 32%, var(--surface-border));background:color-mix(in srgb, var(--danger) 10%, var(--bg-elevated))}.compare-cell--after.compare-cell--added{border-color:color-mix(in srgb, var(--success) 32%, var(--surface-border));background:color-mix(in srgb, var(--success) 10%, var(--bg-elevated))}.raw-compare-legend{grid-template-columns:repeat(2,minmax(0,auto)) minmax(0,1fr);align-items:center;gap:12px;margin-bottom:14px;display:grid}.raw-compare-legend__pane{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated-strong) 94%, transparent);border-radius:18px;align-items:center;gap:10px;padding:12px 14px;display:flex}.raw-compare-legend__pane strong{color:var(--text-primary);display:block}.raw-compare-legend__pane span:not(.raw-compare-legend__swatch){color:var(--text-muted);font-size:.86rem}.raw-compare-legend__swatch{border-radius:999px;width:12px;height:40px}.raw-compare-legend__swatch--left{background:linear-gradient(180deg, color-mix(in srgb, var(--warning) 72%, transparent), transparent)}.raw-compare-legend__swatch--right{background:linear-gradient(180deg, color-mix(in srgb, var(--success) 72%, transparent), transparent)}.raw-compare-legend__hint{color:var(--text-secondary);padding:0 4px}.viewer-card--raw .raw-panel,.viewer-card--raw .empty-view{margin-top:8px}.raw-panel--canvas{padding:18px;overflow:auto}.json-canvas{gap:16px;min-height:420px;display:grid}.json-canvas__ribbon{border:1px solid var(--surface-border);background:radial-gradient(circle at top right, color-mix(in srgb, var(--accent-primary) 16%, transparent), transparent 38%), linear-gradient(145deg, color-mix(in srgb, var(--accent-primary) 8%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-highlight) 6%, var(--bg-elevated-strong)));animation:soft-rise var(--transition-spring) both;border-radius:24px;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px;padding:18px 20px;display:grid}.json-canvas__ribbon-copy{gap:10px;display:grid}.json-canvas__ribbon-copy strong{font-family:var(--font-display);letter-spacing:-.03em;font-size:1.18rem;display:block}.json-canvas__ribbon-copy span:last-child{color:var(--text-secondary);line-height:1.5}.json-canvas__orbits{align-items:center;gap:8px;display:inline-flex}.json-canvas__orbit{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-primary) 74%, transparent), color-mix(in srgb, var(--accent-highlight) 44%, transparent));width:12px;height:12px;box-shadow:0 0 0 6px color-mix(in srgb, var(--accent-primary) 8%, transparent);border-radius:999px;animation:4.8s ease-in-out infinite orbit-pulse}.json-canvas__orbit:nth-child(3n+2){width:16px;height:16px}.json-canvas__orbit:nth-child(3n){width:20px;height:20px}.json-canvas__summary{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;display:grid}.canvas-metric{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated) 94%, transparent);animation:soft-rise var(--transition-spring) both;animation-delay:var(--entry-delay,0s);border-radius:20px;gap:8px;padding:14px 16px;display:grid}.canvas-metric span{color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em;font-size:.78rem}.canvas-metric strong{color:var(--text-primary);font-family:var(--font-display);font-size:1.32rem;line-height:1}.json-canvas__hero{grid-template-columns:minmax(220px,.75fr) minmax(0,1.25fr);gap:12px;display:grid}.json-canvas__intro,.json-highlight-card{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated) 94%, transparent);border-radius:22px}.json-canvas__intro{background:radial-gradient(circle at top right, color-mix(in srgb, var(--accent-highlight) 16%, transparent), transparent 42%), linear-gradient(160deg, color-mix(in srgb, var(--accent-highlight) 7%, var(--bg-elevated-strong)), color-mix(in srgb, var(--accent-primary) 6%, var(--bg-elevated-strong)));align-content:start;gap:12px;padding:18px;display:grid}.json-canvas__intro h3{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:1.22rem}.json-canvas__intro p{color:var(--text-secondary);margin:0;line-height:1.55}.json-canvas__highlights{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;display:grid}.json-highlight-card{animation:soft-rise var(--transition-spring) both;animation-delay:var(--entry-delay,0s);transition:transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);gap:12px;padding:16px;display:grid;box-shadow:0 12px 28px #0a122214}.json-highlight-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px #0a12221f}.json-highlight-card--solo{align-content:center;min-height:120px}.json-highlight-card__header{justify-content:space-between;align-items:center;gap:10px;display:flex}.json-highlight-card__header strong{color:var(--text-primary);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.json-highlight-card__value{color:var(--text-secondary);word-break:break-word;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.45}.json-token{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated) 92%, transparent);letter-spacing:.04em;text-transform:capitalize;border-radius:999px;justify-content:center;align-items:center;padding:6px 10px;font-size:.76rem;font-weight:700;display:inline-flex}.json-token--object{color:var(--accent-highlight)}.json-token--array{color:var(--accent-secondary)}.json-token--string{color:var(--warning)}.json-token--number{color:var(--success)}.json-token--boolean{color:var(--accent-primary)}.json-token--null{color:var(--text-muted)}.json-canvas__body{gap:12px;display:grid}.json-node{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated) 94%, transparent);animation:soft-rise var(--transition-spring) both;animation-delay:var(--entry-delay,0s);transition:transform var(--transition-smooth), border-color var(--transition-smooth), box-shadow var(--transition-smooth);border-radius:22px;box-shadow:0 12px 28px #0a122214}.json-node:hover{transform:translateY(-2px);box-shadow:0 18px 34px #0a12221c}.json-node--primitive{gap:8px;padding:14px 16px;display:grid}.json-node__meta{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.json-node__key{color:var(--text-primary);font-weight:700}.json-node__path{color:var(--text-muted);word-break:break-all;font-size:.82rem}.json-node__value{color:var(--text-secondary);word-break:break-word;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;line-height:1.55}.json-node__summary{cursor:pointer;transition:background-color var(--transition-smooth), transform var(--transition-smooth);gap:12px;padding:16px;list-style:none;display:grid}.json-node__summary::-webkit-details-marker{display:none}.json-node[open]>.json-node__summary{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-highlight) 5%, transparent), transparent)}.json-node__summary-main{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.json-node__count{color:var(--text-secondary);font-size:.84rem}.json-node__preview-list{flex-wrap:wrap;gap:8px;display:flex}.json-node__preview-pill{border:1px solid var(--surface-border);background:color-mix(in srgb, var(--bg-elevated-strong) 96%, transparent);color:var(--text-secondary);border-radius:14px;flex-wrap:wrap;gap:6px;padding:8px 10px;font-size:.86rem;display:inline-flex}.json-node__preview-pill strong{color:var(--text-primary)}.json-node__children{border-top:1px solid color-mix(in srgb, var(--surface-border) 55%, transparent);gap:10px;padding:0 16px 16px;display:grid}.json-node[open]>.json-node__children{animation:reveal-grid var(--transition-smooth) both}.json-node__children--compact{gap:8px}.json-node--root{border-color:color-mix(in srgb, var(--accent-highlight) 20%, var(--surface-border));box-shadow:inset 0 1px #ffffff0a}.json-node--root>.json-node__summary{background:linear-gradient(180deg, color-mix(in srgb, var(--accent-highlight) 6%, transparent), transparent)}.json-canvas--minified .json-canvas__summary{gap:8px}.json-canvas--minified .canvas-metric{padding:12px 14px}.json-canvas--minified .json-canvas__intro,.json-canvas--minified .json-highlight-card,.json-canvas--minified .json-node,.json-canvas--minified .json-node--primitive{border-radius:18px}.metric-chip{justify-content:space-between;min-width:112px}@keyframes rise-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes soft-rise{0%{opacity:0;transform:translateY(12px)scale(.985)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes row-fade-up{0%{opacity:0;transform:translateY(8px)scale(.992)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes panel-glide{0%{opacity:0;filter:blur(3px);transform:translateY(10px)}to{opacity:1;filter:blur();transform:translateY(0)}}@keyframes reveal-grid{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes orbit-pulse{0%,to{opacity:.9;transform:scale(1)}50%{opacity:1;transform:scale(1.18)}}@media (width<=1180px){.studio-topbar,.viewer-grid,.pane-grid--two{grid-template-columns:1fr}.studio-actions{justify-items:stretch}.studio-actions__toggles{grid-template-columns:1fr}.studio-actions__utility{justify-content:flex-start}.compare-overview,.compare-toolbar,.raw-compare-legend,.tree-insights,.tree-studio-banner,.json-canvas__summary,.json-canvas__ribbon,.json-canvas__hero{grid-template-columns:1fr}.viewer-visibility-bar__content{flex-direction:column;align-items:flex-start}.viewer-visibility-bar__actions{justify-content:flex-start}}@media (width<=780px){.studio-shell{width:min(100% - 20px,1600px);padding:14px 0 24px}.studio-topbar,.pane-card,.viewer-card{border-radius:24px;padding:18px}.pane-card__header,.viewer-card__header{flex-direction:column}.viewer-card__actions,.pane-card__meta{justify-content:flex-start}.studio-actions__toggles{gap:10px}.search-field{width:100%}.mode-toggle__track{min-width:100%}.studio-heading__title-row{gap:12px}.studio-title-icon{border-radius:16px;flex-basis:48px;width:48px;height:48px}.studio-title-icon__svg{width:30px;height:30px}.compare-table-head{display:none}.tree-row--diff{grid-template-columns:1fr;gap:0;padding:10px 14px 14px}.compare-row__status{margin-bottom:4px;padding-left:40px}.compare-cell{margin:6px 0 0 40px}.tree-row--single{margin:0 6px 6px}.tree-row__path-text--single{max-width:220px}.viewer-visibility-bar,.viewer-placeholder{padding:16px 18px}.raw-panel--canvas{padding:14px}.json-canvas__highlights{grid-template-columns:1fr}.tree-row{gap:8px;min-height:40px}.tree-key{min-width:64px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;transition-delay:0s!important;animation:none!important}}