.xqdemo{--demo-bg:#f5f5f5;--demo-surface:#fff;--demo-text:#222;--demo-text-muted:#565656;--demo-border:#d4d4d4;--demo-border-strong:#b8b8b8;--demo-hover:#ececec;--demo-active:#e2e2e2;--demo-focus:#4a4a4a;--demo-shadow:0 1px 2px #00000014;color:var(--demo-text);line-height:1.45}:root[data-theme=dark] .xqdemo,.xqdemo.is-dark{--demo-bg:#121212;--demo-surface:#1d1d1d;--demo-text:#efefef;--demo-text-muted:#bdbdbd;--demo-border:#383838;--demo-border-strong:#5a5a5a;--demo-hover:#2a2a2a;--demo-active:#323232;--demo-focus:#9e9e9e;--demo-shadow:0 1px 2px #00000080}.xqdemo.is-dark{background:var(--demo-bg);border-radius:12px;padding:16px}.xqdemo p{color:var(--demo-text-muted)}.xqdemo button{border:1px solid var(--demo-border);background:var(--demo-surface);color:var(--demo-text);cursor:pointer;border-radius:6px;margin:0 8px 8px 0;padding:7px 12px}.xqdemo button:hover{background:var(--demo-hover)}.xqdemo button:focus-visible{outline:2px solid var(--demo-focus);outline-offset:1px}.xqdemo input,.xqdemo select{border:1px solid var(--demo-border);background:var(--demo-surface);color:var(--demo-text);border-radius:6px;padding:6px 8px}.xqdemo label{color:var(--demo-text);margin:4px 6px 4px 0;display:inline-block}.xqdemo .grid{grid-template-columns:minmax(0,2fr) minmax(280px,1fr);align-items:start;gap:16px;display:grid}.xqdemo #log,.xqdemo pre{border:1px solid var(--demo-border);background:var(--demo-surface);max-height:320px;box-shadow:var(--demo-shadow);border-radius:8px;padding:10px;font-size:12px;overflow:auto}.xqdemo xq-board{--xq-border-color:var(--demo-border);--xq-surface-color:var(--demo-surface);box-shadow:var(--demo-shadow);border-radius:8px;display:block}.xqdemo xq-board[data-shortcuts-active]{outline:2px solid var(--demo-focus);outline-offset:2px}.xqdemo xq-board::part(autoplay-indicator),.xqdemo xq-toolbar-autoplay::part(autoplay-status){font-family:inherit}.xqdemo .demo-chrome-global{border:1px solid var(--demo-border);background:var(--demo-surface);box-shadow:var(--demo-shadow);border-radius:8px;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px;padding:10px 12px;display:flex}.xqdemo .demo-chrome-global .demo-mode-label{align-items:center;gap:6px;display:inline-flex}.xqdemo .demo-chrome-status{color:var(--demo-text-muted);font-size:.9rem}.xqdemo xq-move-list{--xq-move-row-hover-bg:var(--demo-hover);--xq-move-row-active-bg:var(--demo-active);--xq-move-row-variant-badge-bg:color-mix(in srgb, var(--demo-active) 65%, #4a6fa5 35%);--xq-move-row-variant-badge-color:var(--demo-text);--xq-move-pair-gap:4px 10px;--xq-move-comment-color:var(--demo-text-muted)}.xqdemo xq-variation-list{--xq-variation-row-hover-bg:var(--demo-hover);--xq-variation-row-selected-bg:color-mix(in srgb, var(--demo-active) 55%, #4a6fa5 45%);--xq-variation-row-selected-border:var(--demo-border-strong);--xq-variation-row-active-bg:var(--demo-active)}.xqdemo xq-move-list::part(move-row-active),.xqdemo xq-move-list button[part~=move-row-active],.xqdemo xq-variation-list::part(variation-row-active){border-color:var(--demo-border-strong)}.xqdemo xq-move-list::part(move-comment){border-inline-start:2px solid var(--demo-border);padding-inline-start:8px}.xqdemo xq-move-list::part(move-row-variant-badge){font-size:.7em}.xqdemo .demo-guide{border:1px solid var(--demo-border);background:var(--demo-surface);box-shadow:var(--demo-shadow);color:var(--demo-text);border-radius:8px;margin:0 0 16px;padding:12px 14px}.xqdemo .demo-guide summary{cursor:pointer;color:var(--demo-text);font-weight:600}.xqdemo .demo-guide summary::marker{color:var(--demo-text-muted)}.xqdemo .demo-guide[open] summary{margin-bottom:10px}.xqdemo .demo-guide h3{color:var(--demo-text);margin:14px 0 6px;font-size:.95rem}.xqdemo .demo-guide h3:first-of-type{margin-top:0}.xqdemo .demo-guide p,.xqdemo .demo-guide li{color:var(--demo-text-muted);font-size:.92rem}.xqdemo .demo-guide kbd{border:1px solid var(--demo-border-strong);background:var(--demo-hover);color:var(--demo-text);border-radius:4px;padding:1px 5px;font-family:inherit;font-size:.85em;display:inline-block}.xqdemo .demo-guide ol.test-checklist{margin:0;padding-left:1.25rem}.xqdemo .demo-guide ol.test-checklist>li{margin-bottom:10px}.xqdemo .demo-guide ol.test-checklist>li>strong{color:var(--demo-text)}.xqdemo .demo-guide table.shortcut-ref{border-collapse:collapse;width:100%;margin:8px 0;font-size:.88rem}.xqdemo .demo-guide table.shortcut-ref th,.xqdemo .demo-guide table.shortcut-ref td{border:1px solid var(--demo-border);text-align:left;padding:6px 8px}.xqdemo .demo-guide table.shortcut-ref th{background:var(--demo-hover);color:var(--demo-text)}