@layer components{@layer base{.sequencer{--sequencer-ink:var(--color-heading);--sequencer-ink-muted:var(--color-text-secondary);--sequencer-eyebrow:var(--color-eyebrow);--sequencer-divider:var(--color-divider);--sequencer-progress:var(--color-brand-indigo-600);--sequencer-toggle-bg:oklch(0% 0 0/.04);--sequencer-toggle-bg-hover:oklch(0% 0 0/.08);--sequencer-inactive-opacity:.4;--sequencer-crossfade-duration:var(--duration-slower);--sequencer-crossfade-ease:var(--ease-in-out);--sequencer-collapse-duration:var(--duration-base);color:var(--sequencer-ink)}.sequencer__divider{inline-size:100%;block-size:var(--border-width-thin);background-color:var(--sequencer-divider);margin-block-end:var(--grid-gap)}.sequencer__grid{gap:inherit;grid-template-columns:1fr;display:grid}.sequencer__content{gap:var(--component-space-2xl);flex-direction:column;min-inline-size:0;display:flex}.sequencer__head{gap:var(--component-space-md);flex-direction:column;display:flex}.sequencer__eyebrow{color:var(--sequencer-eyebrow)}.sequencer__headline{color:var(--sequencer-ink)}.sequencer__list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.sequencer__item{flex-direction:column;display:flex}.sequencer__bar{inline-size:100%;block-size:var(--border-width-thin);background-color:var(--sequencer-divider);position:relative;overflow:clip}.sequencer__bar-fill{background-color:var(--sequencer-progress);block-size:100%;inline-size:100%;transform:scaleX(var(--progress,0));transform-origin:0;display:block}[dir=rtl] .sequencer__bar-fill{transform-origin:100%}.sequencer__row{gap:var(--component-space-sm);justify-content:space-between;align-items:flex-start;display:flex}.sequencer__heading-wrap{min-inline-size:0;font:inherit;flex:auto;margin:0}.sequencer__heading-button{inline-size:100%;padding-block:var(--component-space-md);color:inherit;text-align:start;appearance:none;cursor:pointer;background:0 0;border:0;padding-inline:0;display:block}.sequencer__heading{color:var(--sequencer-ink);opacity:var(--sequencer-inactive-opacity);transition:opacity var(--duration-fastest) linear;display:block}.sequencer__toggle{inline-size:var(--space-7x);block-size:var(--space-7x);color:var(--color-brand-indigo-600);appearance:none;cursor:pointer;background-color:var(--sequencer-toggle-bg);border:0;flex:none;place-items:center;margin-block-start:calc(var(--component-space-md) - .125rem);padding:0;display:none;position:relative}.sequencer__toggle-icon{inline-size:var(--space-5x);block-size:var(--space-5x);position:absolute;inset:50% auto auto 50%;translate:-50% -50%}.sequencer__toggle-icon--pause{display:none}.sequencer__panel{opacity:1;transition:grid-template-rows var(--sequencer-collapse-duration) var(--ease-in-out), opacity var(--sequencer-collapse-duration) var(--ease-in-out);grid-template-rows:minmax(0,1fr);display:grid;overflow:clip}.sequencer__panel[data-collapsed=true]{pointer-events:none;opacity:0;grid-template-rows:minmax(0,0fr)}.sequencer__panel-inner{gap:var(--component-space-md);max-inline-size:var(--grid-content-max-3col);min-block-size:0;flex-direction:column;padding-block-end:var(--component-space-md);display:flex}.sequencer__panel-image,.sequencer__panel-video{block-size:auto;inline-size:100%;display:block}.sequencer__body{color:var(--sequencer-ink-muted)}.sequencer__cta{align-self:flex-start}.sequencer__media-stack{inline-size:100%;display:none;position:relative}.sequencer__stack-media{opacity:0;inline-size:100%;transition:opacity var(--sequencer-crossfade-duration) var(--sequencer-crossfade-ease);grid-area:1/1}.sequencer__stack-media:not([data-active=true]){pointer-events:none}.sequencer__stack-media[data-active=true]{opacity:1}.sequencer__stack-image{block-size:auto;inline-size:100%}.sequencer__stack-media[data-media=video]{transition:opacity var(--sequencer-crossfade-duration) var(--sequencer-crossfade-ease), display var(--sequencer-crossfade-duration) allow-discrete;display:none}.sequencer__stack-media[data-media=video][data-active=true]{display:block}@starting-style{.sequencer__stack-media[data-media=video][data-active=true]{opacity:0}}.sequencer__stack-video{inline-size:100%}}@layer variants{@media (width>=768px){.sequencer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.sequencer__head{gap:var(--component-space-lg);padding-inline-end:var(--component-space-lg)}.sequencer__panel-image,.sequencer__panel-video{display:none}.sequencer__media-stack{grid-template-rows:auto;grid-template-columns:1fr;display:grid}}@media (width>=1024px){.sequencer__head{gap:var(--component-space-xl)}.sequencer[data-image-position=left] .sequencer__content{grid-column:2}.sequencer[data-image-position=left] .sequencer__media-stack{grid-area:1/1}}.sequencer__item--active .sequencer__heading{opacity:1}.sequencer__item--active .sequencer__toggle{display:inline-grid}}@layer states{.sequencer--playing .sequencer__item--active .sequencer__toggle-icon--play{display:none}.sequencer--playing .sequencer__item--active .sequencer__toggle-icon--pause{display:block}@media (hover:hover){.sequencer__heading-button:hover .sequencer__heading{opacity:1}.sequencer__toggle:hover{background-color:var(--sequencer-toggle-bg-hover)}}.sequencer__heading-button:focus-visible,.sequencer__toggle:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset)}@media (prefers-reduced-motion:reduce){.sequencer__stack-media,.sequencer__panel{transition:none}}}}