.streaming-demo{--blue:#285ff0;--cyan:#42d6d0;--navy:#071a35;--ink:#102a4c;--line:#bfd0e8;--car:#4b7cff;--person:#27b878;--motorcycle:#ed9a2f;--airplane:#a879ee;--unknown:#f05f78;min-height:100vh;color:var(--ink);background:#edf3fa;font-family:Arial,Microsoft YaHei,sans-serif}.streaming-demo *{box-sizing:border-box}.streaming-demo button,.streaming-demo input{font:inherit}.streaming-demo__header{z-index:30;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f9fcfff0;border-bottom:1px solid #aec4e0bf;justify-content:space-between;align-items:center;min-height:66px;padding:0 clamp(20px,5vw,76px);display:flex;position:sticky;top:0}.streaming-demo__identity{color:var(--ink);align-items:center;gap:13px;text-decoration:none;display:flex}.streaming-demo__identity>span:last-child{flex-direction:column;gap:3px;display:flex}.streaming-demo__identity strong{letter-spacing:.04em;font-size:17px;font-weight:900}.streaming-demo__identity small{color:#6d83a0;letter-spacing:.12em;font-size:9px}.streaming-demo__mark{align-items:flex-end;gap:3px;width:31px;height:27px;display:flex}.streaming-demo__mark i{background:var(--blue);border-radius:4px;width:5px}.streaming-demo__mark i:first-child{height:9px}.streaming-demo__mark i:nth-child(2){height:20px}.streaming-demo__mark i:nth-child(3){background:var(--cyan);height:14px}.streaming-demo__mark i:nth-child(4){height:25px}.streaming-demo__header-actions{align-items:center;gap:18px;display:flex}.streaming-demo__mode{color:#607692;letter-spacing:.13em;align-items:center;gap:8px;font-size:10px;font-weight:900;display:flex}.streaming-demo__mode i{background:#65c999;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 5px #65c99924}.streaming-demo__language{background:#fff;border:1px solid #b9cce5;border-radius:6px;padding:3px;display:flex}.streaming-demo__language button{color:#6b809a;cursor:pointer;background:0 0;border:0;border-radius:4px;min-width:42px;height:28px;padding:0 8px;font-size:11px;font-weight:900}.streaming-demo__language button.active{background:var(--blue);color:#fff}.streaming-demo__top{background:radial-gradient(circle at 82% 24%,#42d6d033,#0000 26rem),linear-gradient(135deg,#f8fbff,#e7f0ff);grid-template-columns:1fr;align-items:end;gap:60px;padding:38px clamp(20px,5vw,76px) 32px;display:grid}.streaming-demo__top p{color:#58708d;margin:0;font-size:14px;line-height:1.8}.streaming-demo__top>div>p{color:var(--blue);letter-spacing:.16em;margin:0 0 10px;font-size:10px;font-weight:900}.streaming-demo__top h1{letter-spacing:-.05em;margin:0;font-size:clamp(35px,4.5vw,60px);font-weight:900;line-height:1.02}.streaming-demo__top h1 em{color:var(--blue);font-style:normal}.streaming-demo__workspace{padding:20px clamp(20px,5vw,76px) 58px}.streaming-demo__stats{border:1px solid var(--line);border-top:3px solid var(--blue);background:#fff;grid-template-columns:1.15fr repeat(3,.72fr) 1.3fr;display:grid;box-shadow:0 14px 38px #183d7014}.streaming-demo__stats>div{border-right:1px solid #d8e3f1;gap:5px;min-height:72px;padding:14px 18px;display:grid}.streaming-demo__stats>div:last-child{border-right:0}.streaming-demo__stats small{color:#74879f;font-size:10px}.streaming-demo__stats strong{font-size:20px}.streaming-demo__stats strong em{color:#8798ac;font-size:11px;font-style:normal}.streaming-demo__live-state strong{align-items:center;gap:9px;font-size:14px;display:flex}.streaming-demo__live-state strong i{background:#65c999;border-radius:50%;width:9px;height:9px;box-shadow:0 0 0 5px #65c99921}.streaming-demo__live-state.analyzing strong i{background:#f0b54c}.streaming-demo__live-state.detected strong i{background:#ff775d}.streaming-demo__controls{border:1px solid var(--line);background:#fff;border-radius:8px;grid-template-columns:auto minmax(260px,1fr) auto auto;align-items:center;gap:18px;margin-top:14px;padding:12px 14px;display:grid}.streaming-demo__transport,.streaming-demo__speed{gap:5px;display:flex}.streaming-demo__controls button{color:#4d6482;cursor:pointer;background:#fff;border:1px solid #b9cce5;border-radius:5px;min-height:35px;padding:0 12px;font-size:11px;font-weight:900}.streaming-demo__controls button:hover,.streaming-demo__controls button.active{border-color:var(--blue);color:var(--blue);background:#edf3ff}.streaming-demo__controls button.primary{border-color:var(--blue);background:var(--blue);color:#fff}.streaming-demo__controls button:disabled{cursor:not-allowed;opacity:.45}.streaming-demo__range{grid-template-columns:48px 1fr 48px;align-items:center;gap:10px;display:grid}.streaming-demo__range b{font-size:12px}.streaming-demo__range small{color:#7589a2;text-align:right;font-size:10px}.streaming-demo__range input{width:100%;accent-color:var(--blue)}.streaming-demo__principle{grid-template-columns:repeat(6,1fr);gap:7px;margin:14px 0;display:grid}.streaming-demo__principle>div{min-height:50px;color:var(--ink);background:#f8fbff;border:1px solid #cad8ea;border-radius:6px;align-items:center;gap:9px;padding:9px 12px;display:flex;position:relative}.streaming-demo__principle span{color:var(--blue);font-size:9px;font-weight:900}.streaming-demo__principle b{font-size:11px}.streaming-demo__principle i{z-index:2;color:#9eb1c8;font-style:normal;position:absolute;right:-12px}.streaming-demo__error{color:#a83e30;background:#fff1ef;border:1px solid #edb2aa;margin-bottom:14px;padding:12px;font-size:12px}.streaming-demo__analysis{grid-template-columns:minmax(0,1fr) 300px;gap:14px;display:grid}.streaming-demo__main-column,.streaming-demo__side{align-content:start;gap:14px;display:grid}.streaming-demo__panel,.streaming-demo__model-tracks,.streaming-demo__status-card,.streaming-demo__count-card,.streaming-demo__recent{border:1px solid var(--line);background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 7px 22px #1b3e6b0d}.streaming-demo__panel>header,.streaming-demo__model-tracks>header,.streaming-demo__count-card>header,.streaming-demo__recent>header{background:#fbfdff;border-bottom:1px solid #d9e5f2;justify-content:space-between;align-items:center;min-height:56px;padding:10px 14px;display:flex}.streaming-demo__panel>header>div{align-items:center;gap:11px;display:flex}.streaming-demo__panel>header>div>span{width:27px;height:27px;color:var(--blue);background:#e9f0ff;border-radius:50%;place-items:center;font-size:9px;font-weight:900;display:grid}.streaming-demo h2{margin:0;font-size:14px}.streaming-demo header small{color:#7589a2;margin-top:3px;font-size:9px;display:block}.streaming-demo__panel>header>b{color:#8094ad;letter-spacing:.12em;font-size:9px}.streaming-demo__plot{background-color:var(--navy);background-image:linear-gradient(#7eb3e81c 1px,#0000 1px),linear-gradient(90deg,#7eb3e81c 1px,#0000 1px);background-size:100% 25%,10% 100%;position:relative;overflow:hidden}.streaming-demo__plot.waveform{height:190px}.streaming-demo__plot.spectrum{background-color:#06162e;height:260px}.streaming-demo__plot svg{z-index:1;width:100%;height:100%;position:absolute;inset:0}.streaming-demo__plot svg .zero{stroke:#afd1f247;stroke-width:.2px;vector-effect:non-scaling-stroke}.streaming-demo__plot svg path{fill:none;stroke:#edf6ff;stroke-width:1.05px;vector-effect:non-scaling-stroke}.streaming-demo__loading{color:#dcecff;place-items:center;font-size:12px;display:grid;position:absolute;inset:0}.streaming-demo__spectrum-image{z-index:1;position:absolute;top:0;bottom:0}.streaming-demo__spectrum-image img{object-fit:fill;width:100%;height:100%;display:block}.streaming-demo__frequency-axis{z-index:8;color:#f1f7ff;text-shadow:0 1px 3px #06142a;flex-direction:column;justify-content:space-between;font-size:8px;font-weight:800;display:flex;position:absolute;top:8px;bottom:8px;left:8px}.streaming-demo__future{z-index:10;background:repeating-linear-gradient(135deg,#06142aed 0 8px,#081a33ed 8px 16px);border-left:1px dashed #cddef066;position:absolute;top:0;bottom:0;right:0}.streaming-demo__future span{color:#7e96b3;white-space:nowrap;font-size:8px;position:absolute;top:10px;left:10px}.streaming-demo__playhead{z-index:13;background:#fff;width:1px;position:absolute;top:0;bottom:0;box-shadow:0 0 0 1px #ffffff2e}.streaming-demo__playhead:after{content:"";border:4px solid #0000;border-top-color:#fff;position:absolute;top:0;left:-4px}.streaming-demo__playhead span{color:#163359;background:#fff;border-radius:3px;padding:3px 5px;font-size:8px;font-weight:900;position:absolute;top:7px;right:7px}.streaming-demo__panel>footer,.streaming-demo__model-tracks>footer{color:#7c8fa7;background:#f5f8fc;justify-content:space-between;padding:7px 11px;font-size:8px;display:flex}.streaming-demo__event-box{z-index:7;min-width:3px;color:var(--car);pointer-events:none;background:#4b7cff21;border:2px solid;padding:5px 6px;position:absolute;top:12px;bottom:12px;overflow:hidden}.streaming-demo__event-box.motorcycle{color:var(--motorcycle);background:#ed9a2f26}.streaming-demo__event-box.person{color:var(--person);background:#27b87826}.streaming-demo__event-box.airplane{color:#c7a5fa;background:#a879ee29}.streaming-demo__event-box.unknown{color:var(--unknown);background:#f05f7824}.streaming-demo__event-box.spectrum{background-color:#0000;top:8px;bottom:8px}.streaming-demo__event-box b,.streaming-demo__event-box small{text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 3px #06142a;display:block;overflow:hidden}.streaming-demo__event-box b{font-size:9px}.streaming-demo__event-box small{color:#eef6ff;margin-top:2px;font-size:7px}.streaming-demo__model-tracks>header>span{color:var(--blue);background:#edf3ff;border-radius:4px;padding:5px 8px;font-size:9px;font-weight:900}.streaming-demo__lane{border-bottom:1px solid #dce6f2;grid-template-columns:145px minmax(0,1fr);min-height:72px;display:grid}.streaming-demo__lane-label{background:#f8fbff;flex-direction:column;justify-content:center;padding:12px 14px;display:flex}.streaming-demo__lane-label b{font-size:11px}.streaming-demo__lane-label small{color:#778ba4;margin-top:4px;font-size:8px}.streaming-demo__lane-track{background-color:#0a203d;background-image:linear-gradient(90deg,#7eb3e81a 1px,#0000 1px);background-size:10% 100%;position:relative;overflow:hidden}.streaming-demo__lane-track .streaming-demo__event-box{top:9px;bottom:9px}.streaming-demo__lane-track .streaming-demo__future span,.streaming-demo__lane-track .streaming-demo__playhead span{display:none}.streaming-demo__status-card{padding:18px}.streaming-demo__status-card>span{color:#318d68;letter-spacing:.11em;align-items:center;gap:8px;font-size:9px;font-weight:900;display:flex}.streaming-demo__status-card>span i{background:#65c999;border-radius:50%;width:8px;height:8px}.streaming-demo__status-card.analyzing>span{color:#a86c0d}.streaming-demo__status-card.analyzing>span i{background:#f0b54c}.streaming-demo__status-card.detected>span{color:#d14d37}.streaming-demo__status-card.detected>span i{background:#ff775d}.streaming-demo__status-card h2{margin-top:22px;font-size:24px}.streaming-demo__status-card p{color:#667c96;min-height:38px;margin:8px 0 18px;font-size:11px;line-height:1.6}.streaming-demo__status-card dl{gap:8px;margin:0;display:grid}.streaming-demo__status-card dl div{border-top:1px solid #e1e9f3;justify-content:space-between;gap:12px;padding-top:8px;font-size:10px;display:flex}.streaming-demo__status-card dt{color:#74879f}.streaming-demo__status-card dd{margin:0;font-weight:900}.streaming-demo__count-card>div{grid-template-columns:1fr 1fr;display:grid}.streaming-demo__count-card article{border-bottom:1px solid #e0e8f2;border-right:1px solid #e0e8f2;grid-template-columns:8px 1fr auto;align-items:center;gap:8px;padding:13px;display:grid}.streaming-demo__count-card article:nth-child(2n){border-right:0}.streaming-demo__count-card article:nth-last-child(-n+2){border-bottom:0}.streaming-demo__count-card article i,.streaming-demo__recent button>i,.streaming-demo__legend i{background:var(--car);border-radius:50%;width:7px;height:7px}.streaming-demo i.motorcycle{background:var(--motorcycle)!important}.streaming-demo i.person{background:var(--person)!important}.streaming-demo i.airplane{background:var(--airplane)!important}.streaming-demo i.unknown{background:var(--unknown)!important}.streaming-demo__count-card article span{font-size:10px}.streaming-demo__count-card article strong{font-size:18px}.streaming-demo__recent>div{padding:6px 12px 10px}.streaming-demo__recent button{width:100%;color:var(--ink);text-align:left;cursor:pointer;background:#fff;border:0;border-bottom:1px solid #e3ebf4;grid-template-columns:8px 1fr auto;align-items:center;gap:9px;padding:9px 2px;display:grid}.streaming-demo__recent button:hover{background:#f5f8fd}.streaming-demo__recent button span{gap:3px;display:grid}.streaming-demo__recent button b{font-size:10px}.streaming-demo__recent button small{color:#7b8ea5;font-size:8px}.streaming-demo__recent button strong{font-size:10px}.streaming-demo__recent p{color:#72869e;margin:12px 2px;font-size:10px;line-height:1.6}.streaming-demo__legend{border:1px solid var(--line);background:#fff;border-radius:7px;align-items:center;gap:18px;margin-top:14px;padding:11px 14px;display:flex}.streaming-demo__legend span{align-items:center;gap:6px;font-size:10px;font-weight:900;display:flex}.streaming-demo__legend small{color:#71859e;margin-left:auto;font-size:9px}.streaming-demo__notice{color:#6d8199;margin:9px 2px 0;font-size:9px;line-height:1.6}.streaming-demo__method{border:1px solid var(--line);background:#fff;border-radius:10px;margin-top:28px;overflow:hidden;box-shadow:0 12px 34px #183d7012}.streaming-demo__method>header{background:linear-gradient(125deg,#f7faff,#eaf2ff);border-bottom:1px solid #d9e5f2;grid-template-columns:.8fr 1.2fr;align-items:end;gap:42px;padding:28px 30px;display:grid}.streaming-demo__method>header>div>p{color:var(--blue);letter-spacing:.14em;margin:0 0 8px;font-size:11px;font-weight:900}.streaming-demo__method>header h2{font-size:26px}.streaming-demo__method>header>p{color:#526b88;margin:0;font-size:15px;line-height:1.8}.streaming-demo__method-steps{background:#dce6f2;grid-template-columns:repeat(3,1fr);gap:1px;display:grid}.streaming-demo__method-steps article{background:#fff;min-height:170px;padding:24px}.streaming-demo__method-steps span{width:34px;height:34px;color:var(--blue);background:#eaf1ff;border-radius:50%;place-items:center;font-size:12px;font-weight:900;display:grid}.streaming-demo__method-steps h3{margin:18px 0 8px;font-size:17px}.streaming-demo__method-steps p{color:#607792;margin:0;font-size:14px;line-height:1.8}.streaming-demo__method-notes{background:#f6f9fd;grid-template-columns:repeat(3,1fr);gap:18px;padding:22px 30px;display:grid}.streaming-demo__method-notes p{gap:7px;margin:0;display:grid}.streaming-demo__method-notes strong{font-size:14px}.streaming-demo__method-notes span{color:#657b95;font-size:13px;line-height:1.7}.streaming-demo__footer{color:#7892b1;letter-spacing:.06em;background:#06142a;justify-content:space-between;padding:22px clamp(20px,5vw,76px);font-size:9px;display:flex}@media (max-width:1100px){.streaming-demo__stats{grid-template-columns:repeat(5,1fr)}.streaming-demo__analysis{grid-template-columns:1fr}.streaming-demo__side{grid-template-columns:1fr 1fr}.streaming-demo__recent{grid-column:1/-1}.streaming-demo__principle{grid-template-columns:repeat(3,1fr)}.streaming-demo__controls{grid-template-columns:auto minmax(220px,1fr) auto}.streaming-demo__controls>button:last-child{grid-column:3}.streaming-demo__speed{grid-column:1}.streaming-demo__method-steps{grid-template-columns:repeat(2,1fr)}.streaming-demo__method-notes{grid-template-columns:1fr}}@media (max-width:760px){.streaming-demo__header{flex-direction:column;align-items:flex-start;gap:10px;padding-top:12px;padding-bottom:12px}.streaming-demo__header-actions{justify-content:space-between;width:100%}.streaming-demo__top{grid-template-columns:1fr;gap:18px}.streaming-demo__stats{grid-template-columns:1fr 1fr}.streaming-demo__stats>div{border-bottom:1px solid #d8e3f1}.streaming-demo__stats>div:nth-child(2n){border-right:0}.streaming-demo__stats>div:last-child{grid-column:1/-1}.streaming-demo__controls{grid-template-columns:1fr}.streaming-demo__controls>button:last-child,.streaming-demo__speed{grid-column:auto}.streaming-demo__principle{grid-template-columns:1fr 1fr}.streaming-demo__analysis{display:block}.streaming-demo__side{grid-template-columns:1fr;margin-top:14px;display:grid}.streaming-demo__lane{grid-template-columns:110px minmax(0,1fr)}.streaming-demo__event-box b{font-size:7px}.streaming-demo__event-box small{display:none}.streaming-demo__legend{flex-wrap:wrap;align-items:flex-start}.streaming-demo__legend small{width:100%;margin-left:0}.streaming-demo__method>header{grid-template-columns:1fr;gap:14px;padding:22px}.streaming-demo__method-steps{grid-template-columns:1fr}.streaming-demo__method-steps article{min-height:0}.streaming-demo__method-notes{padding:20px 22px}.streaming-demo__footer{flex-direction:column;align-items:flex-start;gap:7px}}