/* Browser-preview-only stabilization layer.
   It deliberately loads after the production plugin styles, so the real
   interface stays intact while native browser scrollbars and compositor
   artefacts that do not exist in CEP are removed. */

html.qwix-web-preview,
html.qwix-web-preview body.qwix-web-demo {
  color-scheme: dark;
}

/* Keep scrolling functional without letting scrollbar gutters appear after
   delayed layout work. The changing gutter was moving every page sideways
   by a few pixels at the end of its entrance animation. */
html.qwix-web-preview body.qwix-web-demo .v120-content > .page,
html.qwix-web-preview body.qwix-web-demo #v124SliderCard,
html.qwix-web-preview body.qwix-web-demo #v124CustomSliderCard,
html.qwix-web-preview body.qwix-web-demo #presetGrid,
html.qwix-web-preview body.qwix-web-demo .preset-icons-card,
html.qwix-web-preview body.qwix-web-demo .graph-icons-card,
html.qwix-web-preview body.qwix-web-demo .graph-right-pane {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
html.qwix-web-preview body.qwix-web-demo .v120-content > .page::-webkit-scrollbar,
html.qwix-web-preview body.qwix-web-demo #v124SliderCard::-webkit-scrollbar,
html.qwix-web-preview body.qwix-web-demo #v124CustomSliderCard::-webkit-scrollbar,
html.qwix-web-preview body.qwix-web-demo #presetGrid::-webkit-scrollbar,
html.qwix-web-preview body.qwix-web-demo .preset-icons-card::-webkit-scrollbar,
html.qwix-web-preview body.qwix-web-demo .graph-icons-card::-webkit-scrollbar,
html.qwix-web-preview body.qwix-web-demo .graph-right-pane::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}
html.qwix-web-preview body.qwix-web-demo #v124SliderCard,
html.qwix-web-preview body.qwix-web-demo #v124CustomSliderCard {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Browser text is re-rasterized when a transformed layer is scaled, and that
   produced a one-frame size/colour shimmer as the animation class was removed.
   Preserve the real stagger and vertical travel, but use no scale or overshoot. */
@keyframes qwix-web-page-reveal-stable {
  0%   { opacity: 0; transform: translate3d(0, 18px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes qwix-web-local-reveal-stable {
  0%   { opacity: .72; transform: translate3d(0, 5px, 0); }
  100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
html.qwix-web-preview.qwix-motion-enabled body.qwix-web-demo #v120Content > .page.qwix-page-entering .qwix-page-reveal-item,
html.qwix-web-preview.qwix-motion-enabled body.qwix-web-demo .qwix-preset-page-reveal-item {
  animation-name: qwix-web-page-reveal-stable !important;
  animation-timing-function: cubic-bezier(.22,.76,.2,1) !important;
  transform-origin: center center !important;
  filter: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}
html.qwix-web-preview.qwix-motion-enabled body.qwix-web-demo .qwix-local-reveal-item,
html.qwix-web-preview.qwix-motion-enabled body.qwix-web-demo .qwix-saved-reveal-prepared,
html.qwix-web-preview.qwix-motion-enabled body.qwix-web-demo .qwix-saved-reveal-fallback {
  animation-name: qwix-web-local-reveal-stable !important;
  transform-origin: center center !important;
  filter: none !important;
  backface-visibility: visible !important;
  -webkit-backface-visibility: visible !important;
}

/* Do not allow child colour, shadow or size transitions to start halfway
   through a page entrance when the theme/layout observers finish. */
html.qwix-web-preview.qwix-motion-enabled body.qwix-web-demo .page.qwix-page-entering .qwix-page-reveal-item,
html.qwix-web-preview.qwix-motion-enabled body.qwix-web-demo .page.qwix-page-entering .qwix-page-reveal-item * {
  transition-property: none !important;
}

/* Match the final Peach Dusk graph colour from the first rendered frame. */
html.qwix-web-preview body.qwix-web-demo #graphGlow stop {
  stop-color: #ffc39b !important;
}

/* Iframes are visible immediately after their own content is ready; their
   internal entry animation is still triggered by the Saved subpage code. */
html.qwix-web-preview body.qwix-web-demo .qwix-refs-frame,
html.qwix-web-preview body.qwix-web-demo .qwix-comps-frame,
html.qwix-web-preview body.qwix-web-demo .qwix-fonts-frame {
  opacity: 1 !important;
  filter: none !important;
}

/* Feature-wheel surface: page selection is instant. The stable iframe stays
   mounted while only the active Qwix page changes, so no whole-panel reveal,
   scale, colour flash or delayed rerasterization can occur. */
html.qwix-surface-wheel,
html.qwix-surface-wheel body {
  --qwix-motion-page: 0ms !important;
  --qwix-motion-stagger: 0ms !important;
}

html.qwix-surface-wheel body #v120Content > .page,
html.qwix-surface-wheel body #v120Content > .page *,
html.qwix-surface-wheel body .qwix-local-reveal-item,
html.qwix-surface-wheel body .qwix-saved-reveal-prepared,
html.qwix-surface-wheel body .qwix-saved-reveal-fallback,
html.qwix-surface-wheel body .qwix-preset-page-reveal-item {
  animation-duration: 0ms !important;
  animation-delay: 0ms !important;
}

html.qwix-surface-wheel body #v120Content > .page.qwix-page-entry-prepared .qwix-page-reveal-item,
html.qwix-surface-wheel body #v120Content > .page.qwix-page-entering .qwix-page-reveal-item,
html.qwix-surface-wheel body .qwix-preset-page-reveal-item {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
  will-change: auto !important;
}

html.qwix-surface-wheel body #v120Content > #page-expressions.qwix-page-entry-prepared .qwix-page-reveal-item,
html.qwix-surface-wheel body #v120Content > #page-expressions.qwix-page-entering .qwix-page-reveal-item {
  opacity: var(--qwix-expression-rest-opacity, 1) !important;
}

/* Final web integration: standalone Saved HTML pages remain native nested
   browsing contexts. No transformed ancestor is allowed inside the plugin. */
html.qwix-web-preview body.qwix-web-demo #v120App {
  transform: none !important;
  perspective: none !important;
  filter: none !important;
  will-change: auto !important;
}
html.qwix-web-preview body.qwix-web-demo #saved-subpage-reference.active,
html.qwix-web-preview body.qwix-web-demo #saved-subpage-comps.active,
html.qwix-web-preview body.qwix-web-demo #saved-subpage-fonts.active {
  display: flex !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.qwix-web-preview body.qwix-web-demo .qwix-refs-frame-wrap,
html.qwix-web-preview body.qwix-web-demo .qwix-comps-frame-wrap,
html.qwix-web-preview body.qwix-web-demo .qwix-fonts-frame-wrap {
  display: block !important;
  flex: 1 1 auto !important;
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}
html.qwix-web-preview body.qwix-web-demo .qwix-refs-frame,
html.qwix-web-preview body.qwix-web-demo .qwix-comps-frame,
html.qwix-web-preview body.qwix-web-demo .qwix-fonts-frame {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  filter: none !important;
  border: 0 !important;
}