.mock-search{margin:0;position:relative}
.demo-query{display:flex;align-items:center;flex:1;min-width:0;padding:5px 6px;line-height:1.5;color:var(--ink)}
.demo-caret{height:1.15em;width:1px;background:var(--blue-deep);margin-left:2px;opacity:0}
[data-demo-phase=typing] .demo-caret{animation:demo-caret .7s steps(1) infinite}
.mock-search .search-key{display:grid;place-items:center;margin-left:0;border:1px solid #d7eaf8;width:34px;height:34px;padding:6px;flex-shrink:0;transition:background .2s,color .2s,transform .2s}
.mock-search .search-key .icon{width:17px;height:17px}
[data-demo-phase=searching] .search-key{color:#fff;background:var(--blue-deep);transform:scale(.94)}
.demo-query-hint{font-size:10px;color:var(--muted);margin:10px 0 0;line-height:1.5;min-height:1.5em}
.mock-results{position:relative;min-height:282px}
.mock-results .mock-lot{transition:opacity .25s,transform .25s;min-height:153px}
.mock-results .mock-lot.secondary{min-height:115px}
[data-demo-phase=typing] .mock-lot,[data-demo-phase=searching] .mock-lot{opacity:0;transform:translateY(8px);visibility:hidden}
[data-demo-phase=searching] .mock-results::before{content:'';position:absolute;left:calc(50% - 12px);top:64px;width:24px;height:24px;border:2px solid #d7eaf8;border-top-color:var(--blue-deep);border-radius:50%;animation:demo-spin .65s linear infinite}
[data-demo-phase=results] .mock-lot{animation:demo-results .45s both}
[data-demo-phase=results] .mock-lot.secondary{animation-delay:.14s}
.mock-results h3,.mock-results p,.mock-lot-bottom>span:first-child{overflow-wrap:anywhere}
@keyframes demo-caret{50%{opacity:1}}
@keyframes demo-spin{to{transform:rotate(360deg)}}
@keyframes demo-results{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:560px){.mock-search{gap:8px;padding:8px 10px}.demo-query-hint{font-size:9px}.mock-search .search-key{width:32px;height:32px}}
@media(prefers-reduced-motion:reduce){[data-search-demo] *,[data-search-demo] *::before{animation:none!important;transition:none!important}}