.demo-section{padding-top:60px}.retrieval-demo{border:1px solid #dce4ec;border-radius:12px;padding:24px;background:linear-gradient(180deg,#f7fafd 0,#fff 230px);--demo-blue:#3678ad}.demo-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.demo-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#668099}.demo-controls{display:flex;gap:8px}.demo-controls button{font-size:12px;border:1px solid #ccd9e4;border-radius:6px;background:#fff;color:#496176;padding:7px 12px;cursor:pointer}#demo-play{color:#fff;background:#345986;border-color:#345986;min-width:133px}.demo-controls button:hover{box-shadow:0 2px 7px #3459861a}.demo-query-picker{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin:16px 0 12px}.demo-query-picker button{border:1px solid #d5dfe8;border-radius:20px;background:#fff;color:#5b6e7c;padding:7px 14px;font-size:12px;cursor:pointer;transition:background .2s,color .2s}.demo-query-picker button[aria-pressed=true]{color:#fff;background:#3678ad;border-color:#3678ad}.demo-query{min-height:52px;text-align:center;margin:0 0 12px}.demo-query>span{display:block;font-size:9px;letter-spacing:.12em;color:#7e8a94;margin-bottom:4px}.demo-query q{font-size:20px;color:#344e65;font-weight:500;line-height:1.5}.demo-stages{display:flex;justify-content:center;gap:8px;margin:0 auto 16px}.demo-stages button{font-size:12px;display:flex;align-items:center;gap:6px;border:0;background:transparent;color:#81909c;padding:5px 8px;cursor:pointer}.demo-stages button>span{display:grid;place-items:center;width:21px;height:21px;border:1px solid #d7e0e7;border-radius:50%;font-size:10px}.demo-stages button[aria-pressed=true]{color:#345986;font-weight:600}.demo-stages button[aria-pressed=true]>span{background:#345986;border-color:#345986;color:white}.demo-stages button.is-complete>span{background:#e7f0f7;border-color:#ccdfea;color:#345986}.demo-progress{height:2px;background:#e8eef3;overflow:hidden;margin-bottom:23px}.demo-progress>span{display:block;height:100%;width:0;background:#5c8fb8}.demo-videos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.demo-video{min-width:0;position:relative;border:1px solid transparent;border-radius:7px;padding:9px;transition:border-color .3s,background .3s,box-shadow .3s}.demo-video.is-selected{border-color:#7aa7c9;background:#f4f9fd;box-shadow:0 0 0 2px #dceaf540}.demo-video-heading{display:flex;align-items:center;justify-content:space-between;gap:4px;margin-bottom:11px;min-height:18px}.demo-video h3{font-size:12px;letter-spacing:.02em;font-weight:600;color:#637583}.demo-match{visibility:hidden;color:#3a779f;font-size:9px;white-space:nowrap}.is-selected .demo-match{visibility:visible}.demo-player{position:relative;background:#edf1f4;border-radius:5px;overflow:hidden;aspect-ratio:16/9}.demo-player video{width:100%;height:100%;display:block;object-fit:cover}.demo-media-error{position:absolute;inset:0;padding:16px;background:#edf1f4;color:#576b7c;font-size:12px;text-align:center}.demo-filmstrip{position:relative;margin-top:12px;height:auto;aspect-ratio:960/90;border-radius:2px;overflow:hidden;background:#e6eaf0}.demo-filmstrip img{height:100%;width:100%;object-fit:cover}.demo-interval{position:absolute;top:0;bottom:0;border:2px solid #3b8cc8;background:#5baff52b;left:var(--interval-left);width:var(--interval-width);opacity:0;transition:opacity .4s}.demo-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 2px #000;left:0}.demo-axis{display:flex;justify-content:space-between;font-size:9px;color:#8b979f;margin-top:3px}.demo-graph{width:100%;height:auto;display:block;margin-top:6px;overflow:visible}.demo-graph text{font-family:inherit;fill:#798995;font-size:10px}.demo-graph rect{transition:fill .5s,fill-opacity .5s,stroke .5s}.demo-graph .graph-edge{stroke:#6597bd;stroke-width:1;fill:none;opacity:0;transition:opacity .6s}.demo-graph .graph-pulse{fill:#397eae;opacity:0}.retrieval-demo[data-stage="1"].is-playing .graph-pulse{opacity:.7}.demo-consensus{margin:6px 0 3px;opacity:.25;transition:opacity .4s}.demo-consensus>span{display:block;font-size:9px;color:#7b8d9b;letter-spacing:.02em}.demo-consensus svg{display:block;width:100%;height:48px}.consensus-line{fill:none;stroke:#377db1;stroke-width:1.7;stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.2s ease}.consensus-fill{fill:#e5f0f9;opacity:0;transition:opacity .6s}.demo-explanation{font-size:14px;text-align:center;color:#4c657a;min-height:48px;display:flex;align-items:center;justify-content:center;margin:16px 0 0;padding:15px 10px 0;border-top:1px solid #e5ebf0}.demo-note{font-size:10px;color:#85919b;text-align:center;margin:11px 0 0;line-height:1.7}.retrieval-demo[data-stage="2"] .demo-consensus,.retrieval-demo[data-stage="3"] .demo-consensus{opacity:1}.retrieval-demo[data-stage="2"] .consensus-line,.retrieval-demo[data-stage="3"] .consensus-line{stroke-dashoffset:0}.retrieval-demo[data-stage="2"] .consensus-fill,.retrieval-demo[data-stage="3"] .consensus-fill{opacity:1}.retrieval-demo[data-stage="2"] .demo-interval,.retrieval-demo[data-stage="3"] .demo-interval{opacity:1}.demo-credits{font-size:11px;color:#7b8791;margin-top:13px}.demo-credits summary{cursor:pointer;width:fit-content}.demo-credits p{margin:9px 0 0;max-width:870px;line-height:1.8}.demo-credits a{color:#587e9c}.demo-section button:focus-visible{outline:3px solid #77acd2;outline-offset:3px}
@media(max-width:850px){.retrieval-demo{padding:18px 12px}.demo-videos{gap:6px}.demo-video{padding:5px}.demo-match{font-size:8px}.demo-query q{font-size:18px}.demo-stages{gap:0}.demo-stages button{font-size:11px;padding-inline:6px}.demo-explanation{font-size:13px}.demo-video-heading{flex-wrap:wrap;min-height:37px;gap:1px}.demo-match{width:100%}}
@media(max-width:580px){.demo-section{padding-top:42px}.retrieval-demo{padding:18px 14px}.demo-toolbar{gap:9px;align-items:flex-start}.demo-label{font-size:9px;padding-top:9px}.demo-controls{gap:5px}.demo-controls button{font-size:10px;padding:7px 9px}#demo-play{min-width:111px}.demo-query-picker{gap:6px;margin-top:23px}.demo-query-picker button{font-size:10px;padding:6px 10px}.demo-query{min-height:75px;margin-bottom:10px}.demo-query q{font-size:17px}.demo-stages{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 9px;margin-bottom:14px}.demo-stages button{justify-content:flex-start;font-size:11px}.demo-videos{grid-template-columns:1fr;gap:15px}.demo-video{padding:10px}.demo-video-heading{flex-wrap:nowrap;min-height:18px;margin-bottom:9px}.demo-match{width:auto;font-size:10px}.demo-video h3{font-size:13px}.demo-graph{max-height:130px}.demo-consensus svg{height:48px}.demo-note{text-align:left;font-size:10px}.demo-explanation{font-size:13px;min-height:68px}.demo-query-picker button:focus-visible{outline-offset:2px}}
@media(prefers-reduced-motion:reduce){.retrieval-demo *{transition:none!important}.graph-pulse{display:none}}