.interactive-controls-example[data-v-4c69c490]{width:100%}.layout[data-v-4c69c490]{display:grid;grid-template-columns:350px 1fr;gap:30px}.controls-panel[data-v-4c69c490]{background:#f8f9fa;padding:20px;border-radius:8px;height:fit-content;position:sticky;top:20px}.controls-panel h3[data-v-4c69c490]{margin:0 0 20px;font-size:18px;color:#333}.control-section[data-v-4c69c490]{margin-bottom:25px;padding-bottom:20px;border-bottom:1px solid #dee2e6}.control-section[data-v-4c69c490]:last-of-type{border-bottom:none}.control-section h4[data-v-4c69c490]{margin:0 0 15px;font-size:14px;color:#666;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.checkbox-control[data-v-4c69c490]{display:flex;align-items:center;margin-bottom:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.checkbox-control input[type=checkbox][data-v-4c69c490]{margin-right:8px;cursor:pointer}.checkbox-control span[data-v-4c69c490]{font-family:Monaco,Courier New,monospace;font-size:13px;color:#333}.slider-control[data-v-4c69c490]{margin-bottom:15px}.slider-control label[data-v-4c69c490]{display:block;font-family:Monaco,Courier New,monospace;font-size:13px;margin-bottom:5px;color:#333}.slider-control input[type=range][data-v-4c69c490]{width:100%;margin-bottom:5px}.slider-control .hint[data-v-4c69c490]{display:block;font-size:11px;color:#666;font-style:italic}.number-control[data-v-4c69c490]{margin-bottom:15px}.number-control label[data-v-4c69c490]{font-family:Monaco,Courier New,monospace;font-size:13px;color:#333}.number-control input[type=number][data-v-4c69c490]{width:60px;padding:4px 8px;border:1px solid #ccc;border-radius:4px;font-size:13px}.number-control .hint[data-v-4c69c490]{display:block;font-size:11px;color:#666;font-style:italic;margin-top:5px}.text-control[data-v-4c69c490]{margin-bottom:15px}.text-control label[data-v-4c69c490]{display:block;font-family:Monaco,Courier New,monospace;font-size:13px;margin-bottom:5px;color:#333}.text-control input[type=text][data-v-4c69c490]{width:100%;padding:6px 10px;border:1px solid #ccc;border-radius:4px;font-size:13px}.reset-button[data-v-4c69c490]{width:100%;padding:10px;background:#06c;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.reset-button[data-v-4c69c490]:hover{background:#0052a3}.gallery-preview h3[data-v-4c69c490]{margin:0 0 15px;font-size:18px;color:#333}.thumbnail-list[data-v-4c69c490]{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.thumbnail-list li[data-v-4c69c490]{aspect-ratio:4/3;overflow:hidden;border-radius:4px}.thumbnail-list img[data-v-4c69c490]{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}.thumbnail-list img[data-v-4c69c490]:hover{transform:scale(1.05)}@media(max-width:1024px){.layout[data-v-4c69c490]{grid-template-columns:1fr}.controls-panel[data-v-4c69c490]{position:static}}@media(max-width:768px){.thumbnail-list[data-v-4c69c490]{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.event-monitor-example[data-v-f990a832]{width:100%}.layout[data-v-f990a832]{display:grid;grid-template-columns:1fr 400px;gap:30px}.gallery-section h3[data-v-f990a832]{margin:0 0 10px;font-size:18px;color:#333}.instructions[data-v-f990a832]{margin:0 0 20px;color:#666;font-size:14px}.thumbnail-list[data-v-f990a832]{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.thumbnail-list li[data-v-f990a832]{aspect-ratio:4/3;overflow:hidden;border-radius:4px}.thumbnail-list img[data-v-f990a832]{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}.thumbnail-list img[data-v-f990a832]:hover{transform:scale(1.05)}.event-log-section[data-v-f990a832]{background:#f8f9fa;border-radius:8px;overflow:hidden;height:fit-content;max-height:800px;display:flex;flex-direction:column}.event-log-header[data-v-f990a832]{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:2px solid #dee2e6;background:#fff}.event-log-header h3[data-v-f990a832]{margin:0;font-size:18px;color:#333}.clear-button[data-v-f990a832]{padding:6px 12px;background:#dc3545;color:#fff;border:none;border-radius:4px;font-size:12px;font-weight:500;cursor:pointer;transition:background .2s}.clear-button[data-v-f990a832]:hover{background:#c82333}.event-explanation[data-v-f990a832]{padding:15px 20px;background:#fff3cd;border-bottom:1px solid #ffeaa7}.event-explanation p[data-v-f990a832]{margin:0 0 10px;font-size:13px;font-weight:600;color:#856404}.event-explanation ul[data-v-f990a832]{margin:0;padding-left:20px;font-size:12px;color:#856404}.event-explanation li[data-v-f990a832]{margin-bottom:4px}.event-explanation code[data-v-f990a832]{background:#fff;padding:2px 4px;border-radius:3px;font-family:Monaco,Courier New,monospace;font-size:11px}.event-list[data-v-f990a832]{padding:15px;overflow-y:auto;flex:1}.no-events[data-v-f990a832]{text-align:center;padding:40px 20px;color:#999;font-style:italic}.event-item[data-v-f990a832]{background:#fff;padding:12px 15px;border-radius:6px;margin-bottom:10px;border-left:4px solid;animation:slideIn-f990a832 .3s ease-out}@keyframes slideIn-f990a832{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.event-item.event-opened[data-v-f990a832]{border-left-color:#28a745}.event-item.event-closed[data-v-f990a832]{border-left-color:#dc3545}.event-item.event-changed[data-v-f990a832]{border-left-color:#007bff}.event-item.event-boundary[data-v-f990a832]{border-left-color:#fd7e14}.event-item.event-load[data-v-f990a832]{border-left-color:#6f42c1}.event-badge[data-v-f990a832]{font-family:Monaco,Courier New,monospace;font-size:13px;font-weight:600;margin-bottom:5px;color:#333}.event-details[data-v-f990a832]{display:flex;justify-content:space-between;align-items:center;font-size:12px}.event-time[data-v-f990a832]{color:#999;font-family:Monaco,Courier New,monospace}.event-payload[data-v-f990a832]{color:#666;font-style:italic;background:#f8f9fa;padding:2px 8px;border-radius:3px}@media(max-width:1024px){.layout[data-v-f990a832]{grid-template-columns:1fr}.event-log-section[data-v-f990a832]{max-height:500px}}@media(max-width:768px){.thumbnail-list[data-v-f990a832]{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.slots-example[data-v-d68a69d8]{width:100%}.intro[data-v-d68a69d8]{background:#e7f3ff;padding:15px 20px;border-radius:6px;margin-bottom:30px;border-left:4px solid #0066cc}.intro p[data-v-d68a69d8]{margin:0;color:#004085}.slot-demo[data-v-d68a69d8]{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:25px;margin-bottom:30px}.demo-header[data-v-d68a69d8]{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.demo-header h3[data-v-d68a69d8]{margin:0;font-size:18px;color:#333}.open-button[data-v-d68a69d8]{padding:8px 16px;background:#06c;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:500;cursor:pointer;transition:background .2s}.open-button[data-v-d68a69d8]:hover{background:#0052a3}.demo-description[data-v-d68a69d8]{margin:0 0 15px;color:#666;line-height:1.6}.demo-description code[data-v-d68a69d8]{background:#f8f9fa;padding:2px 6px;border-radius:3px;font-family:Monaco,Courier New,monospace;font-size:13px;color:#e83e8c}.code-snippet[data-v-d68a69d8]{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:15px;overflow-x:auto}.code-snippet pre[data-v-d68a69d8]{margin:0;font-family:Monaco,Courier New,monospace;font-size:13px;line-height:1.5;color:#333}[data-v-d68a69d8] .custom-close{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:16px;letter-spacing:1px;color:#fff;background:linear-gradient(135deg,#667eea,#764ba2);padding:12px 20px;border-radius:8px;box-shadow:0 4px 15px #0003;transition:transform .2s}[data-v-d68a69d8] .custom-close:hover{transform:scale(1.05)}[data-v-d68a69d8] .custom-arrow{font-weight:700;font-size:18px;letter-spacing:2px;color:#fff;background:linear-gradient(135deg,#f093fb,#f5576c);padding:15px 25px;border-radius:50px;box-shadow:0 4px 15px #0003;transition:transform .2s}[data-v-d68a69d8] .custom-arrow:hover{transform:scale(1.1)}[data-v-d68a69d8] .custom-footer{width:100%;display:flex;flex-direction:column;gap:10px}[data-v-d68a69d8] .progress-bar-container{width:100%;height:8px;background:#ffffff4d;border-radius:4px;overflow:hidden}[data-v-d68a69d8] .progress-bar{height:100%;background:linear-gradient(90deg,#4facfe,#00f2fe);border-radius:4px;transition:width .3s ease}[data-v-d68a69d8] .progress-text{font-size:16px;font-weight:600;color:#fff;text-align:center;text-shadow:0 2px 4px rgba(0,0,0,.3)}[data-v-d68a69d8] .rich-caption{text-align:left;max-width:600px;margin:0 auto}[data-v-d68a69d8] .caption-title{margin:0 0 10px;font-size:24px;font-weight:700;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.3)}[data-v-d68a69d8] .caption-meta{margin:5px 0;font-size:14px;color:#ffffffe6;text-shadow:0 1px 2px rgba(0,0,0,.3)}[data-v-d68a69d8] .caption-description{margin:10px 0 0;font-size:15px;line-height:1.5;color:#fffffff2;text-shadow:0 1px 2px rgba(0,0,0,.3)}[data-v-d68a69d8] .custom-play-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(135deg,#fa709a,#fee140);color:#fff;padding:15px 25px;border-radius:50px;font-weight:700;font-size:16px;letter-spacing:1px;box-shadow:0 4px 15px #0000004d;pointer-events:none}@media(max-width:768px){.demo-header[data-v-d68a69d8]{flex-direction:column;align-items:flex-start;gap:10px}.open-button[data-v-d68a69d8]{width:100%}.code-snippet[data-v-d68a69d8]{overflow-x:scroll}}.lazy-loading-example[data-v-83e65939]{width:100%}.intro[data-v-83e65939]{background:#e7f3ff;padding:20px;border-radius:6px;margin-bottom:25px;border-left:4px solid #0066cc}.intro h3[data-v-83e65939]{margin:0 0 10px;font-size:18px;color:#004085}.intro p[data-v-83e65939]{margin:0;color:#004085;line-height:1.6}.intro code[data-v-83e65939]{background:#ffffffb3;padding:2px 6px;border-radius:3px;font-family:Monaco,Courier New,monospace;font-size:13px;color:#06c}.stats[data-v-83e65939]{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;margin-bottom:25px}.stat-item[data-v-83e65939]{background:#f8f9fa;padding:15px 20px;border-radius:6px;border:1px solid #dee2e6}.stat-label[data-v-83e65939]{display:block;font-size:12px;color:#666;margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}.stat-value[data-v-83e65939]{display:block;font-size:20px;font-weight:700;color:#333}.stat-value.loading[data-v-83e65939]{color:#06c;animation:pulse-83e65939 1.5s ease-in-out infinite}@keyframes pulse-83e65939{0%,to{opacity:1}50%{opacity:.5}}.explanation[data-v-83e65939]{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:20px;margin-bottom:25px}.explanation h4[data-v-83e65939]{margin:0 0 15px;font-size:16px;color:#333}.explanation ol[data-v-83e65939]{margin:0 0 20px;padding-left:25px;line-height:1.8;color:#666}.explanation code[data-v-83e65939]{background:#f8f9fa;padding:2px 6px;border-radius:3px;font-family:Monaco,Courier New,monospace;font-size:13px;color:#e83e8c}.code-snippet[data-v-83e65939]{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:15px;overflow-x:auto}.code-snippet pre[data-v-83e65939]{margin:0;font-family:Monaco,Courier New,monospace;font-size:13px;line-height:1.6;color:#333}.gallery-section[data-v-83e65939]{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:20px}.gallery-section h4[data-v-83e65939]{margin:0 0 15px;font-size:16px;color:#333}.thumbnail-list[data-v-83e65939]{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.thumbnail-list li[data-v-83e65939]{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px}.thumbnail-list img[data-v-83e65939]{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}.thumbnail-list img[data-v-83e65939]:hover{transform:scale(1.05)}.item-number[data-v-83e65939]{position:absolute;top:5px;left:5px;background:#000000b3;color:#fff;padding:3px 8px;border-radius:3px;font-size:11px;font-weight:600;pointer-events:none}.loading-indicator[data-v-83e65939]{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;background:#f8f9fa;border-radius:6px;border:2px dashed #dee2e6}.spinner[data-v-83e65939]{width:40px;height:40px;border:4px solid #e9ecef;border-top-color:#06c;border-radius:50%;animation:spin-83e65939 1s linear infinite;margin-bottom:15px}@keyframes spin-83e65939{to{transform:rotate(360deg)}}.loading-indicator p[data-v-83e65939]{margin:0;color:#666;font-weight:500}@media(max-width:768px){.stats[data-v-83e65939]{grid-template-columns:1fr}.thumbnail-list[data-v-83e65939]{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.programmatic-control-example[data-v-95ac7886]{width:100%}.intro[data-v-95ac7886]{background:#e7f3ff;padding:20px;border-radius:6px;margin-bottom:25px;border-left:4px solid #0066cc}.intro h3[data-v-95ac7886]{margin:0 0 10px;font-size:18px;color:#004085}.intro p[data-v-95ac7886]{margin:0;color:#004085;line-height:1.6}.intro code[data-v-95ac7886]{background:#ffffffb3;padding:2px 6px;border-radius:3px;font-family:Monaco,Courier New,monospace;font-size:13px;color:#06c}.control-panels[data-v-95ac7886]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-bottom:30px}.control-panel[data-v-95ac7886]{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:20px}.control-panel h4[data-v-95ac7886]{margin:0 0 10px;font-size:16px;color:#333}.control-panel>p[data-v-95ac7886]{margin:0 0 15px;color:#666;font-size:14px}.button-grid[data-v-95ac7886]{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:15px}.image-button[data-v-95ac7886]{padding:10px;background:#06c;color:#fff;border:none;border-radius:4px;font-size:13px;font-weight:500;cursor:pointer;transition:background .2s}.image-button[data-v-95ac7886]:hover{background:#0052a3}.nav-buttons[data-v-95ac7886]{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.nav-button[data-v-95ac7886]{padding:12px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:left}.nav-button[data-v-95ac7886]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #667eea66}.input-control[data-v-95ac7886]{display:flex;gap:10px;align-items:flex-end;margin-bottom:15px}.input-control label[data-v-95ac7886]{flex:1;display:flex;flex-direction:column;gap:5px;font-size:14px;color:#333}.input-control input[data-v-95ac7886]{padding:8px 12px;border:1px solid #ccc;border-radius:4px;font-size:14px}.go-button[data-v-95ac7886]{padding:8px 20px;background:#28a745;color:#fff;border:none;border-radius:4px;font-size:14px;font-weight:600;cursor:pointer;transition:background .2s}.go-button[data-v-95ac7886]:hover{background:#218838}.event-triggers[data-v-95ac7886]{display:flex;flex-direction:column;gap:10px;margin-bottom:15px}.trigger-button[data-v-95ac7886]{padding:12px 16px;background:linear-gradient(135deg,#f093fb,#f5576c);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s;text-align:left}.trigger-button[data-v-95ac7886]:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f5576c66}.code-snippet[data-v-95ac7886]{background:#f8f9fa;border:1px solid #dee2e6;border-radius:4px;padding:12px;overflow-x:auto}.code-snippet pre[data-v-95ac7886]{margin:0;font-family:Monaco,Courier New,monospace;font-size:12px;line-height:1.5;color:#333}.gallery-section[data-v-95ac7886]{background:#fff;border:1px solid #dee2e6;border-radius:8px;padding:20px}.gallery-section h4[data-v-95ac7886]{margin:0 0 15px;font-size:16px;color:#333}.thumbnail-list[data-v-95ac7886]{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.thumbnail-list li[data-v-95ac7886]{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:4px}.thumbnail-list img[data-v-95ac7886]{width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .2s}.thumbnail-list img[data-v-95ac7886]:hover{transform:scale(1.05)}.item-number[data-v-95ac7886]{position:absolute;top:5px;left:5px;background:#000000b3;color:#fff;padding:3px 8px;border-radius:3px;font-size:11px;font-weight:600;pointer-events:none}@media(max-width:768px){.control-panels[data-v-95ac7886]{grid-template-columns:1fr}.button-grid[data-v-95ac7886]{grid-template-columns:repeat(2,1fr)}.thumbnail-list[data-v-95ac7886]{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}}.advanced-demo[data-v-aae4d5f4]{width:100%}.tabs[data-v-aae4d5f4]{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #e5e5e5;flex-wrap:wrap}.tabs button[data-v-aae4d5f4]{padding:10px 20px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:14px;font-weight:500;color:#666;transition:all .2s;margin-bottom:-2px}.tabs button[data-v-aae4d5f4]:hover{color:#06c;background-color:#f5f5f5}.tabs button.active[data-v-aae4d5f4]{color:#06c;border-bottom-color:#06c}.tab-description[data-v-aae4d5f4]{background:#f8f9fa;padding:15px 20px;border-radius:6px;margin-bottom:30px;border-left:4px solid #0066cc}.tab-description p[data-v-aae4d5f4]{margin:0 0 10px;color:#333}.tab-description p[data-v-aae4d5f4]:last-child{margin-bottom:0}.source-link[data-v-aae4d5f4]{font-size:14px}.source-link a[data-v-aae4d5f4]{color:#06c;font-weight:500}.tab-content[data-v-aae4d5f4]{min-height:400px}@media(max-width:768px){.tabs[data-v-aae4d5f4]{flex-direction:column;border-bottom:none}.tabs button[data-v-aae4d5f4]{border-bottom:none;border-left:3px solid transparent;margin-bottom:0;text-align:left}.tabs button.active[data-v-aae4d5f4]{border-left-color:#06c;border-bottom-color:transparent}}