/* Measured-latency generation demo */
.generation-demo{padding:108px max(4vw,24px);background:#050b13;color:#f4f8fa}.generation-demo-head{width:min(1380px,100%);margin:0 auto 35px}.generation-demo-head .kicker{margin:0;color:var(--cyan)}.generation-demo-head h2{max-width:720px;margin:12px 0 0;font-size:clamp(36px,4.4vw,64px);line-height:1.02;letter-spacing:-.055em}.generation-demo-head h2 em{font-style:normal;color:var(--cyan)}.generation-demo-copy>p{margin:0;color:#a0afbb;font-size:15px}.generation-demo-copy strong{color:#f4f8fa}.generation-demo-copy .generation-demo-note{margin-top:13px;color:#607284;font:9px/1.65 "DM Mono",monospace;text-transform:uppercase;letter-spacing:.055em}.generation-demo-controls{width:min(1380px,100%);margin:0 auto 18px;display:flex;align-items:center;justify-content:flex-end;gap:20px}.demo-speed button{border:1px solid #24384a;background:#0b1724;color:#b9c7d0;cursor:pointer;transition:.2s}.demo-speed button:hover{border-color:#366a6e;color:#fff}.demo-speed{display:flex;align-items:center;gap:6px}.demo-speed>span{margin-right:6px;color:#607386;font:8px "DM Mono",monospace;text-transform:uppercase}.demo-speed button{padding:7px 10px;border-radius:8px;font:500 8px "DM Mono",monospace}.demo-speed button.active{border-color:var(--cyan);background:#0f3d40;color:#eafffa;box-shadow:0 0 14px rgba(32,215,208,.35)}
.generation-demo-stage{width:min(1380px,100%);margin:0 auto;display:grid;grid-template-columns:1fr 2fr;gap:12px;padding:12px;border:1px solid #1d2b3a;border-radius:24px;background:#08111c;box-shadow:0 36px 100px rgba(0,0,0,.32)}.demo-lane{min-width:0;padding:14px 16px 16px;display:flex;flex-direction:column;border:1px solid #1a2b3c;border-radius:16px;background:#0a1522}.demo-rolling{--lane:var(--orange)}.demo-wave{--lane:var(--cyan)}.demo-lane-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.demo-lane-head h3{margin:0;color:var(--lane);font:600 clamp(15px,1.5vw,21px) Inter,sans-serif;letter-spacing:-.02em}.demo-lane-clock{color:var(--lane);font:500 13px "DM Mono",monospace;font-variant-numeric:tabular-nums}.demo-lane-body{position:relative;flex:1;display:flex;align-items:center}.demo-lane-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;width:100%}.demo-lane-badge{position:absolute;z-index:5;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);padding:9px 16px;border:1px solid var(--lane);border-radius:999px;background:rgba(5,11,19,.78);color:var(--lane);font:500 12px "DM Mono",monospace;white-space:nowrap;opacity:0;pointer-events:none;transition:.3s cubic-bezier(.2,.8,.2,1);backdrop-filter:blur(10px)}.demo-lane-badge b{color:var(--lime);font-weight:500}.demo-lane-badge.is-shown{opacity:1;transform:translate(-50%,-50%)}.demo-lane-progress{position:relative;margin-top:12px;height:6px;border-radius:6px;background:#152636}.demo-lane-progress i[data-lane-progress]{display:block;width:0;height:100%;border-radius:6px;background:var(--lane)}.demo-tick{position:absolute;top:-4px;bottom:0;width:1px;background:rgba(255,255,255,.55)}.demo-tick:after{content:"";position:absolute;top:0;left:1px;border:3.5px solid transparent;border-left:6px solid var(--lane)}.demo-tick-finish{transform:translateX(-1px)}.demo-tick-finish:after{left:auto;right:1px;border:3.5px solid transparent;border-right:6px solid var(--lane)}
.demo-card{position:relative;width:100%;padding:0;display:block;border:0;background:#111c28;overflow:hidden;cursor:pointer;isolation:isolate;aspect-ratio:832/480}.demo-card video,.demo-card canvas{width:100%;height:100%;display:block;object-fit:cover}.demo-card video{position:relative;z-index:1}.demo-card canvas{position:absolute;z-index:2;inset:0;transition:opacity .18s linear}.demo-card.is-ready canvas{opacity:0;pointer-events:none}.demo-card-control{position:absolute;z-index:3;right:9px;bottom:9px;width:27px;height:27px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.25);border-radius:50%;background:rgba(5,11,19,.64);color:#fff;opacity:0;transform:scale(.86);transition:.18s;backdrop-filter:blur(8px)}.demo-card-control:before{content:"Ⅱ";font:600 9px "DM Mono",monospace}.demo-card:hover .demo-card-control,.demo-card:focus-visible .demo-card-control,.demo-card.is-paused .demo-card-control{opacity:1;transform:none}.demo-card.is-paused .demo-card-control:before,.demo-card.is-ended .demo-card-control:before{content:"▶";margin-left:2px}.demo-card:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}.demo-card.is-generating{cursor:default}.demo-card.is-generating .demo-card-control{display:none}.demo-card.is-ended video{filter:saturate(.92)}
.demo-slot{width:min(1380px,100%);margin:0 auto}.demo-slot+.demo-slot{margin-top:26px}.demo-slot-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.demo-slot-head .demo-slot-tag{margin-bottom:0}.demo-slot-head .generation-demo-controls{width:auto;margin:0}.demo-slot-tag{display:inline-block;margin-bottom:10px;padding:6px 12px;border:1px solid #24384a;border-radius:999px;color:#7f94a8;font:500 9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.1em}.demo-pending{display:grid;place-items:center;min-height:220px;padding:40px 20px;border:1px dashed #2a3d4f;border-radius:24px;background:repeating-linear-gradient(135deg,rgba(255,255,255,.015) 0 10px,transparent 10px 20px);text-align:center}.demo-pending b{display:block;color:#8fa6bb;font:600 20px Inter,sans-serif;letter-spacing:-.01em}.demo-pending small{display:block;margin-top:8px;color:#5b7186;font:9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}.demo-footnote{margin:14px 2px 0;color:#5b7186;font:9px "DM Mono",monospace;text-transform:uppercase;letter-spacing:.08em}

@media(max-width:900px){.generation-demo-head{grid-template-columns:1fr;gap:22px}.generation-demo-stage{grid-template-columns:1fr}.demo-lane-grid{grid-template-columns:repeat(2,1fr)}}

@media(max-width:560px){.generation-demo{padding:84px 12px}.generation-demo-head{margin-bottom:25px}.generation-demo-controls{align-items:stretch;flex-direction:column}.demo-speed{justify-content:center}.generation-demo-stage{padding:6px;border-radius:16px}.demo-lane{padding:10px 10px 12px}.demo-lane-grid{gap:2px}.demo-lane-badge{font-size:10px}.demo-card-control{right:6px;bottom:6px;width:24px;height:24px}}