#reference-content .qq-guide{--demo-primary:#6b50cf;--demo-soft:#eee9ff;--demo-muted:#73728b;--demo-window:#fff;--demo-stroke:#dcd9ee;--demo-label:#29243e}#reference-content .qq-guide .qq-breadcrumb{color:var(--muted);flex-wrap:wrap;gap:10px;margin-bottom:27px;font-size:12px;display:flex}#reference-content .qq-guide .qq-breadcrumb a{text-decoration:none}.qq-hero{justify-content:space-between;align-items:center;gap:30px;margin-bottom:30px;display:flex}#reference-content .qq-guide .qq-eyebrow{color:var(--accent-strong);align-items:center;gap:8px;margin:0 0 12px;font-size:13px;font-weight:650;display:flex}#reference-content .qq-guide h1{letter-spacing:-.04em;margin:0;font-size:max(30px,min(4vw,43px));font-weight:760}#reference-content .qq-guide h1 span{display:inline-block}#reference-content .qq-guide .qq-intro{color:var(--muted);margin:13px 0 0;font-size:14px;line-height:1.8}.qq-eyebrow img{background:#fff;border-radius:6px;padding:2px}.qq-join{text-align:center;flex:none;width:192px}#reference-content .qq-guide .qq-button{border-radius:12px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:48px;padding:10px 18px;font-size:14px;font-weight:650;line-height:1.5;text-decoration:none;display:inline-flex}#reference-content .qq-guide .qq-button-primary{color:#fff;background:#6047c6;border:1px solid #6047c6;box-shadow:0 5px 16px #6248c81c}#reference-content .qq-guide .qq-button-primary:hover{background:#5139b6}.qq-button .icon{width:17px;height:17px}.qq-qr-details{margin-top:7px;position:relative}.qq-qr-details summary{cursor:pointer;color:var(--muted);padding-block-start:4px;padding-block-end:4px;font-size:12px}.qq-qr-panel{z-index:5;border:1px solid var(--line);background:var(--solid);box-shadow:var(--hover-shadow);border-radius:16px;padding:14px;position:absolute;top:35px;right:0}.qq-qr-panel img{border-radius:8px;width:180px;height:180px;display:block}.qq-qr-panel a{margin-top:6px;font-size:12px;display:inline-block}.qq-demo{background:var(--solid);border:1px solid #d9d1f3;border-radius:24px;overflow:hidden;box-shadow:0 10px 40px #53428b08}.qq-demo-tabs{border-bottom:1px solid var(--line);background:var(--surface);grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px;display:grid}.qq-demo-tabs button{min-height:48px;color:var(--muted);background:0 0;border:0;border-radius:12px;justify-content:center;align-items:center;gap:9px;padding:10px 8px;font-size:14px;font-weight:600;display:flex;position:relative;overflow:hidden}.qq-tab-number{background:var(--accent-soft);border-radius:7px;place-items:center;width:23px;height:23px;font-size:10px;display:inline-grid}.qq-demo-tabs button[aria-pressed=true]{color:#5838b2;background:#eee8ff}.qq-demo-tabs button[aria-pressed=true] .qq-tab-number{color:#fff;background:#6b50cf}.qq-demo-tabs button:hover{color:var(--accent-strong);background:var(--accent-soft)}.qq-step-progress{transform-origin:0;background:#876be1;border-radius:3px;height:3px;position:absolute;bottom:0;left:12px;right:12px;transform:scaleX(0)}.qq-demo-tabs button.is-timed .qq-step-progress{animation:qq-progress var(--scene-duration) linear both}#reference-content .qq-guide .qq-scene{background:linear-gradient(120deg, var(--solid), var(--accent-soft));border:0;grid-template-columns:235px minmax(0,1fr);align-items:center;gap:15px;min-height:364px;margin:0;padding:24px 25px 24px 30px;display:grid}.qq-scene-number{color:var(--accent-strong);letter-spacing:.1em;margin-bottom:15px;font-size:12px;font-weight:650;display:inline-block}#reference-content .qq-guide .qq-scene h2{letter-spacing:-.03em;max-width:220px;margin:0 0 12px;font-size:28px;line-height:1.4}#reference-content .qq-guide .qq-scene p{color:var(--muted);max-width:222px;margin:0;font-size:14px;line-height:1.85}.qq-illustration{width:100%;max-width:540px;height:auto;margin-inline-start:auto;margin-inline-end:auto;display:block;overflow:visible}.qq-illustration text{font:22px -apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}.qq-illustration .demo-label{fill:var(--demo-label);font-weight:650}.demo-window>rect{fill:var(--demo-window);stroke:var(--demo-stroke);stroke-width:1.5px}.demo-window>circle{fill:#cbc5e0}.demo-window-fill{fill:var(--demo-window)}.demo-halo{fill:var(--demo-soft);opacity:.7}.demo-soft{fill:var(--demo-soft)}.demo-primary,.demo-join-fill{fill:var(--demo-primary)}.demo-muted-block{fill:var(--demo-soft);opacity:.65}.demo-line{fill:none;stroke:var(--demo-stroke);stroke-width:1.5px}.demo-muted{fill:var(--demo-muted)}.demo-accent{fill:var(--demo-primary);font-weight:650}.demo-white{fill:#fff}.qq-illustration .demo-small{font-size:17px}.qq-illustration .demo-tiny{font-size:14px}.qq-illustration .demo-bottom-label{fill:var(--demo-muted);font-size:18px}.qq-illustration .demo-bottom-label.demo-accent{fill:var(--demo-primary)}.demo-dash{stroke:#ab91ee;fill:none;stroke-width:2.5px;stroke-dasharray:5 6}.demo-arrow{stroke:#ab91ee;fill:none;stroke-width:2.5px;stroke-linecap:round;stroke-linejoin:round}.demo-switch-track{fill:#7657ce}.demo-switch-knob{fill:#fff;transform:translate(30px)}.demo-before-join,.demo-pointer{opacity:0}.demo-pointer path{fill:#2c2347;stroke:#fff;stroke-width:2px;stroke-linejoin:round}.demo-search-icon{stroke:var(--demo-primary);stroke-width:3px;fill:none}.demo-tab-all,.demo-tab-category{opacity:0}.demo-tab-all-text,.demo-tab-category-text{fill:var(--demo-muted)}.demo-search-field{fill:var(--demo-window);stroke:var(--demo-primary);stroke-width:2px}.qq-demo-controls{border-top:1px solid var(--line);justify-content:space-between;align-items:center;gap:12px;padding:12px 22px;display:flex}.qq-demo-status{color:var(--muted);font-size:12px}.qq-demo-controls>div{gap:8px;display:flex}.qq-demo-controls button{border:1px solid var(--line);background:var(--solid);color:var(--ink);border-radius:8px;min-height:36px;padding:7px 10px;font-size:12px}.qq-demo-controls button:hover{border-color:var(--accent);color:var(--accent-strong)}.qq-demo-controls [data-demo-toggle]{background:var(--accent-soft);color:var(--accent-strong);border-color:#0000;min-width:72px}#reference-content .qq-guide .qq-demo-fallback{color:var(--muted);padding:0 22px 16px;font-size:13px}.qq-pairing{flex-wrap:wrap;justify-content:center;gap:16px 42px;margin-top:23px;display:flex}.qq-pairing>span{align-items:center;gap:6px;font-size:14px;display:inline-flex}.qq-pairing .icon{width:18px;height:18px;color:var(--accent-strong)}#reference-content .qq-guide .qq-sync-note{text-align:center;color:var(--muted);margin:7px 0 29px;font-size:12px}.qq-more{border-bottom:1px solid var(--line)}.qq-more summary{cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:17px 2px;font-size:14px;list-style:none;display:flex}.qq-more summary::-webkit-details-marker{display:none}.qq-more summary strong{color:var(--accent-strong);margin-left:8px;font-weight:650}.qq-expand{color:var(--accent-strong);flex:none;font-size:20px;line-height:1}.qq-more[open] .qq-expand{transform:rotate(45deg)}#reference-content .qq-guide .qq-more>p{color:var(--muted);margin:0 0 17px;font-size:13px}.qq-screenshots{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-block-start:4px;padding-block-end:18px;display:grid}.qq-screenshots figure{border:1px solid var(--line);background:var(--surface);border-radius:12px;min-width:0;margin:0;overflow:hidden}.qq-screenshots img{object-fit:contain;background:#fff;width:100%;height:190px;display:block}.qq-screenshots figcaption{padding:9px 10px;font-size:12px}#reference-content .qq-guide .qq-end-note{text-align:center;color:var(--muted);margin:26px 0 0;font-size:13px}.qq-scene.is-animated .demo-notification{animation:qq-notify var(--scene-duration) ease both}.qq-scene.is-animated .demo-nav-refresh{animation:qq-nav-refresh var(--scene-duration) ease both}.qq-scene.is-animated .demo-delivery{animation:qq-delivery var(--scene-duration) ease both}.qq-scene.is-animated .demo-before-join{animation:qq-before-join var(--scene-duration) step-end both}.qq-scene.is-animated .demo-after-join{animation:qq-after-join var(--scene-duration) step-end both}.qq-scene.is-animated .demo-switch-one .demo-switch-track{animation:qq-switch-track-one var(--scene-duration) ease both}.qq-scene.is-animated .demo-switch-one .demo-switch-knob{animation:qq-switch-one var(--scene-duration) ease both}.qq-scene.is-animated .demo-switch-two .demo-switch-track{animation:qq-switch-track-two var(--scene-duration) ease both}.qq-scene.is-animated .demo-switch-two .demo-switch-knob{animation:qq-switch-two var(--scene-duration) ease both}.qq-scene.is-animated .demo-setup-cursor{animation:qq-setup-cursor var(--scene-duration) ease both}.qq-scene.is-animated .demo-tab-all{animation:qq-tab-all var(--scene-duration) step-end both}.qq-scene.is-animated .demo-tab-all-text{animation:qq-tab-all-text var(--scene-duration) step-end both}.qq-scene.is-animated .demo-tab-category{animation:qq-tab-category var(--scene-duration) step-end both}.qq-scene.is-animated .demo-tab-category-text{animation:qq-tab-category-text var(--scene-duration) step-end both}.qq-scene.is-animated .demo-search-overlay{animation:qq-search-overlay var(--scene-duration) ease both}.qq-scene.is-animated .demo-query{animation:qq-query var(--scene-duration) step-end both}.qq-scene.is-animated .demo-search-result{animation:qq-search-result var(--scene-duration) ease both}.qq-scene.is-animated .demo-find-cursor{animation:qq-find-cursor var(--scene-duration) ease both}.qq-demo[data-playing=false] .qq-scene.is-animated *,.qq-demo[data-playing=false] .qq-demo-tabs .qq-step-progress{animation-play-state:paused}@keyframes qq-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes qq-notify{0%,28%{opacity:0;transform:translateY(18px)}42%,to{opacity:1;transform:translateY(0)}}@keyframes qq-nav-refresh{0%,8%{opacity:.35}24%,to{opacity:1}}@keyframes qq-delivery{0%,20%{opacity:0}32%,to{opacity:1}}@keyframes qq-before-join{0%{opacity:1}22%,to{opacity:0}}@keyframes qq-after-join{0%{opacity:0}22%,to{opacity:1}}@keyframes qq-switch-track-one{0%,40%{fill:#cbc7d8}46%,to{fill:#7657ce}}@keyframes qq-switch-one{0%,40%{transform:translate(0)}46%,to{transform:translate(30px)}}@keyframes qq-switch-track-two{0%,64%{fill:#cbc7d8}70%,to{fill:#7657ce}}@keyframes qq-switch-two{0%,64%{transform:translate(0)}70%,to{transform:translate(30px)}}@keyframes qq-setup-cursor{0%{opacity:0;transform:translate(410px,112px)}10%,22%{opacity:1;transform:translate(380px,78px)}35%,46%{opacity:1;transform:translate(389px,152px)}60%,70%{opacity:1;transform:translate(389px,227px)}82%,to{opacity:0;transform:translate(415px,260px)}}@keyframes qq-tab-all{0%{opacity:1}27%,to{opacity:0}}@keyframes qq-tab-all-text{0%{fill:#fff}27%,to{fill:var(--demo-muted)}}@keyframes qq-tab-category{0%{opacity:0}27%{opacity:1}52%,to{opacity:0}}@keyframes qq-tab-category-text{0%{fill:var(--demo-muted)}27%{fill:#fff}52%,to{fill:var(--demo-muted)}}@keyframes qq-search-overlay{0%,49%{opacity:0}55%,to{opacity:1}}@keyframes qq-query{0%,57%{clip-path:inset(0 100% 0 0)}61%{clip-path:inset(0 50% 0 0)}66%,to{clip-path:inset(0)}}@keyframes qq-search-result{0%,68%{opacity:0;transform:translateY(8px)}75%,to{opacity:1;transform:translateY(0)}}@keyframes qq-find-cursor{0%{opacity:0;transform:translate(99px,123px)}5%,18%{opacity:1;transform:translate(99px,110px)}27%,38%{opacity:1;transform:translate(372px,110px)}47%,52%{opacity:1;transform:translate(430px,54px)}59%,to{opacity:0;transform:translate(446px,77px)}}[data-theme=dark] #reference-content .qq-guide{--demo-primary:#c4acff;--demo-soft:#38304d;--demo-muted:#bbb3cc;--demo-window:#282435;--demo-stroke:#514762;--demo-label:#f2eafc}[data-theme=dark] .qq-demo{border-color:#62527c}[data-theme=dark] .qq-demo-tabs button[aria-pressed=true]{color:#e9dcff;background:#493664}[data-theme=dark] .demo-notification .demo-primary,[data-theme=dark] .demo-join-fill,[data-theme=dark] .demo-tab-all,[data-theme=dark] .demo-tab-category{fill:#7655c4}@media (max-width:700px){.qq-hero{align-items:flex-start;gap:20px}.qq-join{width:170px}#reference-content .qq-guide .qq-scene{grid-template-columns:minmax(0,1fr);gap:15px;min-height:0;padding:24px 20px 12px}#reference-content .qq-guide .qq-scene h2{max-width:none;margin-bottom:7px;font-size:25px}#reference-content .qq-guide .qq-scene p{max-width:none;min-height:52px;font-size:13px}.qq-scene-number{display:none}.qq-illustration{max-width:480px;margin-inline-start:auto;margin-inline-end:auto}}@media (max-width:500px){.qq-hero{flex-direction:column;gap:18px;margin-bottom:23px}#reference-content .qq-guide .qq-breadcrumb{margin-bottom:22px}.qq-join{align-items:center;gap:14px;width:100%;display:flex}#reference-content .qq-guide .qq-button{flex:none;width:auto;padding-inline-start:16px;padding-inline-end:16px}.qq-qr-details{flex:1;margin:0}.qq-qr-panel{top:39px}.qq-demo{border-radius:18px}.qq-demo-tabs{gap:3px;padding:5px}.qq-demo-tabs button{gap:5px;min-height:46px;padding-inline-start:3px;padding-inline-end:3px;font-size:12px}.qq-tab-number{width:19px;height:19px;font-size:9px}#reference-content .qq-guide .qq-scene{gap:11px;padding:21px 10px 13px}.qq-scene-copy{padding-inline-start:7px;padding-inline-end:7px}#reference-content .qq-guide .qq-scene h2{font-size:23px}.qq-demo-controls{flex-wrap:wrap;gap:7px;padding:10px 14px}.qq-demo-status{font-size:11px}.qq-demo-controls>div{margin-left:auto}.qq-demo-controls button{padding-inline-start:8px;padding-inline-end:8px;font-size:11px}.qq-pairing{gap:9px 15px;margin-top:18px}.qq-pairing>span{gap:3px;font-size:12px}.qq-pairing .icon{width:15px;height:15px}#reference-content .qq-guide .qq-sync-note{margin-bottom:20px;font-size:11px}.qq-more summary{font-size:13px}.qq-more summary strong{margin-left:0;display:block}.qq-screenshots{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.qq-screenshots img{height:170px}.qq-screenshots figcaption{font-size:11px}}@media (max-width:359px){.qq-demo-tabs .qq-tab-number{display:none}}@media (prefers-reduced-motion:reduce){.qq-demo .qq-scene.is-animated *,.qq-demo .qq-demo-tabs .qq-step-progress{animation:none!important}}