.search-demo { background: linear-gradient(135deg, #ecf5ef, #f8faf5); overflow: hidden; }
.search-demo__layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.search-demo__intro h2 { max-width: 17ch; }
.search-demo__intro > p:not(.eyebrow) { max-width: 56ch; }
.search-demo__volume { display: inline-flex; max-width: 100%; white-space: normal; padding: 7px 14px; border-radius: 999px; color: #07533f; background: #deefd5; font-weight: 800; font-size: .88rem; }
.search-demo__toggle { display: inline-flex; align-items: center; border: 1px solid #afcdbb; border-radius: 10px; background: #fff; color: #064b3b; padding: 9px 14px; font: inherit; font-weight: 700; cursor: pointer; }
.search-demo__toggle::before { content: 'Ⅱ'; display: inline-grid; place-items: center; width: 20px; margin-right: 6px; }
.search-demo__toggle[aria-pressed="true"]::before { content: '▶'; font-size: .8rem; }
.search-demo__toggle:focus-visible { outline: 3px solid #3a95bc; outline-offset: 3px; }
.search-demo__disclaimer { color: #53645e; font-size: .78rem; line-height: 1.45; margin-top: 14px; }
.search-demo__window { min-width: 0; overflow: hidden; border: 1px solid #cbdcd3; border-radius: 19px; background: #fff; box-shadow: 0 22px 58px rgba(11, 57, 46, .13); font: .94rem/1.4 system-ui, sans-serif; }
.search-demo__bar { display: flex; align-items: center; gap: 12px; min-height: 47px; padding: 8px 16px; color: #fff; background: #0a3440; }
.search-demo__bar b { white-space: nowrap; }
.search-demo__bar > span:last-child { margin-left: auto; color: #c7efd4; font-size: .75rem; text-align: right; }
.search-demo__lights { display: flex; gap: 4px; }
.search-demo__lights i { width: 7px; height: 7px; border-radius: 50%; background: #a7c1bc; }
.search-demo__filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 17px; background: #f8fbf7; }
.search-demo__filters > span { min-width: 0; border: 1px solid #d5e5d9; border-radius: 9px; padding: 9px 10px; background: #fff; }
.search-demo__filters small { display: block; margin-bottom: 2px; color: #60706c; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; }
.search-demo__filters b { display: block; color: #153f38; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .84rem; }
.search-demo__progress { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: #0b5848; font-size: .77rem; font-weight: 700; }
.search-demo__meter { display: block; flex: 1; height: 7px; overflow: hidden; border-radius: 99px; background: #dcece1; }
.search-demo__meter i { display: block; width: 13%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #209272, #a8da65); transition: width .55s ease; }
.search-demo__window[data-phase="results"] .search-demo__meter i { width: 72%; }
.search-demo__window[data-phase="file"] .search-demo__meter i { width: 100%; }
.search-demo__results { margin: 0 17px; border: 1px solid #dce8e1; border-radius: 10px; background: #fff; transition: opacity .3s ease, transform .3s ease; }
.search-demo__window[data-phase="search"] .search-demo__results { opacity: .3; transform: translateY(4px); }
.search-demo__result-title { display: block; padding: 8px 12px; color: #546960; background: #eff6f0; font-size: .73rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; }
.search-demo__result { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid #e5eee8; color: #0e5746; }
.search-demo__result b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .85rem; }
.search-demo__file { display: flex; gap: 10px; align-items: center; margin: 13px 17px 17px; padding: 9px 12px; border-radius: 9px; color: #0d5747; background: #e9f4e9; opacity: .5; transition: opacity .3s ease; }
.search-demo__file small { margin-left: auto; font-size: .74rem; }
.search-demo__window[data-phase="file"] .search-demo__file { opacity: 1; }
@media (max-width: 850px) { .search-demo__layout { grid-template-columns: 1fr; } .search-demo__intro h2 { max-width: 24ch; } }
@media (max-width: 550px) { .search-demo__filters { grid-template-columns: 1fr 1fr; padding: 11px; } .search-demo__filters > span:last-child { grid-column: 1 / -1; } .search-demo__window { font-size: .82rem; } .search-demo__bar { padding-inline: 11px; flex-wrap: wrap; } .search-demo__bar > span:last-child { flex-basis: 100%; margin-left: 0; text-align: left; } .search-demo__results { margin-inline: 11px; } .search-demo__result b { overflow: visible; text-overflow: clip; white-space: normal; overflow-wrap: anywhere; } .search-demo__file { margin-inline: 11px; } .search-demo__file small { display: none; } }
@media (prefers-reduced-motion: reduce) { .search-demo__meter i, .search-demo__results, .search-demo__file { transition: none; } }