.search-demo-container{width:100%;max-width:600px;margin:2rem auto;perspective:1000px;overflow:hidden;height:220px;border-radius:12px;mask-image:linear-gradient(to bottom,black 80%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,black 80%,transparent 100%)}.demo-window{background:#fff;border-radius:12px;box-shadow:0 20px 50px -12px #00000026;border:1px solid rgba(0,0,0,.05);overflow:hidden;transform-origin:center 40px;transition:transform .1s linear}.demo-window.transition-zoom{transition:transform .8s cubic-bezier(.4,0,.2,1)}.demo-window.zoomed-out{transform:scale(1) translate(0)!important}.demo-window.zoomed-out:hover{transform:scale(1.02)!important}.demo-header{background:#f8f9fa;padding:12px 16px;border-bottom:1px solid #e9ecef;display:flex;align-items:center}.window-dots{display:flex;gap:6px}.dot{width:10px;height:10px;border-radius:50%}.dot.red{background:#ff5f56}.dot.yellow{background:#ffbd2e}.dot.green{background:#27c93f}.demo-body{padding:20px;min-height:300px;background:#fff;display:flex;flex-direction:column;gap:20px}.demo-search-bar{background:#f1f3f5;border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:12px;color:#495057}.demo-search-icon{color:#adb5bd}.demo-input-text{font-family:monospace;font-size:14px;color:#212529}.cursor{animation:blink 1s step-end infinite;color:#228be6;margin-left:1px}@keyframes blink{0%,to{opacity:1}50%{opacity:0}}.demo-content-area{flex:1;position:relative;display:flex;flex-direction:column}.demo-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:#868e96;gap:8px;font-size:14px;margin-top:40px}.demo-results-list{display:flex;flex-direction:column;gap:12px;padding-bottom:20px}.demo-results-list.scrolling{animation:scrollResults 3s ease-in-out infinite alternate}@keyframes scrollResults{0%{transform:translateY(0)}20%{transform:translateY(0)}to{transform:translateY(-30%)}}.demo-result-card{background:#fff;border:1px solid #e9ecef;border-radius:8px;padding:12px;box-shadow:0 2px 4px #00000005;display:flex;flex-direction:column;gap:6px}.demo-card-title{font-weight:600;font-size:15px;color:#228be6}.demo-card-meta{display:flex;gap:12px;font-size:12px;color:#868e96}.demo-card-meta span{display:flex;align-items:center;gap:4px}.fade-in{animation:fadeIn .4s ease-out forwards;opacity:0;transform:translateY(10px)}@keyframes fadeIn{to{opacity:1;transform:translateY(0)}}.demo-placeholder-text{text-align:center;color:#dee2e6;font-size:24px;font-weight:700;margin-top:60px;-webkit-user-select:none;user-select:none}