.demo{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:center}.demo-stage{position:relative;aspect-ratio:16 / 11;border-radius:var(--r-card);border:1px solid var(--line-strong);overflow:hidden;background:radial-gradient(60% 70% at 50% 0%,var(--surface-2),var(--surface-0) 78%);box-shadow:var(--shadow-float)}.stage-panel{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity var(--t-slow) var(--ease-out)}.stage-panel.is-active{opacity:1}.stage-panel[hidden]{display:none}.stage-wide{position:relative;margin:0;width:100%;height:100%}.stage-wide img{width:100%;height:100%;object-fit:cover;object-position:78% center}.stage-scan{position:absolute;inset:0;pointer-events:none;background:linear-gradient(100deg,transparent 42%,rgba(72,185,139,.16) 50%,transparent 58%);background-size:260% 100%;background-position:130% 0}.stage-panel.is-active .stage-scan{animation:scan 1.5s var(--ease-in-out) 1 both}@keyframes scan{to{background-position:-60% 0}}.stage-tag{position:absolute;left:.9rem;bottom:.9rem;padding:.4rem .75rem;border-radius:var(--r-pill);background:#07080bc7;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);font-size:.75rem;color:var(--text-3)}.stage-device{position:relative;display:grid;place-items:center;width:100%;height:100%;padding:clamp(1rem,2.5vw,1.75rem)}.stage-device .phone{width:auto;height:100%;max-height:100%;aspect-ratio:1206 / 2622;padding:8px;border-radius:34px}.stage-device .phone img{height:100%;width:100%;object-fit:cover;object-position:top center;border-radius:27px}.hud{position:absolute;left:clamp(.75rem,2vw,1.5rem);top:50%;translate:0 -50%;width:min(15rem,42%);padding:1rem 1.1rem;border-radius:var(--r-small);border:1px solid var(--line-strong);background:#0e1015e6;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:var(--shadow-lift)}.hud-right{left:auto;right:clamp(.75rem,2vw,1.5rem)}.stage-panel.is-active .hud{animation:hud-in .48s var(--ease-spring) .16s both}@keyframes hud-in{0%{opacity:0;transform:translate(12px) scale(.96)}}.stage-panel.is-active .hud-right{animation-name:hud-in-right}@keyframes hud-in-right{0%{opacity:0;transform:translate(-12px) scale(.96)}}.hud-title{font-family:var(--font-instrument);font-size:.75rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3);margin-bottom:.75rem}.hud dl{display:grid;gap:.5rem}.hud dl div{display:flex;justify-content:space-between;gap:.75rem;font-size:.8125rem;border-bottom:1px solid var(--line);padding-bottom:.5rem}.hud dt{color:var(--text-3)}.hud dd{color:var(--text-1);font-variant-numeric:tabular-nums}.hud-live{color:var(--success)!important;font-family:var(--font-instrument);font-weight:700;letter-spacing:.06em}.hud-big{font-family:var(--font-instrument);font-weight:700;font-size:1.5rem;letter-spacing:-.02em;color:var(--text-1)}.hud-sub{font-size:.8125rem;color:var(--text-3);margin-top:.5rem}.hud-note{display:block;margin-top:.85rem;padding-top:.6rem;border-top:1px solid var(--line);font-size:.75rem;color:var(--text-3)}.channels{position:absolute;right:clamp(.75rem,2vw,1.5rem);top:50%;translate:0 -50%;display:grid;gap:.5rem}.channels li{display:flex;align-items:center;gap:.55rem;padding:.55rem .9rem;border-radius:var(--r-pill);border:1px solid var(--line-signal);background:#0e1015e6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);font-size:.8125rem;color:var(--text-1);white-space:nowrap}.channels .ico{width:1rem;height:1rem;color:var(--signal-bright)}.stage-panel.is-active .channels li{animation:channel-in .42s var(--ease-spring) both}.stage-panel.is-active .channels li:nth-child(1){animation-delay:.18s}.stage-panel.is-active .channels li:nth-child(2){animation-delay:.3s}.stage-panel.is-active .channels li:nth-child(3){animation-delay:.42s}@keyframes channel-in{0%{opacity:0;transform:translate(-14px) scale(.94)}}.demo-steps{display:grid;gap:.4rem}.step{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:.9rem;width:100%;text-align:left;padding:1rem 1.1rem 1.15rem;border-radius:var(--r-small);border:1px solid transparent;transition:background-color var(--t-base) ease,border-color var(--t-base) ease}.step.is-active{background:var(--surface-1);border-color:var(--line)}@media (hover: hover) and (pointer: fine){.step:not(.is-active):hover{background:#ffffff08}}.step-index{font-family:var(--font-instrument);font-weight:700;font-size:.75rem;letter-spacing:.16em;color:var(--text-3);padding-top:.2rem;transition:color var(--t-base) ease}.step.is-active .step-index{color:var(--signal-bright)}.step-text strong{display:block;font-family:var(--font-instrument);font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--text-2);margin-bottom:.3rem;transition:color var(--t-base) ease}.step.is-active .step-text strong{color:var(--text-1)}.step-text span{display:block;font-size:.9375rem;color:var(--text-3);max-height:0;opacity:0;overflow:hidden;transition:max-height var(--t-slow) var(--ease-out),opacity var(--t-base) ease}.step.is-active .step-text span{max-height:9rem;opacity:1}.step-bar{position:absolute;left:1.1rem;right:1.1rem;bottom:.55rem;height:2px;border-radius:2px;background:var(--line);opacity:0;transition:opacity var(--t-base) ease}.step.is-active .step-bar{opacity:1}.step-bar i{display:block;height:100%;width:0;border-radius:2px;background:var(--signal)}.step.is-active .step-bar i{animation:step-fill var(--step-ms, 7s) linear forwards}.demo.is-paused .step.is-active .step-bar i{animation-play-state:paused}@keyframes step-fill{to{width:100%}}@media (prefers-reduced-motion: reduce){.step-bar{display:none}.step-text span{max-height:none;opacity:1}}@media (max-width: 980px){.demo{grid-template-columns:minmax(0,1fr)}.demo-stage{aspect-ratio:4 / 5;max-height:30rem}.hud,.channels{top:auto;bottom:1rem;translate:none}.hud{left:1rem;right:1rem;width:auto}.channels{left:1rem;right:1rem;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr))}.channels li{justify-content:center}}@media (max-width: 560px){.demo-stage{aspect-ratio:3 / 4}.hud dl{gap:.35rem}}.demo-pause{grid-column:1 / -1;justify-self:start;padding:.6rem 1.1rem;font-size:.875rem}.motion-paused .hero-alert-dot{animation-play-state:paused}