html[data-theme-mode="light"]{--vlist-bg:#ffffff;--vlist-bg-hover:#f9fafb;--vlist-bg-selected:#eff6ff;--vlist-bg-selected-hover:#dbeafe;--vlist-border:#e5e7eb;--vlist-border-selected:#3b82f6;--vlist-text:#111827;--vlist-text-muted:#6b7280;--vlist-scrollbar-thumb:#d1d5db;--vlist-scrollbar-thumb-hover:#9ca3af;--vlist-scrollbar-custom-thumb-bg:rgba(0,0,0,0.3);--vlist-scrollbar-custom-thumb-hover-bg:rgba(0,0,0,0.5);--vlist-group-header-bg:#f3f4f6}html[data-theme-mode="dark"]{--vlist-bg:#111827;--vlist-bg-hover:#1f2937;--vlist-bg-selected:rgba(59,130,246,0.2);--vlist-bg-selected-hover:rgba(59,130,246,0.3);--vlist-border:#374151;--vlist-border-selected:#3b82f6;--vlist-text:#f9fafb;--vlist-text-muted:#9ca3af;--vlist-scrollbar-thumb:#4b5563;--vlist-scrollbar-thumb-hover:#6b7280;--vlist-scrollbar-custom-thumb-bg:rgba(255,255,255,0.3);--vlist-scrollbar-custom-thumb-hover-bg:rgba(255,255,255,0.5);--vlist-group-header-bg:#1e2433}.example-chips{position:absolute;top:10px;right:12px;display:flex;flex-wrap:wrap;gap:6px;z-index:5}.example-chip{display:inline-block;font-size:12px;font-weight:500;line-height:1;padding:4px 10px;border-radius:6px;background:var(--bg-card,rgba(127,127,127,0.08));border:1px solid var(--border,rgba(127,127,127,0.15));color:var(--text-muted,#6b7280);white-space:nowrap}.container{--examples-radius:6px}.container{width:100%;max-width:1060px;margin:0 auto;padding:40px 36px 80px;box-sizing:border-box;overflow:hidden}.container header{margin-bottom:24px}.container h1{font-size:32px;font-weight:700;letter-spacing:-0.3px;color:var(--text);margin:0 0 8px}.container .description{color:var(--text-muted);font-size:16px;line-height:1.6;margin:0}.container .description a{color:var(--accent-text);text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:2px}.container .description a:hover{text-decoration-color:var(--accent-text)}.container .description code{font-family:"SF Mono",Monaco,Menlo,Consolas,monospace;font-size:14px;background:var(--bg-card);border:1px solid var(--border);padding:1px 6px;border-radius:4px;color:var(--text-muted)}.stats{display:flex;gap:24px;flex-wrap:wrap;background:var(--bg-card);border:1px solid var(--border);padding:12px 20px;border-radius:var(--examples-radius);margin-bottom:16px;font-size:14px;color:var(--text-muted);font-variant-numeric:tabular-nums}.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.controls label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;color:var(--text-muted)}.controls select{padding:6px 10px;border:1px solid var(--border);border-radius:var(--examples-radius);font-size:14px;background:var(--bg);color:var(--text);cursor:pointer;outline:none;transition:border-color 0.15s}.controls select:focus{border-color:var(--accent)}.controls button{padding:8px 16px;border:1px solid var(--border);border-radius:var(--examples-radius);background:var(--bg-card);color:var(--text);font-size:14px;font-weight:500;cursor:pointer;transition:background 0.15s ease,border-color 0.15s ease}.controls button:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.controls button:active{background:var(--border)}[id$="-container"]{overflow:hidden}[id$="-container"] .vlist{border-radius:var(--examples-radius)}.split-main [id$="-container"]{width:360px;height:600px;margin:0 auto}.split-main--full [id$="-container"]{width:auto;height:auto;margin:0}.split-layout{display:flex;gap:16px;align-items:stretch}.split-main{flex:1;min-width:0;background-color:var(--bg-card);border-radius:var(--examples-radius);padding:32px}.split-main--full{padding:0}.split-panel{width:320px;flex-shrink:0;display:flex;flex-direction:column;gap:2px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--examples-radius);overflow-x:hidden;overflow-y:auto}.panel-section{padding:14px 16px}.panel-section+.panel-section{border-top:1px solid var(--border)}.panel-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.6px;color:var(--text-dim);margin:0 0 8px}.panel-row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:28px}.panel-row.slider,.panel-row.no-margin{margin-top:0 !important}.panel-row+.panel-row{margin-top:8px}.panel-label{font-size:13px;font-weight:500;color:var(--text-muted);white-space:nowrap;flex-shrink:0}.panel-value{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums;text-align:right;font-family:"SF Mono",Monaco,Menlo,Consolas,monospace}.panel-input-group{display:flex;gap:4px;flex:1;min-width:0}.panel-input{width:64px;padding:5px 8px;border:1px solid var(--border);border-radius:var(--examples-radius);font-size:13px;font-variant-numeric:tabular-nums;background:var(--bg);color:var(--text);outline:none;transition:border-color 0.15s;-moz-appearance:textfield}.panel-input::-webkit-inner-spin-button,.panel-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.panel-input:focus{border-color:var(--accent)}.panel-select{padding:5px 24px 5px 8px;border:1px solid var(--border);border-radius:var(--examples-radius);font-size:13px;background:var(--bg);color:var(--text);cursor:pointer;outline:none;transition:border-color 0.15s;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%236b7280'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center}.panel-select:focus{border-color:var(--accent)}.panel-select--full{flex:1}.panel-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border:1px solid var(--border);border-radius:var(--examples-radius);background:var(--bg);color:var(--text);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background 0.15s ease,border-color 0.15s ease}.panel-btn svg{flex-shrink:0;opacity:0.7}.panel-btn:hover svg{opacity:1}.panel-btn--icon{padding:5px 7px}.panel-btn:hover{background:var(--bg-card-hover);border-color:var(--border-hover)}.panel-btn:active{background:var(--border)}.panel-btn-group{display:flex;flex-wrap:wrap;gap:4px}.panel-segmented{display:flex;border:1px solid var(--border);border-radius:var(--examples-radius);overflow:hidden;flex:1}.panel-segmented__btn{flex:1;padding:5px 10px;border:none;border-right:1px solid var(--border);background:var(--bg);color:var(--text-muted);font-size:12px;font-weight:500;cursor:pointer;white-space:nowrap;transition:background 0.15s ease,color 0.15s ease}.panel-segmented__btn:last-child{border-right:none}.panel-segmented__btn:hover{background:var(--bg-card-hover);color:var(--text)}.panel-segmented__btn--active{background:var(--bg-card-hover);color:var(--text);font-weight:600}.panel-detail{font-size:13px;line-height:1.5;color:var(--text)}.panel-detail__empty{color:var(--text-dim);font-style:italic;font-size:13px}.panel-detail__header{display:flex;align-items:center;gap:10px;margin-bottom:8px}.panel-detail__name{font-weight:600;font-size:14px}.panel-detail__meta{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--text-muted);font-family:"SF Mono",Monaco,Menlo,Consolas,monospace;padding-top:6px;border-top:1px solid var(--border)}.container footer{margin-top:24px;text-align:center;color:var(--text-dim);font-size:0.7em;line-height:1.6}.container footer a{color:var(--text-muted);text-decoration:none}.container footer a:hover{color:var(--text)}.container footer code{font-family:"SF Mono",Monaco,Menlo,Consolas,monospace;font-size:13px;border:1px solid var(--border);padding:1px 6px;border-radius:4px;color:var(--text-muted)}html[data-theme] .container,html[data-theme] .stats,html[data-theme] .controls button,html[data-theme] .controls select,html[data-theme] [id$="-container"],html[data-theme] .split-panel,html[data-theme] .panel-btn,html[data-theme] .panel-input,html[data-theme] .panel-select,html[data-theme] .panel-segmented,html[data-theme] .panel-segmented__btn,html[data-theme] .vlist,html[data-theme] .vlist-item,html[data-theme] .vlist-grid-item,html[data-theme] .vlist-viewport,html[data-theme] .source__header,html[data-theme] .source__tab,html[data-theme] .source__panel pre{transition:background-color 0.25s ease,color 0.25s ease,border-color 0.25s ease}[data-theme-mode="dark"] .panel-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='%239ca3af'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E")}.source{position:sticky;bottom:0;margin-top:auto;z-index:100;overflow:hidden;display:flex;flex-direction:column;transition:background-color 0.25s ease,border-color 0.25s ease}.source__header{display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid var(--border);border-radius:0 8px 0 0;background:var(--bg-card);flex-shrink:0;height:41px}.source__title{font-size:13px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.5px;flex-shrink:0}.source__tabs{display:flex;gap:0;flex:1}.source__toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;color:var(--text-dim);cursor:pointer;border-radius:16px;flex-shrink:0;margin-left:auto;transition:color 0.15s ease,background 0.15s ease,transform 0.3s cubic-bezier(0.4,0,0.2,1)}.source__toggle:hover{color:var(--text);background:var(--bg-card-hover,rgba(255,255,255,0.06))}.source--open .source__toggle{transform:rotate(180deg)}.source__tab{padding:10px 16px;border:none;background:none;color:var(--text-dim);font-size:13px;font-weight:500;font-family:"SF Mono",Monaco,Menlo,Consolas,monospace;cursor:pointer;border-bottom:2px solid transparent;transition:color 0.15s ease,border-color 0.15s ease}.source__tab:hover{color:var(--text)}.source__tab--active{color:var(--accent-text,var(--text));border-bottom-color:var(--accent,currentColor)}.source__body{height:0;overflow:hidden;min-height:0;display:flex;flex-direction:column;background:var(--bg-card);transition:height 0.3s cubic-bezier(0.4,0,0.2,1)}.source--open .source__body{height:var(--source-body-height,60vh)}.source__panel{display:none;height:100%}.source__panel--active{display:block}.source__panel pre{margin:0;padding:20px 24px;overflow:auto;overscroll-behavior:contain;height:100%;font-size:13px;line-height:1.65;background:transparent;box-sizing:border-box}.source__panel code{font-family:"SF Mono",Monaco,Menlo,Consolas,monospace;tab-size:2}.hljs-keyword,.hljs-selector-tag,.hljs-built_in,.hljs-type{color:#c792ea}.hljs-tag{color:#89ddff}.hljs-tag .hljs-name{color:#f07178}.hljs-string,.hljs-attr{color:#c3e88d}.hljs-number,.hljs-literal{color:#f78c6c}.hljs-comment{color:#546e7a;font-style:italic}.hljs-function .hljs-title,.hljs-title.function_{color:#82aaff}.hljs-variable,.hljs-template-variable{color:#eeffff}.hljs-params{color:#c8cedc}.hljs-property{color:#80cbc4}.hljs-punctuation{color:#89ddff}.hljs-meta{color:#ffcb6b}.hljs-selector-class{color:#ffcb6b}.hljs-selector-id{color:#82aaff}.hljs-attribute{color:#c792ea}.hljs-regexp{color:#89ddff}.hljs-addition{color:#c3e88d}.hljs-deletion{color:#ff5370}[data-theme-mode="light"] .hljs-keyword,[data-theme-mode="light"] .hljs-selector-tag,[data-theme-mode="light"] .hljs-built_in,[data-theme-mode="light"] .hljs-type{color:#7c3aed}[data-theme-mode="light"] .hljs-tag{color:#6366f1}[data-theme-mode="light"] .hljs-tag .hljs-name{color:#dc2626}[data-theme-mode="light"] .hljs-string,[data-theme-mode="light"] .hljs-attr{color:#16a34a}[data-theme-mode="light"] .hljs-number,[data-theme-mode="light"] .hljs-literal{color:#ea580c}[data-theme-mode="light"] .hljs-comment{color:#94a3b8}[data-theme-mode="light"] .hljs-function .hljs-title,[data-theme-mode="light"] .hljs-title.function_{color:#2563eb}[data-theme-mode="light"] .hljs-variable,[data-theme-mode="light"] .hljs-template-variable{color:#1e293b}[data-theme-mode="light"] .hljs-params{color:#475569}[data-theme-mode="light"] .hljs-property{color:#0d9488}[data-theme-mode="light"] .hljs-punctuation{color:#6366f1}[data-theme-mode="light"] .hljs-meta{color:#d97706}[data-theme-mode="light"] .hljs-selector-class{color:#d97706}[data-theme-mode="light"] .hljs-selector-id{color:#2563eb}[data-theme-mode="light"] .hljs-attribute{color:#7c3aed}[data-theme-mode="light"] .hljs-regexp{color:#6366f1}[data-theme-mode="light"] .hljs-addition{color:#16a34a}[data-theme-mode="light"] .hljs-deletion{color:#dc2626}.example-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 16px;margin-top:8px;border-radius:var(--examples-radius);background:var(--bg-card);border:1px solid var(--border);font-family:monospace,"Courier New",Courier;font-size:0.8em;font-variant-numeric:tabular-nums;color:var(--text-muted);white-space:nowrap;overflow-x:auto}.example-footer__left,.example-footer__right{display:flex;align-items:center;gap:20px}.example-footer__left{flex-shrink:0}.example-footer__right{color:var(--text-dim)}.example-footer__stat{display:inline-flex;align-items:baseline;gap:3px}.example-footer__stat strong{color:var(--text);font-weight:600}.example-footer__unit{color:var(--text-dim);margin-left:1px}.panel-slider{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:2px;background:var(--border,#e5e7eb);outline:none;cursor:pointer}.panel-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:var(--accent,#3b82f6);border:2px solid var(--bg,#fff);box-shadow:0 1px 3px rgba(0,0,0,0.2);cursor:pointer;transition:transform 0.1s ease}.panel-slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.panel-slider::-webkit-slider-thumb:active{transform:scale(1.05)}.panel-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--accent,#3b82f6);border:2px solid var(--bg,#fff);box-shadow:0 1px 3px rgba(0,0,0,0.2);cursor:pointer;transition:transform 0.1s ease}.panel-slider::-moz-range-thumb:hover{transform:scale(1.15)}.panel-slider::-moz-range-track{height:4px;border-radius:2px;background:var(--border,#e5e7eb)}.icon{display:inline-block;width:14px;height:14px;background-color:currentColor;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;vertical-align:-2px;flex-shrink:0}.icon--up{-webkit-mask-image:url("/examples/icons/up.svg");mask-image:url("/examples/icons/up.svg")}.icon--down{-webkit-mask-image:url("/examples/icons/down.svg");mask-image:url("/examples/icons/down.svg")}.icon--center{-webkit-mask-image:url("/examples/icons/center.svg");mask-image:url("/examples/icons/center.svg")}.icon--add{-webkit-mask-image:url("/examples/icons/add.svg");mask-image:url("/examples/icons/add.svg")}.icon--remove{-webkit-mask-image:url("/examples/icons/remove.svg");mask-image:url("/examples/icons/remove.svg")}.icon--trash{-webkit-mask-image:url("/examples/icons/trash.svg");mask-image:url("/examples/icons/trash.svg")}.icon--shuffle{-webkit-mask-image:url("/examples/icons/shuffle.svg");mask-image:url("/examples/icons/shuffle.svg")}.icon--back{-webkit-mask-image:url("/examples/icons/back.svg");mask-image:url("/examples/icons/back.svg")}.icon--forward{-webkit-mask-image:url("/examples/icons/forward.svg");mask-image:url("/examples/icons/forward.svg")}.icon--search{-webkit-mask-image:url("/examples/icons/search.svg");mask-image:url("/examples/icons/search.svg")}.icon--sort{-webkit-mask-image:url("/examples/icons/sort.svg");mask-image:url("/examples/icons/sort.svg")}.icon--filter{-webkit-mask-image:url("/examples/icons/filter.svg");mask-image:url("/examples/icons/filter.svg")}.icon--send{-webkit-mask-image:url("/examples/icons/send.svg");mask-image:url("/examples/icons/send.svg")}.icon--settings{-webkit-mask-image:url("/examples/icons/settings.svg");mask-image:url("/examples/icons/settings.svg")}@media (min-width:1200px){.container{max-width:1200px}}@media (max-width:900px){.container{padding:32px 28px 60px}.container h1{font-size:28px}.container .description{font-size:15px}}@media (max-width:720px){.container{padding:24px 20px 60px}.container h1{font-size:24px}.container .description{font-size:14px}.stats{gap:16px;font-size:13px;padding:10px 16px}.example-footer{font-size:12px;gap:12px;padding:6px 12px}.example-footer__left,.example-footer__right{gap:14px}.controls{flex-direction:column}.source__header{gap:12px;padding:0 12px}.source__tab{padding:8px 12px;font-size:12px}.source__panel pre{font-size:13px;padding:16px}}@media (max-width:820px){.split-layout{flex-direction:column}.split-panel{width:100%}.example-footer{flex-wrap:wrap}}