.demo-section{background:#f5f8f3;border-bottom:1px solid var(--line)}
.demo-heading{align-items:center;margin-bottom:30px}
.demo-heading h2{font-size:clamp(32px,3vw,42px)}
.demo-heading .demo-intro{margin-top:16px;max-width:720px;color:var(--muted);font-size:16px;line-height:1.75}
.demo-total{flex-shrink:0;text-align:right;color:#5a7552;font-size:14px;line-height:1.6}
.demo-total strong{display:block;font:650 48px/1.2 var(--display);letter-spacing:-2px;color:#294c31}
.demo-filters{display:flex;gap:18px;align-items:flex-end;padding:22px 0 25px;border-top:1px solid #d7e1d2}
.demo-filters label{display:flex;flex:1;flex-direction:column;gap:8px;font-size:13px;color:#5f735c;font-weight:500;min-width:0}
.demo-filters label:first-child{flex:1.2}
.demo-filters label:nth-child(2){flex:1.4}
.demo-filters select{appearance:auto;min-height:44px;width:100%;font:500 14px var(--sans);color:#294731;background:#fff;border:1px solid #cbd8c7;border-radius:5px;padding:10px 12px;cursor:pointer}
.demo-filters select:focus-visible{outline:3px solid #7e9e5d;outline-offset:3px}
.demo-panel{background:#fff;border:1px solid #cddbc7;border-radius:8px;overflow:hidden;box-shadow:0 7px 25px #12301905}
.demo-panel-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 28px;background:#fff;border-bottom:1px solid #e4ebe0}
.demo-title-line{display:flex;align-items:center;flex-wrap:wrap;gap:13px}
.demo-title-line h3{font-size:23px;margin:0;letter-spacing:-.5px}
.demo-method{padding:3px 8px;font-size:12px;background:#edf3e8;color:#4c6842;border-radius:3px;white-space:nowrap}
.demo-panel-head p{margin:7px 0 0;font-size:14px;color:#667d60;font-variant-numeric:tabular-nums}
.demo-condition{font:500 13px/1.5 var(--sans);color:#667b60;text-align:right}
.demo-screen{background:#fff}
.demo-video{display:block;width:100%;height:auto;aspect-ratio:1200 / 416;object-fit:contain;background:#fff}
.demo-controls{display:flex;align-items:center;gap:16px;background:#f9fbf6;border-top:1px solid #e3eadd;padding:15px 22px;color:#345332}
.demo-controls button{background:transparent;border:1px solid #cddac5;border-radius:4px;min-height:38px;padding:8px 13px;color:#345332;font-weight:500;font-size:13px;cursor:pointer;white-space:nowrap}
.demo-controls button:hover{background:#e9f1e0;border-color:#96b181}
.demo-controls #demo-play{min-width:82px;background:#2d5138;color:#fff;border-color:#2d5138}
.demo-controls #demo-play:hover{background:#416848}
.demo-seek{flex:1;min-width:40px;accent-color:#527a3e;height:24px;cursor:pointer}
.demo-readout{font:12px/1.5 ui-monospace,monospace;font-variant-numeric:tabular-nums;min-width:135px;white-space:nowrap;text-align:center}
.demo-speed{display:flex;align-items:center;gap:7px;font-size:12px;white-space:nowrap}
.demo-speed select{border:0;background:transparent;color:#345332;font:500 13px var(--sans);padding:8px 4px;cursor:pointer}
.demo-panel-foot{padding:18px 27px 20px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #e4ebe0}
.demo-panel-foot p{font-size:13px;color:#6c7e66;margin:4px 0 0}
.demo-panel-foot .demo-sample-label{font-size:13px;font-weight:550;color:#344f30;display:block}
.demo-file-links{display:flex;gap:19px;flex-shrink:0}
.demo-file-links a{font-size:13px;color:#466d37;text-decoration:underline;text-underline-offset:4px}
.demo-notes{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin-top:16px;color:#6e7f68;font-size:12px;line-height:1.7}
.demo-notes p{margin:0;max-width:800px}
.demo-count{flex-shrink:0;font-size:12px;color:#5c7551}
.demo-error{color:#8c451b;background:#fff6ea;margin:0;padding:12px 27px;font-size:14px}
.demo-screen:fullscreen{display:flex;flex-direction:column;justify-content:center;background:#fff}
.demo-screen:fullscreen .demo-video{flex:1;min-height:0;height:0;object-fit:contain}
.demo-screen:fullscreen .demo-controls{flex-shrink:0}
.hero-actions .text-link.demo-hero-link{border-bottom:1px solid #718971;padding-block:8px}
@media(max-width:1050px){.demo-controls{flex-wrap:wrap;gap:12px}.demo-seek{flex-basis:40%}.demo-readout{min-width:125px}.demo-speed{margin-left:auto}.demo-panel-foot{align-items:flex-start;gap:12px}.demo-file-links{gap:12px}}
@media(max-width:720px){.demo-heading{flex-direction:row;align-items:flex-start;gap:18px}.demo-heading h2{font-size:31px}.demo-heading .demo-intro{font-size:15px;margin:13px 0 0}.demo-total{font-size:12px;min-width:68px}.demo-total strong{font-size:36px}.demo-filters{display:grid;grid-template-columns:1fr 1fr;gap:15px 14px}.demo-filters label:nth-child(2){grid-column:1/-1;grid-row:2}.demo-filters #demo-species-field{grid-column:1/-1}.demo-filters select{padding:10px 9px}.demo-panel-head{flex-direction:column;align-items:flex-start;gap:10px;padding:18px}.demo-title-line{gap:8px}.demo-title-line h3{font-size:22px}.demo-method{font-size:12px}.demo-panel-head p{font-size:13px}.demo-condition{text-align:left;font-size:12px}.demo-controls{padding:12px;display:grid;grid-template-columns:auto 1fr auto;gap:10px}.demo-controls #demo-play{grid-row:1;grid-column:1;min-width:74px}.demo-seek{grid-column:2/-1;grid-row:1;width:100%}.demo-readout{grid-row:2;grid-column:1/3;text-align:left;min-width:0;font-size:12px}.demo-speed{grid-column:3;grid-row:2;margin:0}.demo-speed>span{display:none}.demo-controls #demo-fullscreen{grid-column:1/-1;grid-row:3;justify-self:end;border:0;padding:0;min-height:28px;font-size:12px}.demo-panel-foot{flex-direction:column;padding:17px 18px;gap:13px}.demo-file-links{gap:22px}.demo-notes{flex-direction:column;gap:7px}.demo-error{padding:12px 18px}.nav nav>a.demo-nav{display:inline-block;font-size:13px}.nav nav{gap:14px}.nav .nav-paper span{display:none}.demo-total span{display:block}.demo-notes p{font-size:12px}}
@media(max-width:380px){.demo-heading{flex-direction:column;gap:14px}.demo-total{display:flex;align-items:baseline;gap:10px}.demo-total strong{font-size:30px}.demo-title-line h3{font-size:20px}.nav nav{gap:10px}.nav-paper{padding-inline:9px}.nav .wordmark{font-size:17px;gap:6px}}