.demo-container[data-v-8b09d4e6]{max-width:1200px;margin:0 auto;padding:20px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.6;color:#333}.demo-header[data-v-8b09d4e6]{text-align:center;margin-bottom:40px;padding-bottom:20px;border-bottom:2px solid #eaeaea}.demo-header h1[data-v-8b09d4e6]{color:#2c3e50;margin-bottom:10px;font-size:2.5rem}.demo-header p[data-v-8b09d4e6]{color:#7f8c8d;font-size:1.2rem}.demo-section[data-v-8b09d4e6]{margin-bottom:50px;padding:30px;background:#f8f9fa;border-radius:12px;box-shadow:0 2px 10px #0000001a}.demo-section h2[data-v-8b09d4e6]{color:#34495e;margin-bottom:25px;font-size:1.8rem;border-left:4px solid #3498db;padding-left:15px}.demo-grid[data-v-8b09d4e6]{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:25px}.demo-item[data-v-8b09d4e6]{background:white;padding:20px;border-radius:8px;box-shadow:0 1px 5px #0000001a;transition:transform .2s ease,box-shadow .2s ease}.demo-item[data-v-8b09d4e6]:hover{transform:translateY(-2px);box-shadow:0 4px 15px #00000026}.demo-item h3[data-v-8b09d4e6]{color:#2c3e50;margin-bottom:15px;font-size:1.1rem;font-weight:600}.demo-box[data-v-8b09d4e6]{padding:15px;background:#ecf0f1;border:1px solid #bdc3c7;border-radius:6px;font-size:14px;line-height:1.5;min-height:40px;display:flex;align-items:center}.demo-box.multi-line[data-v-8b09d4e6]{min-height:60px;height:60px}.expand-btn[data-v-8b09d4e6],.collapse-btn[data-v-8b09d4e6]{margin-left:8px;padding:4px 8px;border:1px solid #3498db;background:#3498db;color:#fff;border-radius:4px;cursor:pointer;font-size:12px;transition:background-color .2s ease}.expand-btn[data-v-8b09d4e6]:hover,.collapse-btn[data-v-8b09d4e6]:hover{background:#2980b9}.responsive-test[data-v-8b09d4e6]{background:white;padding:25px;border-radius:8px}.width-control[data-v-8b09d4e6]{margin-bottom:20px}.width-control label[data-v-8b09d4e6]{display:block;margin-bottom:10px;font-weight:600;color:#2c3e50}.slider[data-v-8b09d4e6]{width:100%;height:6px;border-radius:3px;background:#ddd;outline:none;opacity:.7;transition:opacity .2s}.slider[data-v-8b09d4e6]:hover{opacity:1}.responsive-box[data-v-8b09d4e6]{padding:20px;background:#ecf0f1;border:1px solid #bdc3c7;border-radius:6px;font-size:14px;line-height:1.5;min-height:60px;transition:width .3s ease}.performance-test[data-v-8b09d4e6]{background:white;padding:25px;border-radius:8px}.test-btn[data-v-8b09d4e6]{padding:8px 16px;margin-right:10px;border:1px solid #27ae60;background:#27ae60;color:#fff;border-radius:4px;cursor:pointer;font-size:14px;transition:background-color .2s ease}.test-btn[data-v-8b09d4e6]:hover{background:#219a52}.item-count[data-v-8b09d4e6]{margin-left:15px;font-weight:600;color:#2c3e50}.items-container[data-v-8b09d4e6]{margin-top:20px;max-height:300px;overflow-y:auto;border:1px solid #ddd;border-radius:6px;padding:10px}.performance-item[data-v-8b09d4e6]{padding:10px;margin-bottom:8px;background:#f8f9fa;border-radius:4px;border-left:3px solid #3498db;font-size:13px}.performance-item[data-v-8b09d4e6]:last-child{margin-bottom:0}@media (max-width: 768px){.demo-container[data-v-8b09d4e6]{padding:10px}.demo-section[data-v-8b09d4e6]{padding:20px}.demo-grid[data-v-8b09d4e6]{grid-template-columns:1fr}.demo-header h1[data-v-8b09d4e6]{font-size:2rem}}