/* Shared compact style controls for Motion and Carousel. */
.style-picker{margin-bottom:24px;border-bottom:1px solid #d4d4cf;padding-bottom:18px}
.style-picker-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.style-picker-field{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.style-picker-field label{font-size:14px}.style-picker-field p{font-size:13px;color:#63635e;margin:0}
.style-select{font:inherit;font-size:15px;min-width:200px;max-width:100%;height:42px;padding:8px 36px 8px 12px;background:#fff;color:#171817;border:1px solid #c8cbc2;border-radius:0;cursor:pointer}
.style-select:focus-visible{outline:2px solid #517234;outline-offset:3px}
.style-picker-heading button{font:inherit;font-size:12px;border:0;background:none;text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:4px 0;white-space:nowrap}
.style-select:disabled{cursor:wait;opacity:.65}
@media(max-width:760px){.style-picker-heading{align-items:flex-start}.style-picker-field{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;min-width:0;flex:1}.style-select{min-width:0;width:100%}.style-picker-field p{grid-column:1/-1}.style-picker-heading button{white-space:normal;max-width:100px;text-align:right;padding-top:12px}}
.workspace{grid-template-columns:minmax(0,1fr) 338px;gap:40px}.motion-main{min-width:0}
#motion-main-preview{background:#e6e6e0;padding:12px;margin-bottom:0}
#motion-main-preview .preview-wrap{width:100%;max-width:none;min-width:0;margin:0 auto;padding:0;background:none;flex-direction:column;align-items:center}
/* Before module measurement, contain the initial frame in the same center and
   viewport budget. The small short-screen fallback remains scroll-reachable. */
#motion-main-preview:not([data-canvas-fit=true]){--studio-initial-frame-height:max(20dvh,calc(100dvh - var(--studio-header-height,72px) - 72px))}
#motion-main-preview:not([data-canvas-fit=true]) .preview-stage{width:min(100%,calc(var(--studio-initial-frame-height) * var(--video-ratio,4 / 5)));height:auto;max-width:100%;min-width:0;min-height:0;flex:none;margin:0 auto;aspect-ratio:var(--video-ratio,4 / 5);background:#000}
@media(max-width:760px){#motion-main-preview:not([data-canvas-fit=true]){--studio-initial-frame-height:max(20dvh,calc(100dvh - var(--studio-header-height,64px) - 112px))}}
/* The working frame fits the viewport; discovery cards keep their own sizes. */
#motion-main-preview[data-canvas-fit=true] .preview-stage{width:var(--studio-canvas-width);height:var(--studio-canvas-height);max-width:100%;min-width:0;min-height:0;flex:none;margin:0 auto}
#motion-main-preview[data-canvas-fit=true] .preview-stage>:is(canvas,video){display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}
#motion-main-preview .preview-caption{width:100%;max-width:none;margin:18px 0 0;padding:0;font-size:13px;color:var(--ui-muted,#676a6f)}
#motion-main-preview .preview-caption>div{width:100%;min-width:0;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px}
#motion-main-preview #effect-title{min-width:0;overflow-wrap:anywhere}
#motion-main-preview .preview-caption :is(#effect-title,#effect-meta){font:inherit;color:inherit}
#motion-main-preview #effect-meta{text-align:right;white-space:nowrap}
@media(max-width:760px){#motion-main-preview .preview-caption{font-size:11px}}

.motion-main .effects{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px 16px}.motion-main .effect-name{font-size:14px}.motion-main .effect-description{font-size:12px}
@media(max-width:1100px){.motion-main .effects{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.workspace{display:flex;flex-direction:column}.motion-main{width:100%}.studio{width:100%}.motion-main .effects{grid-template-columns:repeat(2,minmax(0,1fr))}#motion-main-preview{padding:12px}}

#motion-main-preview .preview-stage{max-width:none}
.journey-preview-stage{background:#e6e6e0;border-color:#d4d4cf}.journey-preview-edit canvas,.slide-card canvas{border-radius:0}
@media(min-width:761px){.template-workspace{grid-template-columns:minmax(0,1fr) 338px;gap:40px}}

/* Match the Banner toolbar: compact selectors, then the browse action. */

/* Motion examples flow directly from the main preview. */
#motion-library > .section-line{border-top:0}