/* A staged, readable terminal demo; the original phone and ink stay intact. */
@font-face{font-family:'VQA SF Mono';src:local('SFMono-Regular'),local('SF Mono Regular');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'VQA SF Mono';src:local('SFMono-Medium'),local('SF Mono Medium');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'VQA SF Mono';src:local('SFMono-Semibold'),local('SF Mono Semibold');font-style:normal;font-weight:600 700;font-display:swap}
.vqa-scene{container:qa-scene / inline-size;position:relative;width:100%;isolation:isolate}
.vqa-composition{position:relative;height:clamp(510px,56cqw,640px);width:100%}
/* Keep the supplied terminal shell, logo, header and footer pixel-for-pixel.
   Only its message area is covered and rebuilt as selectable, animated text. */
.vqa-terminal{container:qa-terminal / inline-size;position:absolute;left:0;top:50%;width:54%;aspect-ratio:1292/925;box-sizing:border-box;transform:translate(42.6%,-50%);border:0;border-radius:16px;background:#202020;color:#f5f5f5;overflow:hidden;transition:transform 1s cubic-bezier(.22,1,.36,1);z-index:2;font-family:'Courier New',monospace;font-weight:400;letter-spacing:.005em}
.vqa-terminal-original{display:block;width:100%;height:auto}
/* Clear the screenshot's messages and user path while keeping its exact shell. */
.vqa-terminal::before{content:'';position:absolute;inset:22.7% 2.55% 46% 2.75%;background:#202020;pointer-events:none}
.vqa-terminal::after{content:'';position:absolute;left:14%;right:2.55%;top:17.5%;height:3.3%;background:#202020;pointer-events:none}
#hubsync-main .vqa-transcript,#hubsync-main .vqa-transcript *{font-family:'VQA SF Mono','SF Mono',SFMono-Regular,ui-monospace,Menlo,monospace!important;font-weight:400!important;font-synthesis:none;letter-spacing:0}
#hubsync-main .vqa-transcript .vqa-skill strong{font-weight:600!important}
.vqa-transcript{position:absolute;inset:26.7% 2.55% 42% 2.75%;background:#202020;font-size:1.935cqw;font-weight:400;line-height:1.16}
.vqa-message{position:absolute;left:0;right:0;margin:0;opacity:1;transform:none;transition:opacity .25s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vqa-request{top:2.2%;padding:.1cqw 0 .13cqw 2.2cqw;background:#383838;border-radius:0;box-sizing:border-box;white-space:nowrap;font-weight:400;line-height:1.16}
.vqa-request-chevron{position:absolute;left:.1cqw;color:#515151}
.vqa-attachment{display:block}.vqa-answer{top:38%;padding-left:2.2cqw;box-sizing:border-box;white-space:normal}
.vqa-bullet{position:absolute;left:.1cqw;top:.05cqw;font-size:1.6cqw;line-height:1.3;color:#f5f5f5}.vqa-answer p{font:inherit;margin:0;letter-spacing:inherit}
.vqa-skill{top:73%;padding-left:2.2cqw;box-sizing:border-box}.vqa-skill-line{display:flex;align-items:center}.vqa-skill strong{font-weight:700}
.vqa-skill-icon{position:absolute;left:.24cqw;width:1cqw;height:1cqw;background:#56b870;border-radius:50%;box-sizing:border-box}
.vqa-skill-result{display:block;padding-left:2.5cqw;margin-top:.95cqw;white-space:nowrap}.vqa-skill-result::before{content:'└';position:absolute;margin-left:-2.1cqw;color:#646464;font-size:2.2cqw;line-height:1}
.vqa-loading{display:none}.vqa-loaded{display:inline}
.vqa-phone-group{position:absolute;right:0;top:50%;width:39%;height:auto;aspect-ratio:480/640;transform:translateY(-50%);opacity:1;transition:opacity .7s ease,translate .9s cubic-bezier(.22,1,.36,1)}
.vqa-phone{position:absolute;left:-1%;top:0;width:70%;height:auto;transform:rotate(2deg);transform-origin:50% 70%;transition:transform 1s cubic-bezier(.22,1,.36,1);filter:drop-shadow(0 15px 12px #00000012)}
.vqa-note{position:absolute;left:77%;width:26%;transform:rotate(-3deg);opacity:1;transition:opacity .4s ease,translate .6s cubic-bezier(.22,1,.36,1)}
#hubsync-main .vqa-note p{font:600 clamp(19px,2.15cqw,26px)/1.18 Caveat,cursive!important;letter-spacing:.02em;text-align:center;margin:0;color:#080808}
.vqa-note img{position:absolute;width:9px;height:45px;object-fit:contain;left:-17px;top:50%;transform:translateY(-50%)}
.vqa-note-color{top:13%}.vqa-note-size{top:32%}.vqa-note-buttons{top:88%}
.vqa-note-buttons img{transform:translateY(-50%) rotate(5deg) scaleX(-1)}
.vqa-arrow{position:absolute;left:48%;width:13%;height:auto;opacity:1;transition:opacity .5s ease}.vqa-arrow-top{top:5%}.vqa-arrow-bottom{bottom:3%}
html.vqa-motion .vqa-scene:not(.vqa-step-1) .vqa-request,html.vqa-motion .vqa-scene:not(.vqa-step-2) .vqa-answer,html.vqa-motion .vqa-scene:not(.vqa-step-3) .vqa-skill{opacity:0;transform:translateY(8px)}
html.vqa-motion .vqa-scene:not(.vqa-step-4) .vqa-loading{display:inline}html.vqa-motion .vqa-scene:not(.vqa-step-4) .vqa-loaded{display:none}
html.vqa-motion .vqa-scene:not(.vqa-step-4) .vqa-skill-icon{border:1px solid #79736b;border-top-color:#ddd3c4;background:transparent;animation:vqa-spin .8s linear infinite}
.vqa-scene.vqa-step-5 .vqa-terminal{transform:translate(0,-50%)}
html.vqa-motion .vqa-scene:not(.vqa-step-6) .vqa-phone-group{opacity:0;translate:35px 35px}html.vqa-motion .vqa-scene:not(.vqa-step-6) .vqa-phone{transform:rotate(9deg)}
html.vqa-motion .vqa-scene:not(.vqa-step-7) .vqa-note-color,html.vqa-motion .vqa-scene:not(.vqa-step-8) .vqa-note-size,html.vqa-motion .vqa-scene:not(.vqa-step-9) .vqa-note-buttons{opacity:0;translate:0 12px}
html.vqa-motion .vqa-scene:not(.vqa-step-10) .vqa-arrow{opacity:0}
.vqa-scene.is-paused *{animation-play-state:paused!important}
html:not(.vqa-motion) .vqa-scene .vqa-terminal{transform:translate(0,-50%)}
@keyframes vqa-spin{to{transform:rotate(360deg)}}
@container qa-scene (max-width:760px){
 .vqa-composition{height:auto;display:flex;flex-direction:column;align-items:center;gap:44px;padding:12px 0 24px}
 .vqa-terminal{position:relative;top:auto;left:auto;width:100%;max-width:620px;height:auto;transform:none!important}
 .vqa-phone-group{position:relative;top:auto;right:auto;width:min(100%,440px);transform:none;flex:none}
 .vqa-arrow{display:none}
 #hubsync-main .vqa-note p{font-size:23px!important}
}
@container qa-scene (max-width:400px){
 .vqa-terminal{border-radius:10px}.vqa-note{left:77%;width:23%}#hubsync-main .vqa-note p{font-size:21px!important}.vqa-note img{left:-12px;width:7px}
}
@media(prefers-reduced-motion:reduce){.vqa-scene *{animation:none!important;transition:none!important}}