:root{--xvw-page: #ffffff;--xvw-soft: #f4f6fa;--xvw-line: #e1e5ee;--xvw-ink: #141821;--xvw-mute: #5b6476;--xvw-accent: #2563eb;--xvw-accent-dark: #1d4ed8;--xvw-bg: #ffffff;--xvw-bg-2: #f7f8fb;--xvw-bg-3: #eef1f6;--xvw-edge: #dde2eb;--xvw-fg: #1d2330;--xvw-fg-mute: #5f6a7e;--xvw-tag: #1d4ed8;--xvw-attr: #9a5300;--xvw-val: #0f7a3d;--xvw-cm: #6f7888;--xvw-cd: #8b2fc9;--xvw-pi: #0e7490;--xvw-ok: #16a34a;--xvw-err: #dc2626;--xvw-hit: rgba(250,204,21,0.24);--xvw-sel: rgba(37,99,235,0.1);--xvw-mono: 'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;--xvw-radius: 14px;--xvw-radius-sm: 8px;--primary: var(--xvw-accent);--primary-dark: var(--xvw-accent-dark);--border: var(--xvw-line);--surface: var(--xvw-page);--shadow-soft: 0 6px 24px rgba(20,24,33,0.08);--surface-muted: var(--xvw-soft);--text-main: var(--xvw-ink);--text-muted: var(--xvw-mute);}
.xvw-byline{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.5rem 1rem;padding: 0.65rem 1rem;margin: 0 0 1.5rem;background: var(--xvw-soft);border: 1px solid var(--xvw-line);border-radius: var(--xvw-radius-sm);font-size: 0.8rem;color: var(--xvw-mute);}
.xvw-byline-author{font-weight: 600;color: var(--xvw-ink);}
.xvw-byline-author .author-link{color: var(--xvw-accent);text-decoration: none;border-bottom: 1px solid rgba(37,99,235,0.4);}
.xvw-byline-author .author-link:hover{border-bottom-color: var(--xvw-accent);}
.xvw-byline-updated{font-weight: 500;white-space: nowrap;}
.xvw-app{position: relative;background: var(--xvw-bg);color: var(--xvw-fg);border: 1px solid var(--xvw-edge);border-radius: var(--xvw-radius);box-shadow: 0 10px 30px rgba(20,24,33,0.07);overflow: hidden;margin-bottom: 3rem;}
.xvw-app.is-drop::after{content: 'Drop the file to open it';position: absolute;inset: 10px;display: flex;align-items: center;justify-content: center;border: 2px dashed var(--xvw-tag);border-radius: var(--xvw-radius-sm);background: rgba(255,255,255,0.93);color: var(--xvw-tag);font: 600 1rem var(--xvw-mono);z-index: 5;pointer-events: none;}
.xvw-bar{display: flex;flex-wrap: wrap;align-items: center;gap: 0.6rem 1rem;padding: 0.6rem 0.75rem;background: var(--xvw-bg-2);border-bottom: 1px solid var(--xvw-edge);}
.xvw-tabs{display: inline-flex;gap: 2px;padding: 3px;background: var(--xvw-bg-3);border: 1px solid var(--xvw-edge);border-radius: 10px;}
.xvw-tab{display: inline-flex;align-items: center;gap: 0.45rem;padding: 0.4rem 0.95rem;border: 0;border-radius: 7px;background: transparent;color: var(--xvw-fg-mute);font: 600 0.82rem var(--xvw-mono);cursor: pointer;}
.xvw-tab:hover{color: var(--xvw-fg);}
.xvw-tab.is-on{background: var(--xvw-bg);color: var(--xvw-ink);box-shadow: 0 1px 3px rgba(20,24,33,0.1),inset 0 -2px 0 var(--xvw-tag);}
.xvw-tab:focus-visible,.xvw-btn:focus-visible,.xvw-sample:focus-visible,.xvw-lvl:focus-visible,.xvw-icon:focus-visible,.xvw-crumb:focus-visible,.xvw-more:focus-visible{outline: 2px solid var(--xvw-tag);outline-offset: 2px;}
.xvw-tab-n{padding: 0.05rem 0.45rem;border-radius: 999px;background: rgba(37,99,235,0.1);color: var(--xvw-tag);font-size: 0.7rem;}
.xvw-file-chip{max-width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;padding: 0.25rem 0.6rem;border: 1px solid var(--xvw-edge);border-radius: 999px;color: var(--xvw-fg-mute);font: 0.75rem var(--xvw-mono);}
.xvw-bar-actions{display: flex;gap: 0.5rem;margin-left: auto;}
.xvw-file{position: absolute;width: 1px;height: 1px;opacity: 0;pointer-events: none;}
.xvw-btn{display: inline-flex;align-items: center;justify-content: center;padding: 0.45rem 0.9rem;border: 1px solid var(--xvw-edge);border-radius: var(--xvw-radius-sm);background: var(--xvw-bg-3);color: var(--xvw-fg);font: 600 0.8rem/1.2 system-ui,-apple-system,'Segoe UI',sans-serif;cursor: pointer;transition: background 0.15s,border-color 0.15s;}
.xvw-btn:hover{border-color: #c3cad6;background: #e4e8ef;}
.xvw-btn-solid{background: var(--xvw-accent);border-color: var(--xvw-accent);color: #fff;}
.xvw-btn-solid:hover{background: var(--xvw-accent-dark);border-color: var(--xvw-accent-dark);}
.xvw-btn-sm{padding: 0.35rem 0.7rem;font-size: 0.75rem;}
.xvw-panel{padding: 0.75rem;}
.xvw-input{display: block;width: 100%;min-height: 360px;padding: 0.9rem 1rem;background: var(--xvw-bg);color: var(--xvw-fg);border: 1px solid var(--xvw-edge);border-radius: var(--xvw-radius-sm);font: 0.84rem/1.6 var(--xvw-mono);resize: vertical;tab-size: 2;white-space: pre;overflow: auto;}
.xvw-input::placeholder{color: #8a93a3;}
.xvw-input:focus{outline: none;border-color: var(--xvw-tag);box-shadow: 0 0 0 3px rgba(37,99,235,0.12);}
.xvw-samples{display: flex;flex-wrap: wrap;align-items: center;gap: 0.45rem;margin-top: 0.7rem;}
.xvw-samples-label{margin-right: 0.25rem;color: var(--xvw-fg-mute);font: 600 0.72rem var(--xvw-mono);text-transform: uppercase;letter-spacing: 0.06em;}
.xvw-sample{padding: 0.3rem 0.75rem;border: 1px dashed #b9c1ce;border-radius: 999px;background: transparent;color: var(--xvw-fg);font: 0.78rem var(--xvw-mono);cursor: pointer;}
.xvw-sample:hover{border-style: solid;border-color: var(--xvw-tag);color: var(--xvw-tag);}
.xvw-error{margin-top: 0.75rem;border: 1px solid rgba(220,38,38,0.35);border-radius: var(--xvw-radius-sm);background: #fef5f5;overflow: hidden;}
.xvw-error-head{display: flex;flex-wrap: wrap;align-items: center;gap: 0.5rem 0.75rem;padding: 0.6rem 0.8rem;}
.xvw-error-tag{padding: 0.15rem 0.5rem;border-radius: 5px;background: var(--xvw-err);color: #fff;font: 700 0.7rem var(--xvw-mono);text-transform: uppercase;letter-spacing: 0.05em;}
.xvw-error-msg{flex: 1 1 260px;color: #991b1b;font: 0.8rem var(--xvw-mono);word-break: break-word;}
.xvw-error-code{margin: 0;padding: 0.7rem 0.9rem;background: #ffffff;border-top: 1px solid rgba(220,38,38,0.2);color: var(--xvw-fg);font: 0.78rem/1.55 var(--xvw-mono);white-space: pre;overflow-x: auto;}
.xvw-tools{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 0.6rem;margin-bottom: 0.65rem;}
.xvw-find{display: flex;align-items: center;gap: 0.35rem;flex: 1 1 320px;padding: 0.2rem 0.3rem 0.2rem 0.2rem;background: var(--xvw-bg);border: 1px solid var(--xvw-edge);border-radius: var(--xvw-radius-sm);}
.xvw-find:focus-within{border-color: var(--xvw-tag);}
.xvw-search{flex: 1;min-width: 0;padding: 0.4rem 0.6rem;border: 0;background: transparent;color: var(--xvw-fg);font: 0.82rem var(--xvw-mono);}
.xvw-search:focus{outline: none;}
.xvw-search::placeholder{color: #8a93a3;}
.xvw-count{color: var(--xvw-fg-mute);font: 0.72rem var(--xvw-mono);white-space: nowrap;}
.xvw-icon{width: 28px;height: 28px;border: 1px solid var(--xvw-edge);border-radius: 6px;background: var(--xvw-bg-3);color: var(--xvw-fg);font-size: 0.85rem;line-height: 1;cursor: pointer;}
.xvw-icon:hover{border-color: var(--xvw-tag);color: var(--xvw-tag);}
.xvw-depth{display: inline-flex;align-items: center;gap: 3px;}
.xvw-depth-label{margin-right: 0.35rem;color: var(--xvw-fg-mute);font: 600 0.72rem var(--xvw-mono);text-transform: uppercase;letter-spacing: 0.06em;}
.xvw-lvl{min-width: 32px;padding: 0.3rem 0.55rem;border: 1px solid var(--xvw-edge);border-radius: 6px;background: var(--xvw-bg);color: var(--xvw-fg-mute);font: 600 0.75rem var(--xvw-mono);cursor: pointer;}
.xvw-lvl:hover{color: var(--xvw-fg);}
.xvw-lvl.is-on{border-color: var(--xvw-tag);color: var(--xvw-tag);background: rgba(37,99,235,0.07);}
.xvw-split{display: grid;grid-template-columns: minmax(0,1fr) 330px;gap: 0.75rem;}
.xvw-tree-wrap{position: relative;min-height: 360px;max-height: 600px;overflow: auto;background: var(--xvw-bg);border: 1px solid var(--xvw-edge);border-radius: var(--xvw-radius-sm);padding: 0.4rem 0.3rem;}
.xvw-tree,.xvw-tree ul{list-style: none;margin: 0;padding: 0;}
.xvw-tree ul{margin-left: 13px;padding-left: 9px;border-left: 1px solid #e3e7ee;}
.xvw-tree:focus{outline: none;}
.xvw-row{display: flex;align-items: baseline;gap: 2px;padding: 1px 8px 1px 2px;border-radius: 5px;font: 0.8rem/1.75 var(--xvw-mono);white-space: nowrap;cursor: pointer;}
.xvw-row:hover{background: rgba(15,23,42,0.04);}
.xvw-tw{flex: 0 0 16px;width: 16px;color: var(--xvw-fg-mute);text-align: center;user-select: none;font-size: 0.7rem;}
.has-kids > .xvw-row .xvw-tw::before{content: '\25B8';}
.has-kids[aria-expanded="true"] > .xvw-row .xvw-tw::before{content: '\25BE';}
.has-kids > .xvw-row .xvw-tw:hover{color: var(--xvw-tag);}
.xvw-lab{min-width: 0;}
.xvw-p{color: #8a93a3;}
.xvw-tag{color: var(--xvw-tag);}
.xvw-an{color: var(--xvw-attr);}
.xvw-av{color: var(--xvw-val);}
.xvw-tx{color: var(--xvw-fg);}
.xvw-cm{color: var(--xvw-cm);font-style: italic;}
.xvw-cd{color: var(--xvw-cd);}
.xvw-pi{color: var(--xvw-pi);}
.xvw-pill{display: inline-block;margin-left: 0.45rem;padding: 0 0.45rem;border-radius: 999px;background: rgba(100,116,139,0.12);color: var(--xvw-fg-mute);font: 0.68rem/1.6 var(--xvw-mono);vertical-align: 1px;}
.has-kids[aria-expanded="true"] > .xvw-row .xvw-kids-n{display: none;}
.xvw-tree li.is-hit > .xvw-row{background: var(--xvw-hit);}
.xvw-tree li.is-sel > .xvw-row{background: var(--xvw-sel);box-shadow: inset 2px 0 0 var(--xvw-tag);}
.xvw-tree:focus-visible li.is-sel > .xvw-row{outline: 1px solid rgba(37,99,235,0.45);}
.xvw-more-row{padding: 0.25rem 0 0.25rem 18px;}
.xvw-more{padding: 0.2rem 0.65rem;border: 1px dashed #b9c1ce;border-radius: 6px;background: transparent;color: var(--xvw-tag);font: 0.74rem var(--xvw-mono);cursor: pointer;}
.xvw-more:hover{border-style: solid;}
.xvw-tree-empty{margin: 0;padding: 2.5rem 1rem;color: var(--xvw-fg-mute);font: 0.82rem var(--xvw-mono);text-align: center;}
.xvw-insp{align-self: start;position: sticky;top: 0.75rem;max-height: 600px;overflow: auto;padding: 0.85rem;background: var(--xvw-bg-2);border: 1px solid var(--xvw-edge);border-radius: var(--xvw-radius-sm);font-size: 0.8rem;}
.xvw-insp-empty{margin: 0;color: var(--xvw-fg-mute);font: 0.8rem var(--xvw-mono);}
.xvw-i-head{display: flex;align-items: baseline;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 0.75rem;}
.xvw-i-type{padding: 0.1rem 0.45rem;border-radius: 5px;background: rgba(37,99,235,0.1);color: var(--xvw-tag);font: 700 0.66rem var(--xvw-mono);text-transform: uppercase;letter-spacing: 0.06em;}
.xvw-i-name{color: var(--xvw-ink);font: 600 0.95rem var(--xvw-mono);word-break: break-all;}
.xvw-i-block{margin-bottom: 0.8rem;}
.xvw-i-label{display: block;margin-bottom: 0.3rem;color: var(--xvw-fg-mute);font: 600 0.68rem var(--xvw-mono);text-transform: uppercase;letter-spacing: 0.06em;}
.xvw-i-xpath{display: block;padding: 0.5rem 0.6rem;background: var(--xvw-bg);border: 1px solid var(--xvw-edge);border-radius: 6px;color: var(--xvw-val);font: 0.76rem/1.5 var(--xvw-mono);word-break: break-all;}
.xvw-crumbs{display: flex;flex-wrap: wrap;align-items: center;gap: 2px;margin-bottom: 0.8rem;font: 0.74rem var(--xvw-mono);}
.xvw-crumb{padding: 0 0.3rem;border: 0;border-radius: 4px;background: transparent;color: var(--xvw-tag);font: inherit;cursor: pointer;}
.xvw-crumb:hover{background: rgba(37,99,235,0.1);}
.xvw-crumb-sep{color: #a0a8b6;}
.xvw-crumb-here{padding: 0 0.3rem;color: var(--xvw-ink);font-weight: 600;}
.xvw-facts{display: grid;grid-template-columns: 1fr 1fr;gap: 0.4rem;margin: 0 0 0.8rem;}
.xvw-facts div{padding: 0.4rem 0.5rem;background: var(--xvw-bg);border: 1px solid var(--xvw-edge);border-radius: 6px;min-width: 0;}
.xvw-facts dt{color: var(--xvw-fg-mute);font: 600 0.64rem var(--xvw-mono);text-transform: uppercase;letter-spacing: 0.05em;}
.xvw-facts dd{margin: 0.1rem 0 0;color: var(--xvw-fg);font: 0.78rem var(--xvw-mono);word-break: break-all;}
.xvw-attrs{width: 100%;border-collapse: collapse;font: 0.75rem/1.45 var(--xvw-mono);}
.xvw-attrs th,.xvw-attrs td{padding: 0.3rem 0.4rem;border-bottom: 1px solid var(--xvw-edge);text-align: left;vertical-align: top;word-break: break-all;}
.xvw-attrs th{width: 40%;color: var(--xvw-attr);font-weight: 500;}
.xvw-attrs td{color: var(--xvw-val);}
.xvw-i-val{max-height: 180px;margin: 0;padding: 0.5rem 0.6rem;overflow: auto;background: var(--xvw-bg);border: 1px solid var(--xvw-edge);border-radius: 6px;color: var(--xvw-fg);font: 0.76rem/1.5 var(--xvw-mono);white-space: pre-wrap;word-break: break-word;}
.xvw-i-actions{display: flex;flex-wrap: wrap;gap: 0.4rem;}
.xvw-status{display: flex;flex-wrap: wrap;align-items: center;gap: 0.4rem 0.75rem;padding: 0.5rem 0.85rem;background: var(--xvw-bg-2);border-top: 1px solid var(--xvw-edge);color: var(--xvw-fg-mute);font: 0.74rem var(--xvw-mono);}
.xvw-dot{width: 8px;height: 8px;border-radius: 50%;background: #a0a8b6;flex: 0 0 8px;}
.xvw-status[data-state="ok"] .xvw-dot{background: var(--xvw-ok);box-shadow: 0 0 0 3px rgba(22,163,74,0.16);}
.xvw-status[data-state="err"] .xvw-dot{background: var(--xvw-err);box-shadow: 0 0 0 3px rgba(220,38,38,0.15);}
.xvw-status[data-state="err"] .xvw-status-text{color: #b91c1c;}
.xvw-status-text{flex: 1 1 260px;}
.xvw-stats{display: flex;flex-wrap: wrap;gap: 0.3rem 1rem;}
.xvw-stats b{color: var(--xvw-fg);font-weight: 600;}
.xvw-toast{position: fixed;left: 50%;bottom: 24px;transform: translateX(-50%);z-index: 1080;padding: 0.6rem 1rem;border-radius: var(--xvw-radius-sm);background: var(--xvw-ink);color: #fff;font: 600 0.82rem system-ui,-apple-system,'Segoe UI',sans-serif;box-shadow: 0 10px 30px rgba(0,0,0,0.25);max-width: calc(100% - 32px);}
.xvw-read{margin: 0 auto 3rem;color: var(--xvw-ink);font-size: 1rem;line-height: 1.75;}
.xvw-read h2{margin: 2.5rem 0 0.9rem;font-size: 1.45rem;font-weight: 800;color: var(--xvw-ink);}
.xvw-read p{margin: 0 0 1rem;color: #2b3140;}
.xvw-read a{color: var(--xvw-accent);text-decoration: none;border-bottom: 1px solid rgba(37,99,235,0.35);}
.xvw-read a:hover{border-bottom-color: var(--xvw-accent);}
.xvw-read code{padding: 0.1rem 0.35rem;border-radius: 5px;background: var(--xvw-soft);border: 1px solid var(--xvw-line);color: #b42357;font: 0.86em var(--xvw-mono);word-break: break-word;}
.xvw-read kbd{display: inline-block;min-width: 1.6em;padding: 0.05rem 0.4rem;border: 1px solid #c9cfdb;border-bottom-width: 2px;border-radius: 5px;background: #fff;color: var(--xvw-ink);font: 600 0.8em var(--xvw-mono);text-align: center;}
.xvw-steps{margin: 0 0 1.25rem;padding: 0;list-style: none;counter-reset: xvw-step;}
.xvw-steps li{position: relative;margin-bottom: 0.7rem;padding: 0.7rem 0.9rem 0.7rem 3rem;background: var(--xvw-soft);border: 1px solid var(--xvw-line);border-radius: 10px;counter-increment: xvw-step;}
.xvw-steps li::before{content: counter(xvw-step);position: absolute;left: 0.85rem;top: 0.75rem;width: 1.5rem;height: 1.5rem;border-radius: 50%;background: var(--xvw-accent);color: #fff;font: 700 0.75rem/1.5rem var(--xvw-mono);text-align: center;}
.xvw-bullets{margin: 0 0 1.25rem;padding-left: 1.2rem;}
.xvw-bullets li{margin-bottom: 0.55rem;color: #2b3140;}
.xvw-table-wrap{margin: 0 0 1.1rem;overflow-x: auto;border: 1px solid var(--xvw-line);border-radius: 10px;}
.xvw-table{width: 100%;border-collapse: collapse;font-size: 0.92rem;}
.xvw-table th,.xvw-table td{padding: 0.65rem 0.85rem;border-bottom: 1px solid var(--xvw-line);text-align: left;vertical-align: top;}
.xvw-table thead th{background: var(--xvw-soft);font-size: 0.78rem;font-weight: 700;text-transform: uppercase;letter-spacing: 0.04em;color: var(--xvw-mute);}
.xvw-table tbody tr:last-child td{border-bottom: 0;}
.xvw-table td:first-child{width: 42%;}
.xvw-keys td:first-child{width: 32%;white-space: nowrap;}
.xvw-read .xvw-pill{margin-left: 0.2rem;background: var(--xvw-soft);border: 1px solid var(--xvw-line);color: var(--xvw-mute);}
.xvw-code{margin: 0 0 1.1rem;padding: 0.9rem 1rem;background: var(--xvw-soft);border: 1px solid var(--xvw-line);border-radius: 10px;overflow-x: auto;}
.xvw-read .xvw-code code{padding: 0;border: 0;background: none;color: var(--xvw-val);font-size: 0.85rem;word-break: normal;white-space: pre;}
.xvw-note{margin: 1.75rem 0;padding: 1rem 1.15rem;border-left: 4px solid var(--xvw-accent);border-radius: 0 10px 10px 0;background: #eef4ff;}
.xvw-note p{margin: 0;}
@media (max-width: 991px){.xvw-split{grid-template-columns: 1fr;}.xvw-insp{position: static;max-height: none;}.xvw-tree-wrap{max-height: 460px;}}
@media (max-width: 575px){.xvw-bar-actions{margin-left: 0;width: 100%;}.xvw-bar-actions .xvw-btn{flex: 1;}.xvw-input{min-height: 280px;}.xvw-depth{width: 100%;}.xvw-facts{grid-template-columns: 1fr;}.xvw-read h2{font-size: 1.25rem;}.xvw-keys td:first-child{white-space: normal;}}