/* Veloriq Studio – base element styles. Kept tiny; per-document CSS is generated separately. */
.vq-doc{display:flow-root;width:100%}
.vq-doc *,.vq-doc *::before,.vq-doc *::after{box-sizing:border-box}
.vq-el{min-width:0}
.vq-container{display:flex;flex-direction:column}
.vq-heading{margin:0;font-family:var(--vq-font-heading,inherit);line-height:1.1;text-wrap:balance}
.vq-text{line-height:1.6;max-width:100%}
.vq-text>:first-child{margin-top:0}.vq-text>:last-child{margin-bottom:0}
.vq-image{display:block;max-width:100%;height:auto}
.vq-button{display:inline-flex;align-items:center;justify-content:center;gap:.5em;align-self:flex-start;padding:.85em 1.4em;border-radius:var(--vq-radius-pill,999px);background:var(--vq-color-accent,#4b3bff);color:var(--vq-color-accent-contrast,#fff);font-weight:600;line-height:1.2;text-decoration:none;transition:filter .2s ease,transform .2s ease}
.vq-button:hover{filter:brightness(1.08)}
.vq-button:focus-visible{outline:3px solid var(--vq-color-accent,#4b3bff);outline-offset:3px}
@media (prefers-reduced-motion:reduce){.vq-button{transition:none}}
/* Veloriq Motion: pre-hide entrance targets only while the runtime is starting (see print_motion_head). */
@media (prefers-reduced-motion:no-preference){.vq-motion-pending [data-vq-enter=self],.vq-motion-pending [data-vq-enter=children]>*{visibility:hidden}}
.vq-split{display:inline-block}
.vq-sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* Linked components render inside a wrapper that carries the component's root styles. */
.vq-component{display:flex;flex-direction:column;min-width:0}
/* Style-state transitions animate only paint/compositor properties (duration set per element). */
.vq-el{transition-property:color,background-color,border-color,opacity,translate,rotate,scale,filter,box-shadow,text-decoration-color}
/* Icons in buttons */
.vq-icon{flex:none;transition:translate .3s cubic-bezier(.16,1,.3,1)}
.vq-button:hover .vq-icon{translate:2px -2px}