/* Line 16131 (surface-hidden-tricks-b-r1): the edit bay's sizes, captions and Shorts card. Google-path tokens only
   (public/css/ns-tokens.css), 375 px first; the caption swatches show each style's own colours. */
.vc-styles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.vc-styles button { display: grid; gap: 6px; justify-items: center; min-height: 72px; padding: 8px 4px; border: 1px solid var(--ns-border-strong); border-radius: var(--ns-radius); background: var(--ns-card); color: var(--ns-text); cursor: pointer; }
.vc-styles button[aria-checked="true"] { border-color: var(--ns-gold); box-shadow: 0 0 0 2px var(--ns-gold-glow); }
.vc-swatch { display: grid; width: 56px; height: 36px; border-radius: 6px; background: #3c4043; place-items: end center; padding-bottom: 3px; overflow: hidden; }
.vc-swatch--middle { place-items: center; padding: 0; }
.vc-swatch--top { place-items: start center; padding: 3px 0 0; }
.vc-swatch > span { font-weight: 800; font-size: 15px; line-height: 1; padding: 1px 4px; border-radius: 3px; color: #fff; }
.vc-label { font-size: 12px; line-height: 1.25; text-align: center; color: var(--ns-text-2); }
.vc-opts { flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.eb[data-level="expert"] .vc-opts.eb-exp { display: flex; }
.vc-go { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.vc-go button { flex: 1 1 160px; }
.vc-progress { margin: 12px 0 0; font-size: 15px; }
.vc-results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.vc-results li { display: grid; gap: 6px; font-size: 14px; }
.vc-results video { width: 100%; max-height: 320px; border-radius: var(--ns-radius); background: #000; }
@media (min-width: 720px) {
    .vc-styles { grid-template-columns: repeat(9, minmax(0, 1fr)); }
}