body.q-type>main{padding:30px 0 70px;text-align:initial}
.q-hero{position:relative;min-height:420px;padding:20px 0 65px 24%;text-align:right}
.q-hero h1{font-size:clamp(46px,6.8vw,98px);white-space:normal}
.q-hero .q-mascot{position:absolute;left:-15px;top:30px;bottom:auto;width:29%;height:auto;aspect-ratio:1;z-index:1}
.q-demo{max-width:1120px;margin:20px auto 0}
#qorqbot-abstraction{text-align:left;position:relative}
#qorqbot-abstraction .cursor-interaction{cursor:pointer}
#qorqbot-abstraction :focus-visible{outline:2px solid #a8bfd8;outline-offset:3px}
#qorqbot-abstraction .demo-tooltip{position:absolute;z-index:10;background:#29292d;color:#ededed;padding:8px 12px;border:1px solid #414148;border-radius:7px;font:12px/1.5 system-ui,sans-serif;max-width:calc(100% - 16px);pointer-events:none;box-shadow:0 3px 16px #0005}
#qorqbot-abstraction .composer{min-height:57px;justify-content:flex-end}
#qorqbot-abstraction .activity{margin-bottom:-14px}
@media(max-width:700px){.q-hero{padding:15px 0 40px;min-height:0}.q-hero .q-mascot{width:85px;top:initial;bottom:30px;left:0}.q-hero h1{font-size:clamp(38px,8vw,53px)}.q-type .q-copy{margin-top:22px}.q-type .sub{font-size:16px}.q-type .booking{font-size:14px;padding:15px 20px}.q-demo{margin-top:15px}}
/* The tour's interaction layer is deliberately separate from the pictured UI. */
.q-wrap{width:min(1680px,94vw)}
.q-demo{max-width:1340px;display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
#qorqbot-abstraction{min-height:710px}
#qorqbot-abstraction .rail{gap:24px;padding-top:25px}
#qorqbot-abstraction .chathead{padding:25px 28px}
#qorqbot-abstraction .conversation{padding:30px;gap:30px}
#qorqbot-abstraction .focus{padding:30px;gap:36px}
#qorqbot-abstraction .others{gap:27px}
#qorqbot-abstraction .tasklist{gap:22px}
#qorqbot-abstraction .taskgroup{gap:18px}
#qorqbot-abstraction .subtasks{gap:16px}
#qorqbot-abstraction .demo-hotspots{position:absolute;inset:0;pointer-events:none;z-index:3}
#qorqbot-abstraction button.demo-hotspot{position:absolute;display:block;pointer-events:auto;border:1px dashed #72b1b85c;border-radius:12px;background:#59aab204;cursor:pointer;transition:background .18s,border-color .18s,box-shadow .18s}
#qorqbot-abstraction button.demo-hotspot:hover,#qorqbot-abstraction button.demo-hotspot[aria-pressed="true"],#qorqbot-abstraction button.demo-hotspot:focus-visible{background:#69b9c012;border-color:#9fdce1;box-shadow:inset 0 0 0 1px #9fdce130;outline-offset:2px}
#qorqbot-abstraction button.demo-hotspot-pane{border-color:#72b1b838;z-index:0}
#qorqbot-abstraction button.demo-hotspot:not(.demo-hotspot-pane){z-index:1}
#qorqbot-abstraction .demo-toggle-hotspot{position:relative;z-index:4;outline:1px dashed #72b1b588;outline-offset:6px;border-radius:7px}
#qorqbot-abstraction .demo-toggle-hotspot:hover,#qorqbot-abstraction .demo-toggle-hotspot.is-explored{outline-color:#9fdce1;background:#69b9c012}
#qorqbot-abstraction .toggle button{min-width:34px;min-height:34px}
#qorqbot-abstraction .agent svg{pointer-events:none}
.demo-explanation{padding:22px 26px 24px;border:1px solid #1a1a1a20;border-radius:14px;background:#f1efea;color:#222;min-height:220px;display:grid;grid-template-columns:minmax(180px,.7fr) minmax(0,1.3fr);column-gap:34px;align-content:start}
.demo-eyebrow{font:11px/1.5 system-ui;letter-spacing:.1em;color:#72716b;grid-column:1/-1}
.demo-explanation h2{font:400 25px/1.2 Zen,system-ui;letter-spacing:-.02em;margin:12px 0;grid-column:1;grid-row:2/4}
.demo-explanation p{font:15px/1.6 system-ui;margin:12px 0 0;grid-column:2}
.demo-explanation #demo-feature-detail{color:#686760;font-size:14px;margin-top:8px}
.demo-hint{font:12px/1.5 system-ui;color:#7b7a73;grid-column:1/-1;margin-top:24px}
@media(min-width:1750px){.q-demo{max-width:none;grid-template-columns:minmax(0,1fr) 280px}.demo-explanation{position:sticky;top:24px;display:block;min-height:370px;padding:25px}.demo-hint{display:block}}
@media(max-width:700px){.demo-explanation{display:block;min-height:300px;padding:20px}.demo-explanation h2{font-size:24px}.demo-hint{display:block}#qorqbot-abstraction .focus{padding:24px;gap:30px}#qorqbot-abstraction .conversation{padding:25px 18px}#qorqbot-abstraction .chathead{padding:25px 17px}#qorqbot-abstraction .chat{min-height:620px}}
@media(prefers-reduced-motion:reduce){#qorqbot-abstraction button.demo-hotspot{transition:none}}
@media(min-width:1150px){.q-demo{max-width:none;grid-template-columns:minmax(0,1fr) 270px}.demo-explanation{position:sticky;top:24px;display:block;min-height:370px;padding:24px}.demo-hint{display:block}}
@media(max-width:1149px){.demo-explanation{order:-1;position:sticky;top:10px;z-index:5;max-height:230px;overflow:auto;min-height:0;box-shadow:0 8px 25px #0000000b}.demo-hint{margin-top:14px}}
