/* Shared with the actual dashboard: neutral charcoal, off-white and chat blue. */
.q-demo{--demo-bg:#0b0b0c;--demo-panel:#1b1b1d;--demo-line:#343438;--demo-text:#e6e6e4;--demo-muted:#95959c;--demo-blue:#70a3de}
.q-demo .architecture-plane{background:var(--demo-bg);border-color:var(--demo-line);box-shadow:0 2px 0 #29292c,0 5px 0 #131315,0 24px 45px #0000001f;color:var(--demo-text);border-radius:14px}
.q-demo .plane-label{color:var(--demo-muted);border-color:#29292c;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0}
.q-demo .plane-label span:last-child{color:#77777e}
.q-demo .architecture-plane.plane-mcp[data-mcp="wrapper"]{background:var(--demo-bg);border:1px solid var(--demo-line);box-shadow:0 2px 0 #29292c,0 5px 0 #131315,0 24px 45px #0000001f}
.q-demo .wrapper-eyebrow{color:var(--demo-muted);letter-spacing:.1em}
.q-demo .wrapper-mascot{background:#1b1b1d;border-color:#343438;border-radius:16px}
.q-demo .wrapper-box{background:#1b1b1d;border-color:#48484c;color:var(--demo-text);box-shadow:none;border-radius:9px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:23px;font-weight:500}
.q-demo .wrapper-box span:last-child{color:#a9a9ae;font-weight:400;font-family:inherit}
.q-demo .wrapper-destination{font:17px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--demo-text);border-color:#343438;letter-spacing:0}
.q-demo .wrapper-wires{stroke:#77777e}
.q-demo .wrapper-wires .wire-pulse{stroke:var(--demo-blue)}
.q-demo #wrapper-arrow path{stroke:#95959c}
.q-demo .terminal-card{background:linear-gradient(145deg,#151517fa,#0b0b0cf5);border-color:#48484c;border-radius:10px;box-shadow:1px 2px 0 #343438,3px 4px 0 #19191c,0 14px 28px #00000026;backdrop-filter:blur(8px)}
.q-demo .terminal-brand-name{color:var(--demo-text);border-color:#343438}
.q-demo .abstract-command{color:#a9a9ae}
.q-demo .abstract-command i{background:#74747b}
.q-demo .output-chain .abstract-response i{background:#48484c}
.q-demo .terminal-card .native-composer{color:#a9a9ae;border-color:#48484c;animation-name:neutral-input-highlight}
.q-demo .terminal-cursor{background:#e7e6df}
.q-demo .input-typing{background:#a9a9ae}
@keyframes neutral-input-highlight{0%,36%{background:#146acb18;border-color:#70a3de99;box-shadow:0 0 9px #146acb0c}58%,100%{background:#202022;border-color:#343438;box-shadow:none}}
.q-demo .plane-data{background:#0b0b0c}
.q-demo .brain-contour{fill:#ffffff03;stroke:#ffffff19}
.q-demo .neural-edges{stroke:#a9a9ae55}
.q-demo .neural-nodes{fill:#95959c}
.q-demo .neuron-hub{fill:#e6e6e4}
.q-demo .neural-impulses{fill:#e6e6e4}
.q-demo .neural-impulses circle:nth-child(3n){fill:var(--demo-blue)}
.q-demo .learning-orbit{stroke:#95959c66}
.q-demo .learning-arrow{stroke:#95959c}
.q-demo .learning-label,.q-demo .brain-legend{fill:#95959c;color:#a9a9ae}
.q-demo .brain-legend b{background:#e6e6e4}
.q-demo .brain-legend span:nth-child(2) b{background:var(--demo-blue)}
.q-demo .brain-legend span:nth-child(3) b{background:#95959c}
.q-demo .layer-statement,.q-demo .layers-copy h3{color:#292929}
.q-demo .layers-description{color:#77736c}
.q-demo .layers-count,.q-demo .layers-hint{color:#969087}
.q-demo .layers-navigation button{color:#4b4843;border-color:#bcb7ae}
.q-demo .guide-copy{background:linear-gradient(145deg,#343438e8,#1b1b1de8);border-color:#e6e6e438;border-top-color:#e6e6e44f;box-shadow:0 16px 45px #0004;color:#e6e6e4}
.q-demo .guide-copy h2,.q-demo .guide-copy p{color:#e6e6e4}
.q-demo .guide-copy .guide-detail{color:#c7c7ca}
.q-demo .guide-counter{color:#a9a9ae}
.q-demo .guide-track{background:#e6e6e42b}
.q-demo .guide-track span{background:#e7e6df}
.q-demo .guide-controls button{color:#e6e6e4}
.q-demo #qorqbot-abstraction .guide-spotlight{border-color:#e6e6e475;box-shadow:0 0 0 2400px #0303048a,0 0 35px 8px #ffffff0d}
@media(prefers-reduced-motion:reduce){.q-demo .terminal-card .native-composer{animation:none}}
/* Explanatory panes follow the landing page's warm neutral palette. */
.q-demo .guide-preview>.layers-stage{grid-template-columns:minmax(0,1fr) 330px;gap:30px}
.q-demo .layers-copy{background:#f2efe9;border:1px solid #d8d4cc;border-radius:16px;padding:26px;box-sizing:border-box;box-shadow:0 8px 26px #30281805}
.q-demo .layers-copy h3{font:400 27px/1.32 Zen,system-ui;letter-spacing:-.025em;margin:20px 0 18px;color:#292929}
.q-demo[data-layer="0"] .layers-copy h3{font-size:25px;line-height:1.45;margin-bottom:0}
.q-demo .layers-description{font:14px/1.75 system-ui;min-height:0;color:#77736c;margin:0}
.q-demo .layers-description[hidden]{display:none}
.q-demo .layers-navigation{margin-top:27px;padding-top:13px;border-top:1px solid #d8d4cc}
.q-demo .layers-navigation button{border:0;font-size:12px}
.q-demo .layers-hint{font-size:10px;margin-top:12px}
.q-demo .layers-count{font-size:10px;letter-spacing:.14em}
/* A simpler MCP diagram: icon, wrapper square, then three aligned destinations. */
.q-demo .architecture-plane.plane-mcp[data-mcp="wrapper"]{background:#0b0b0c}
.q-demo .wrapper-mascot{left:56px;top:166px;width:88px;height:88px;background:none;border:0}
.q-demo .wrapper-mascot svg{width:80px;height:80px}
.q-demo .wrapper-box{left:220px;top:133px;width:154px;height:154px;background:#1b1b1d;border:1px solid #4a4a4e;border-radius:12px;font-size:24px;gap:9px}
.q-demo .wrapper-box span:last-child{font-size:12px;color:#a9a9ae}
.q-demo .wrapper-wires{stroke:#626269;stroke-width:1.2}
.q-demo .wrapper-wires .wire-pulse{stroke:#70a3de;stroke-width:1.5;stroke-dasharray:5 180;opacity:.65}
.q-demo .wrapper-destination{left:472px;width:250px;height:76px;padding:15px;gap:13px;border:1px solid #303034;border-radius:9px;background:#141416;font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#dddeda}
.q-demo .wrapper-destination svg{width:20px;height:20px;flex:none;stroke:#909097;stroke-width:1.4}
.q-demo .wrapper-destination-0{top:74px}.q-demo .wrapper-destination-1{top:172px}.q-demo .wrapper-destination-2{top:270px}
@media(min-width:701px) and (max-width:1000px){.q-demo .guide-preview>.layers-stage{grid-template-columns:minmax(0,1fr) 260px;gap:18px}.q-demo .layers-copy{padding:20px}.q-demo[data-layer="0"] .layers-copy h3{font-size:21px}}
@media(max-width:700px){.q-demo .guide-preview>.layers-stage{gap:12px}.q-demo .layers-copy{padding:16px 20px}.q-demo .layers-copy h3,.q-demo[data-layer="0"] .layers-copy h3{font-size:21px;line-height:1.35;margin:10px 0}.q-demo .layers-description{font-size:12px;line-height:1.6}.q-demo .layers-navigation{margin-top:15px;padding-top:4px}.q-demo .layers-hint{display:none}}
/* Broader reading panes and a quiet, independent float for each terminal. */
@media(min-width:1200px){.q-demo .guide-preview>.layers-stage{grid-template-columns:minmax(0,1fr) 660px}}
@media(min-width:701px) and (max-width:1199px){.q-demo .guide-preview>.layers-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.q-demo .terminal-card{animation:terminal-float 7s ease-in-out infinite}
.q-demo .terminal-card-1{animation-delay:-2.3s;animation-duration:8s}
.q-demo .terminal-card-2{animation-delay:-4.7s;animation-duration:7.5s}
@keyframes terminal-float{0%,100%{translate:0 0}50%{translate:1px -4px}}
@media(prefers-reduced-motion:reduce){.q-demo .terminal-card{animation:none}}
/* The copy sits above the full-width layer stage. */
.q-demo .guide-preview>.layers-stage{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:118px minmax(0,1fr);gap:14px;align-items:stretch}
.q-demo .layers-stage .layers-copy{grid-column:1;grid-row:1;width:min(920px,100%);align-self:stretch;justify-self:center;padding:16px 24px;position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:1fr auto;column-gap:24px;border-radius:12px}
.q-demo .layers-copy h3,.q-demo[data-layer="0"] .layers-copy h3,.q-demo[data-layer="1"] .layers-copy h3{grid-column:1;grid-row:1;font-size:21px;line-height:1.4;margin:0;align-self:center;white-space:pre-wrap}
.q-demo .layers-copy h3[hidden]{display:none}
.q-demo .layers-copy .layers-count{grid-column:1;grid-row:2;margin-top:8px}
.q-demo .layers-copy .layers-navigation{grid-column:2;grid-row:1 / 3;align-self:center;gap:24px;margin:0;padding:0;border:0;white-space:nowrap}
.q-demo .layers-copy .layers-hint{display:none}
.q-demo .layers-stage .layers-scene{grid-column:1;grid-row:2;width:100%;height:100%;min-height:0}
.q-demo .layers-world{top:0}
.q-demo .brain-legend{font:16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:0;color:#e6e6e4;margin:0;text-align:center}
.q-demo .plane-data>.plane-label{visibility:hidden}
@media(max-width:700px){.q-demo .guide-preview>.layers-stage{grid-template-rows:160px minmax(0,1fr);gap:12px}.q-demo .layers-stage .layers-copy{padding:14px 16px;column-gap:12px}.q-demo .layers-copy h3,.q-demo[data-layer="0"] .layers-copy h3,.q-demo[data-layer="1"] .layers-copy h3{grid-column:1 / 3;font-size:16px;line-height:1.4}.q-demo .layers-copy .layers-navigation{grid-column:2;grid-row:2;gap:20px}.q-demo .layers-copy .layers-count{grid-column:1;grid-row:2;align-self:center;margin:0}.q-demo .layers-navigation button{font-size:11px}}
.q-demo[data-layer="3"] .layers-copy{background:transparent;border-color:transparent;box-shadow:none}
/* Layout styles must never reveal the layer stack during the opening tour. */
.q-demo .guide-preview>.layers-stage[hidden]{display:none}
.q-demo .terminal-brand{margin-bottom:20px}
.q-demo .guide-heading[hidden]{display:none}
.q-demo .guide-copy[hidden],.q-demo #qorqbot-abstraction .guide-spotlight[hidden]{display:none}
/* One dark review pane continues into the layer sequence. */
.q-demo .guide-copy.layer-copy{transition:none;z-index:12}
.q-demo .guide-copy.layer-copy h2{font-size:22px;line-height:1.4;margin-bottom:12px}
.q-demo .guide-copy.layer-copy .guide-progress{margin-bottom:12px}
.q-demo .guide-copy.layer-copy .guide-controls{margin-top:8px}
.q-demo .guide-copy.layer-copy .guide-controls button{padding:3px 0;min-height:24px}
@media(max-width:700px){.q-demo .guide-copy.layer-copy{padding:16px 20px}.q-demo .guide-copy.layer-copy h2{font-size:17px;line-height:1.4}}
.tour-finale{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px;box-sizing:border-box;opacity:0;z-index:15;pointer-events:none}
.tour-finale:not([inert]){pointer-events:auto}
.tour-finale h2{max-width:980px;margin:0;color:#292929;font:400 clamp(32px,4.6vw,64px)/1.2 Zen,system-ui;letter-spacing:-.035em}
.finale-byline{display:flex;align-items:center;justify-content:center;gap:8px;margin:30px 0 42px;color:#77736c;font:18px/1.5 Zen,system-ui}
.finale-byline img{width:34px;height:28px;object-fit:contain;margin-left:2px}
.finale-actions{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap}


.finale-actions button:disabled{cursor:not-allowed;opacity:.65}
.finale-actions a:focus-visible{outline:2px solid #70a3de;outline-offset:4px}
@media(max-width:700px){.tour-finale{padding:18px}.tour-finale h2{font-size:34px}.finale-byline{font-size:16px;margin:24px 0 30px}.finale-actions{gap:10px}}
/* Breathing room between the hero and the scroll tour. */
.q-demo{margin-top:clamp(80px,10vw,150px)}
.finale-actions.hero-action{justify-content:center;margin-top:0}
.finale-actions .booking{position:relative;inset:auto}
.demo-load-error{text-align:center;color:#77736c;padding:60px 20px}
.demo-load-error button{font:inherit;background:none;border:0;text-decoration:underline;cursor:pointer}
body.q-page>header{position:sticky;top:0;z-index:50;background:#faf8f4f5;backdrop-filter:blur(12px);border-bottom:1px solid #1a1a1a0a}
.tour-finale .finale-mascot{position:relative;inset:auto;flex:none;width:300px;height:300px;margin:0 0 20px;animation:none;z-index:auto}
.tour-finale h2{font-size:clamp(30px,4vw,56px)}
@media(max-width:700px){.tour-finale .finale-mascot{width:192px;height:192px;margin-bottom:16px}.tour-finale h2{font-size:30px}.tour-finale .finale-byline{margin:18px 0 24px}}
@media(max-height:760px) and (min-width:701px){.tour-finale .finale-mascot{width:200px;height:200px;margin-bottom:12px}.tour-finale h2{font-size:38px}.tour-finale .finale-byline{margin:15px 0 22px}}

/* Keep native scrolling, with a quiet scrollbar matching the page palette. */
html {
  scrollbar-width: thin;
  scrollbar-color: #96928b #f5f3ef;
}
@supports selector(::-webkit-scrollbar) {
  html { scrollbar-width: auto; scrollbar-color: auto; }
  html::-webkit-scrollbar { width: 10px; height: 10px; }
  html::-webkit-scrollbar-track { background: #f5f3ef; }
  html::-webkit-scrollbar-thumb {
    background: #96928b;
    border: 3px solid #f5f3ef;
    border-radius: 999px;
    min-height: 44px;
  }
  html::-webkit-scrollbar-thumb:hover { background: #605d57; }
  html::-webkit-scrollbar-thumb:active { background: #302e2a; }
  html::-webkit-scrollbar-corner { background: #f5f3ef; }
}
@media (forced-colors: active) {
  html { scrollbar-color: auto; }
}

.tour-finale h2{box-sizing:border-box;padding-inline:clamp(12px,3vw,44px)}

/* Click-through tour: page scrolling is independent of the presentation. */
.click-tour .guide-stage{position:relative;top:0!important}
.click-tour .tour-controls{display:flex;align-items:center;justify-content:center;gap:24px;padding:24px 12px 8px;position:relative;z-index:30}
.tour-controls button{font:inherit;font-size:14px;border:1px solid #292929;border-radius:999px;padding:11px 24px;background:#252525;color:#faf9f6;cursor:pointer;min-width:100px}
.tour-controls button:disabled{opacity:.35;cursor:default}
.tour-controls button:focus-visible{outline:2px solid #387eae;outline-offset:4px}
.tour-controls .tour-status{font-size:12px;color:#777;min-width:64px;text-align:center;font-variant-numeric:tabular-nums}
.click-tour .guide-spotlight{transition-duration:.7s}
.click-tour .guide-copy{transition-duration:.7s}
@media(prefers-reduced-motion:reduce){.click-tour .guide-spotlight,.click-tour .guide-copy{transition:none}}

/* Comparison version: scroll is the sole clock; no delayed CSS/WAAPI chase. */
.smooth-scroll-tour .guide-copy,
.smooth-scroll-tour #qorqbot-abstraction .guide-spotlight,
.smooth-scroll-tour .guide-track span{transition:none!important}
.smooth-scroll-tour .guide-copy{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(145deg,#303237f5,#1b1d21f5)}
.smooth-scroll-tour .architecture-plane{will-change:transform,opacity}
@media(max-width:700px){
  .smooth-scroll-tour .guide-copy{box-shadow:0 8px 24px #0004}
  .smooth-scroll-tour #qorqbot-abstraction .guide-spotlight{box-shadow:0 0 0 1200px #0305068a}
}

/* Only the two navigation buttons are visible; announce progress to readers. */
.click-tour .tour-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;min-width:0}
.click-tour .guide-preview{cursor:pointer}

/* End the page at the final tour frame, without an empty scroll tail. */
body.q-page.q-type > main{padding-bottom:0}

/* Reserve the hint within the existing stage, without a trailing section. */
.q-demo .guide-stage{padding-top:28px}
.tour-scroll-hint{position:absolute;top:0;left:0;right:0;margin:0;text-align:center;font:12px/18px system-ui,sans-serif;letter-spacing:.025em;color:#77736c;pointer-events:none}
.tour-scroll-hint span{margin-left:6px}