.qn-demo{--demo-color:#ea580c;flex-direction:column;align-items:center;gap:16px;width:min(100%,360px);margin:0;display:flex}.qn-demo-heading{align-items:center;gap:8px;width:100%;font-size:14px;font-weight:700;display:flex}.qn-demo-heading>span:last-child{color:#a9b4cc;white-space:nowrap;margin-left:auto;font-size:12px}.qn-demo-dot{background:var(--demo-color);width:8px;height:8px;box-shadow:0 0 16px var(--demo-color);border-radius:50%}.qn-demo .qn-demo-phone{aspect-ratio:6/11;box-shadow:0 0 0 6px #ffffff05, 0 24px 70px #0008, 0 0 50px color-mix(in srgb, var(--demo-color) 18%, transparent);border:1px solid #ffffff20;border-radius:30px!important;width:100%!important;height:auto!important}.qn-demo video{object-fit:cover;width:100%;height:100%;display:block}.qn-demo .qn-demo-still{position:absolute;inset:0}.qn-demo-controls{gap:10px;width:100%;display:flex}.qn-demo-controls button{color:#fff;min-height:44px;font:inherit;cursor:pointer;background:#ffffff08;border:1px solid #ffffff25;border-radius:12px;flex:1;padding:10px 12px;font-size:14px}.qn-demo-controls button:hover,.qn-demo-controls button[aria-pressed=true]{background:color-mix(in srgb, var(--demo-color) 20%, #101426);border-color:var(--demo-color)}.qn-demo-controls button:focus-visible,.qn-mod-tile:focus-visible{outline-offset:4px;outline:3px solid #fff!important}.qn-demo-controls button:disabled{opacity:.5;cursor:default}.qn-demo figcaption{text-align:center;gap:8px;font-size:14px;line-height:1.6;display:grid}.qn-demo figcaption span{color:#bdc6da}.qn-demo figcaption small{color:#a9b4cc;font-size:12px}.qn-mod-layout>.qn-demo{position:sticky;top:110px}@media (max-width:1024px){.qn-mod-layout{flex-direction:column}.qn-mod-layout>.qn-demo{position:static}.qn-mod-layout .qn-mod-grid{flex:none;width:100%;min-width:0;margin:0;padding:12px 8px 24px}}@media (prefers-reduced-motion:reduce){.qn-mod-tile,.qn-mod-icon{transition:none}.qn-mod-shine,.qn-feat-section{animation:none!important}}