.callout{gap:var(--space-1);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);border-left:3px solid var(--color-ink-soft);background:var(--color-canvas-alt);color:var(--color-ink);font-size:var(--font-size-sm);flex-direction:column;margin:0;display:flex}.callout-title{font-weight:var(--font-weight-bold)}.callout-warn{border-left-color:var(--color-amber);background:var(--color-amber-soft);color:var(--color-amber-deep)}.callout-tip{border-left-color:var(--color-positive);background:var(--color-positive-soft);color:var(--color-positive)}.scroll-fade[data-scroll-fade=end]{-webkit-mask-image:linear-gradient(to right, var(--color-ink) calc(100% - var(--space-8)), transparent);-webkit-mask-image:linear-gradient(to right, var(--color-ink) calc(100% - var(--space-8)), transparent);mask-image:linear-gradient(to right, var(--color-ink) calc(100% - var(--space-8)), transparent)}.scroll-fade[data-scroll-fade=start]{-webkit-mask-image:linear-gradient(to left, var(--color-ink) calc(100% - var(--space-8)), transparent);-webkit-mask-image:linear-gradient(to left, var(--color-ink) calc(100% - var(--space-8)), transparent);mask-image:linear-gradient(to left, var(--color-ink) calc(100% - var(--space-8)), transparent)}.scroll-fade[data-scroll-fade=both]{-webkit-mask-image:linear-gradient(to right, transparent, var(--color-ink) var(--space-8), var(--color-ink) calc(100% - var(--space-8)), transparent);-webkit-mask-image:linear-gradient(to right, transparent, var(--color-ink) var(--space-8), var(--color-ink) calc(100% - var(--space-8)), transparent);mask-image:linear-gradient(to right, transparent, var(--color-ink) var(--space-8), var(--color-ink) calc(100% - var(--space-8)), transparent)}