:root{color-scheme:light dark;--text-main: light-dark(#0f172a, #f8fafc);--text-muted: light-dark(rgba(51, 65, 85, .8), rgba(203, 213, 225, .92));--header-bg: light-dark(rgba(15, 23, 42, .92), rgba(2, 6, 23, .95));--header-text: light-dark(#f8fafc, #f8fafc);--panel-bg: light-dark(rgba(248, 250, 252, .85), rgba(15, 23, 42, .85));--section-bg: light-dark(#ffffff, #162235);--border-color: light-dark(rgba(148, 163, 184, .2), rgba(100, 116, 139, .6));--input-bg: light-dark(rgba(248, 250, 252, .75), rgba(15, 23, 42, .6));--input-border: light-dark(rgba(148, 163, 184, .5), rgba(71, 85, 105, .6));--chip-bg: light-dark(rgba(148, 163, 184, .18), rgba(148, 163, 184, .32));--footer-bg: light-dark(rgba(226, 232, 240, .6), rgba(15, 23, 42, .8));--footer-text: light-dark(rgba(15, 23, 42, .75), rgba(148, 163, 184, .8));--viewer-bg: light-dark(rgba(248, 250, 252, .92), rgba(31, 41, 55, .9));--control-btn-bg: light-dark(rgba(148, 163, 184, .12), rgba(148, 163, 184, .15));--control-btn-text: light-dark(#0f172a, #e2e8f0);--bg-1: light-dark(#f8fbff, #1e293b);--bg-2: light-dark(#eef2ff, #0f172a);--bg-3: light-dark(#e2e8f0, #020617);--bg-gradient: radial-gradient(circle at top, var(--bg-1) 0%, var(--bg-2) 45%, var(--bg-3) 100%)}.demo-page.light-mode{color-scheme:light}.demo-page.dark-mode{color-scheme:dark}.demo-page{min-height:100vh;display:flex;flex-direction:column;background:var(--bg-gradient);color:var(--text-main);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;transition:background .3s ease,color .3s ease}.demo-header{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:1rem 1.75rem;background:var(--header-bg);color:var(--header-text);box-shadow:0 12px 30px #0f172a3d}.demo-brand{display:flex;align-items:center;gap:1rem}.demo-brand h1{font-size:1.4rem;margin:0}.demo-brand p{margin:.15rem 0 0;font-size:.85rem;color:#e2e8f0e6}.demo-logo{font-size:1.8rem;display:inline-flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem;border-radius:.85rem;background:linear-gradient(135deg,#22c55eeb,#10b981eb);box-shadow:0 10px 25px #10b98159}.demo-header-actions{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.version-pill{display:inline-flex;align-items:center;padding:.35rem .65rem;border-radius:999px;font-size:.75rem;background:#94a3b833;color:#e2e8f0;border:1px solid rgba(148,163,184,.3)}.header-link{color:#f8fafc;text-decoration:none;font-size:.85rem;padding:.45rem .75rem;border-radius:.65rem;background:#94a3b829;transition:background .2s ease,transform .2s ease}.header-link:hover{background:#94a3b84d;transform:translateY(-1px)}.demo-main{flex:1;display:grid;grid-template-columns:minmax(150px,340px) minmax(0,1fr);gap:1rem;padding:1rem;min-height:0;max-width:min(100vw,1100px);margin:0 auto}.control-panel{background:var(--panel-bg);border-radius:1.25rem;padding:1rem;box-shadow:0 20px 35px #0f172a1f;display:flex;flex-direction:column;min-height:0}.control-panel-scroll{overflow-y:auto;padding-right:.5rem;display:flex;flex-direction:column;gap:1rem}.panel-section{background:var(--section-bg);border-radius:1rem;border:1px solid var(--border-color);padding:.9rem 1rem;display:flex;flex-direction:column;gap:.75rem;box-shadow:inset 0 1px #ffffff0d}.panel-section.compact{gap:.5rem}.section-header{display:flex;flex-direction:column;gap:.15rem}.section-header h2{margin:0;font-size:1rem;color:var(--text-main)}.section-header span{font-size:.75rem;color:var(--text-muted)}.mode-toggle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.control-button{background:var(--control-btn-bg);border:1px solid transparent;border-radius:.75rem;padding:.4rem .6rem;font-size:.8rem;font-weight:500;color:var(--control-btn-text);cursor:pointer;transition:all .2s ease}.control-button:hover{border-color:#6366f14d;background:#818cf81f}.control-button.is-active{background:linear-gradient(135deg,#4f46e5f2,#6366f1f2);border-color:#4f46e599;color:#f8fafc;box-shadow:0 8px 20px #4f46e54d}.field{display:flex;flex-direction:column;gap:.45rem;font-size:.8rem;color:var(--text-main)}.field select,.field textarea{border-radius:.75rem;border:1px solid var(--input-border);padding:.55rem .7rem;font-size:.85rem;color:var(--text-main);background:var(--input-bg);transition:border .2s ease,box-shadow .2s ease}.field select:focus,.field textarea:focus{outline:none;border-color:#6366f199;box-shadow:0 0 0 3px #6366f133}.field textarea{min-height:8rem;resize:vertical;line-height:1.4;font-family:JetBrains Mono,Fira Code,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.field-hint{margin:0;font-size:.7rem;color:var(--text-muted)}.field-hint.error{color:#dc2626}.pill-grid,.theme-grid,.toggle-grid{display:grid;gap:.45rem}.pill-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr))}.theme-grid{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.toggle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.slider-field{display:flex;flex-direction:column;gap:.35rem;font-size:.75rem;color:var(--text-muted)}.slider-field>div{display:flex;align-items:center;gap:.75rem}.slider-field input[type=range]{flex:1}.slider-field input[type=range]:disabled{opacity:.4;cursor:not-allowed}.slider-field span{width:2.5rem;text-align:right;font-weight:600;color:var(--text-main)}.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}.info-chip{background:var(--chip-bg);border-radius:999px;padding:.3rem .75rem;font-size:.75rem;color:var(--text-main);border:1px solid var(--border-color)}.info-chip strong{margin-right:.35rem;font-weight:600}.viewer{background:var(--viewer-bg);border-radius:1.5rem;padding:1.25rem;box-shadow:0 25px 40px #0f172a26;display:flex;flex-direction:column;gap:1rem;min-height:0}.viewer-header{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:flex-start}.viewer-title h2{margin:0;font-size:1.1rem;color:var(--text-main)}.viewer-title p{margin:.2rem 0 0;font-size:.8rem;color:var(--text-muted)}.viewer-flags{display:flex;flex-wrap:wrap;gap:.4rem}.feature-chip{padding:.25rem .6rem;border-radius:999px;font-size:.7rem;border:1px solid var(--border-color);background:var(--chip-bg);color:var(--text-main);cursor:pointer;transition:all .2s ease}.feature-chip:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}.feature-chip.active{border-color:#2dd4bf99;background:#10b98147;color:var(--text-main)}.feature-chip.inactive{border-color:var(--border-color);background:#94a3b833;color:var(--text-muted)}.viewer-body{flex:1;min-height:0;border-radius:1rem;border:1px solid rgba(148,163,184,.3);padding:1rem;overflow:auto;background:var(--bigobjview-bg-color, #0f172a);max-height:min(70vh,720px);position:relative;&:focus{outline:2px solid rgba(148,163,184,.7)}}.viewer-body::-webkit-scrollbar,.control-panel-scroll::-webkit-scrollbar{width:6px}.viewer-body::-webkit-scrollbar-thumb,.control-panel-scroll::-webkit-scrollbar-thumb{background:#94a3b899;border-radius:999px}.demo-footer{display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.75rem;font-size:.75rem;color:var(--footer-text);background:var(--footer-bg);border-top:1px solid var(--border-color)}.demo-footer span:last-child{font-weight:500}.custom-user-view{display:inline-block;margin:2px 0}.custom-user-view:hover{box-shadow:0 2px 4px #0000001a}.demo-highlight{position:relative}.demo-highlight:after{content:"🆕";position:absolute;top:-8px;right:-8px;font-size:12px}.theme-toggle-group{display:flex;background:#94a3b833;border-radius:999px;padding:2px;border:1px solid rgba(148,163,184,.3);margin-right:.5rem}.theme-toggle-btn{background:transparent;border:none;cursor:pointer;padding:4px 8px;border-radius:999px;font-size:14px;line-height:1;transition:all .2s ease;opacity:.6;filter:grayscale(100%)}.theme-toggle-btn:hover{opacity:1;background:#ffffff1a;filter:grayscale(0%)}.theme-toggle-btn.active{background:#fff3;opacity:1;box-shadow:0 1px 3px #0000001a;filter:grayscale(0%)}@media(max-width:700px){.demo-main{grid-template-columns:1fr}.control-panel{max-height:40vh}.viewer{min-height:45vh}}.popover-anchor{display:block;overflow:hidden;text-overflow:ellipsis;&:hover+.popover-content{display:unset}}.popover-content{transition:opacity .4s;position:fixed;inset-block-start:anchor(start);inset-inline-start:anchor(start);inset-inline-end:anchor(end);padding:.2em .5em .5em;margin:-.1em;white-space:pre-wrap;word-break:keep-all;background-color:var(--bg-color);border:solid 1px color-mix(in srgb,currentColor 30%,transparent);z-index:1;box-shadow:2px 2px 8px light-dark(#333b3c66,#efefec66);max-height:20em;overflow:auto;&:not(:hover){display:none}@starting-style{opacity:0}}:root{color-scheme:light dark;--bigobjview-color: light-dark(#333b3c, #efefec);--bigobjview-bg-color: light-dark(#f9f9f9, #212121);--bigobjview-change-color: rgb(181, 36, 0);--bigobjview-fontsize: 12px;--bigobjview-type-boolean-color: #08f;--bigobjview-type-number-color: red;--bigobjview-type-bigint-color: red;--bigobjview-type-string-color: orange;--bigobjview-type-object-array-color: #0aa;--bigobjview-type-object-object-color: #0aa;--bigobjview-type-object-promise-color: #0aa;--bigobjview-type-object-map-color: #0aa;--bigobjview-type-object-set-color: #0aa;--bigobjview-type-function-color: #08f;--bigobjview-type-object-regexp-color: red;--bigobjview-type-object-date-color: #08f;--bigobjview-type-object-error-color: red;--bigobjview-action-btn: light-dark(#ddd, #555);--bigobjview-action-success: light-dark(rgb(0, 184, 0), #0c0);--bigobjview-action-error: red}.big-objview-root{font-family:monospace;font-size:var(--bigobjview-fontsize, 12px);--color: var(--bigobjview-color);--bg-color: var(--bigobjview-bg-color);--opacity: 100%;background-color:var(--bg-color);color:var(--color);*{box-sizing:content-box}.row{display:flex;flex-direction:row;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;--compare-mark: calc(100% - (100%*clamp(0, abs(var(--mark-index, -1) - var(--current-index, -1)), 1))) ;--mark-color: color-mix(in srgb, rgb(255, 128, 0) var(--compare-mark), rgb(255, 234, 0));--row-bg-mark: color-mix(in srgb, rgba(255, 128, 0, .1) var(--compare-mark), transparent);background-color:var(--row-bg-mark);&:hover{background-color:color-mix(in srgb,var(--bigobjview-color) 3%,var(--row-bg-mark))}}mark{background-color:var(--mark-color, rgb(121, 109, 0))}.line-number{opacity:.3;white-space:preserve;user-select:none}.node-default{display:contents}.pointer-cursor{cursor:pointer}.expand-symbol{width:1em;opacity:.5;line-height:unset;vertical-align:top;user-select:none}.tree-indents{white-space:preserve;user-select:none;>span{--compare: clamp(0, abs(var(--indent-index, -1) - var(--active-parent, -1)), 1) ;opacity:clamp(.07,calc(1 - var(--compare)),.4);transition:opacity .3s;position:relative;display:inline-block;&:after{content:"";position:absolute;background-color:currentColor;left:.25em;width:.1em;top:-0em;bottom:-0em}}}[data-child=true] .expand-symbol{cursor:pointer}.symbol{opacity:.3;white-space:pre}.node-default[data-nonenumrable=true]>.name{--opacity: 30%}.node-default>.name{transition:background-color 1s;background-color:#0000}.node-default{color:color-mix(in srgb,var(--color) var(--opacity),transparent);>*{overflow:hidden;flex-shrink:0;flex-grow:0;text-overflow:ellipsis}button,.tag{font-size:.8em;border-radius:3px;border-width:0;cursor:pointer;text-transform:uppercase;padding-inline:.6em;padding-block:1px 0;vertical-align:middle;line-height:1.2}}.value{overflow:hidden;flex-shrink:1!important;text-overflow:ellipsis;&.type-boolean{--color: var(--bigobjview-type-boolean-color, #08f)}&.type-number{--color: var(--bigobjview-type-number-color, red)}&.type-bigint{--color: var(--bigobjview-type-bigint-color, red)}&.type-undefined{--opacity: 30%}&.type-string{--color: var(--bigobjview-type-string-color, orange)}&.type-object-array{--color: var(--bigobjview-type-object-array-color, #0aa)}&.type-object-object{--color: var(--bigobjview-type-object-object-color, #0aa)}&.type-object-promise{--color: var(--bigobjview-type-object-promise-color, #0aa)}&.type-object-map{--color: var(--bigobjview-type-object-map-color, #0aa)}&.type-object-set{--color: var(--bigobjview-type-object-set-color, #0aa)}&.type-null{--opacity: 30%}&.type-function{--color: var(--bigobjview-type-function-color, #08f);font-style:italic}&.type-object-regexp{--color: var(--bigobjview-type-object-regexp-color, red)}&.type-object-date{--color: var(--bigobjview-type-object-date-color, #08f)}&.type-object-error,&[class*=error]{--color: var(--bigobjview-type-object-error-color, red)}&.value-preview{--color: var(--bigobjview-color);>.name{--opacity: 30%}}}.name{transition:background-color 1s;background-color:#0000;&.updated{transition:background-color 0s;background-color:var(--bigobjview-change-color)}}.tags{display:flex;align-self:center;vertical-align:middle;align-content:stretch;.tag{background-color:var(--bigobjview-action-btn);font-weight:700;margin-inline:.3em;&.circular{background-color:#c12d00;color:#fff}}}.actions{display:flex;height:90%;user-select:none;align-self:center;vertical-align:middle;align-content:stretch;gap:.3em;padding-inline-start:.3em;padding-block:.2em;font-family:monospace;overflow:hidden;flex-grow:1;button{opacity:.5;color:var(--color);background-color:oklch(from var(--color) clamp(0,70 - l * 100,1) 0 0);font-weight:700;overflow:hidden;text-overflow:ellipsis;height:min-content;margin:0;&:hover{opacity:1}}button.icon{background-color:transparent;padding-inline:.3em;font-weight:700;font-size:1em;line-height:.5}button.error{background-color:var(--bigobjview-action-error, red);color:oklch(from var(--bigobjview-action-error) clamp(0,70 - l * 100,1) 0 0)}button.success{background-color:var(--bigobjview-action-success, rgb(0, 139, 0));color:oklch(from var(--bigobjview-action-success) clamp(0,70 - l * 100,1) 0 0)}}.node-default,.name,.value{color:color-mix(in srgb,var(--color) var(--opacity),transparent)}.buffer-view>span{padding-inline:.5ch;white-space:pre}.buffer-view-chars{padding-inline-start:2ch;>span{display:inline-block;width:1.5ch;text-align:center}}}.big-objview-search{position:absolute;transition:transform .2s;right:.5em;top:.5em;z-index:101;transform:translateY(-3em);color:var(--bigobjview-color);&.active{transform:translateY(0)}.search-box{background-color:var(--bigobjview-bg-color);outline:solid 1px color-mix(in srgb,currentColor 20%,transparent);border-radius:.3em;display:flex;align-items:center;padding:.2em;height:1.3em;gap:2px;resize:horizontal;min-width:14em;&:focus-within{outline:solid 2px color-mix(in srgb,currentColor 30%,transparent)}}.loading-indicator{font-size:.7em;transition:opacity .4s;height:1em;line-height:1;padding-inline-start:.2em}.input{border:none;outline:none;flex:1;width:50px;background:none;color:inherit}.search-cursor{opacity:.5;font-size:.7em;font-family:monospace;white-space:pre}button{border:none;font-family:monospace;border-radius:2px;height:1.5em;width:1.5em;color:inherit;background-color:color-mix(in srgb,currentColor 15%,transparent);&:hover{outline:solid 1px color-mix(in srgb,currentColor 25%,transparent)}&:active{background-color:color-mix(in srgb,currentColor 25%,transparent)}}}