@layer layout{.interaction-study__media{display:grid;gap:var(--study-gap);overflow:hidden;background:var(--study-specimen-background);color:var(--study-specimen-color)}.interaction-study__media video{display:block;inline-size:100%;aspect-ratio:16 / 9;object-fit:cover;border-radius:var(--study-control-radius)}.interaction-study__media-labels{display:flex;gap:var(--study-small-gap);align-items:baseline}.interaction-study__media-labels strong:before{content:"";display:inline-block;inline-size:.55em;aspect-ratio:1;margin-inline-end:var(--study-small-gap);border:1px solid currentColor;border-radius:50%;vertical-align:.05em}.interaction-study__media:has(video:playing) [data-media-playing]:before{background:var(--study-geometry-accent);border-color:var(--study-border-color)}.interaction-study__media:has(video:not(:muted)) [data-media-muted]:before{background:var(--study-geometry-accent);border-color:var(--study-border-color)}.interaction-study__interest{position:relative;display:grid;gap:var(--study-small-gap)}.interaction-study__interest button{inline-size:fit-content;color:var(--study-card-color)}.interaction-study__instruction{color:var(--study-card-muted-color)}.interaction-study__preview button{justify-self:start}.interaction-study__preview{position:fixed;inset:auto var(--study-gap) var(--study-gap);z-index:1;inline-size:min(22rem,calc(100vw - 2 * var(--study-gap)));margin-inline:auto;translate:0;padding:var(--study-gap);color:var(--study-specimen-color);background:var(--study-specimen-background);border:var(--study-border-width) var(--study-border-style) var(--study-border-color);border-radius:var(--study-control-radius);box-shadow:var(--study-shadow)}.interaction-study__preview:not([popover]){display:none}.interaction-study__preview[popover]:popover-open{display:grid;gap:var(--study-small-gap)}[data-interest-preview].is-interest-open{display:grid;gap:var(--study-small-gap)}.interaction-study__field-label{color:var(--study-card-muted-color)}.interaction-study__sizing-input{inline-size:18rem;max-inline-size:100%;justify-self:start;resize:none;overflow-wrap:anywhere;border-color:var(--study-border-color)}@supports (field-sizing: content){.primitive-study .interaction-study__sizing-input{field-sizing:content;inline-size:auto;min-inline-size:12ch;max-inline-size:100%}}.interaction-study__columns{display:flex;flex-wrap:wrap;gap:var(--study-small-gap);max-inline-size:100%;padding:var(--study-small-gap);border:var(--study-border-width) var(--study-border-style) var(--study-border-color);border-radius:var(--study-control-radius)}@supports (column-wrap: wrap) and (column-height: 5rem) and (column-width: 7rem){.interaction-study__columns{display:block;column-width:7rem;column-height:5rem;column-gap:var(--study-gap);column-wrap:wrap}}.interaction-study__token{display:block;break-inside:avoid;margin-block-end:var(--study-small-gap);padding:var(--study-small-gap);color:var(--study-card-color);background:var(--study-control-background);border-radius:var(--study-control-radius)}.primitive-study:has([name=card-style][value=primary]:checked) .interaction-study__variant-shell{--variant: primary}.primitive-study:has([name=card-style][value=featured]:checked) .interaction-study__variant-shell{--variant: featured}.interaction-study__variant-shell{--variant: default;container-type:normal}.interaction-study__variant{display:grid;gap:var(--study-small-gap);padding:var(--study-gap);background:var(--study-control-background);color:var(--study-card-color);border:var(--study-border-width) var(--study-border-style) var(--study-border-color);border-radius:var(--study-radius);box-shadow:var(--study-shadow)}.interaction-study__variant :is(p,h3){margin:0}.interaction-study__variant p,.interaction-study__variant span{color:var(--study-card-muted-color)}.interaction-study__variant a{color:var(--study-card-color)}@container style(--variant: primary){.interaction-study__variant h3{color:var(--study-specimen-color)}.interaction-study__variant{border-color:var(--study-border-color)}.interaction-study__variant{background:var(--study-specimen-background);color:var(--study-specimen-color)}.interaction-study__variant :is(p,span){color:var(--study-specimen-color)}}@container style(--variant: featured){.interaction-study__variant h3{font-weight:var(--study-title-weight);color:var(--study-geometry-accent)}}.interaction-study__variant.is-primary h3{color:var(--study-specimen-color)}.interaction-study__variant.is-primary{border-color:var(--study-border-color)}.interaction-study__variant.is-primary{background:var(--study-specimen-background);color:var(--study-specimen-color)}.interaction-study__variant.is-primary :is(p,span){color:var(--study-specimen-color)}.interaction-study__variant.is-featured h3{font-weight:var(--study-title-weight)}.interaction-study__markers{display:flex;gap:var(--study-small-gap)}.interaction-study__markers a{text-decoration:none;min-inline-size:2.5rem;padding:var(--study-small-gap);border-radius:var(--study-control-radius);text-align:center;color:var(--study-card-color);background:var(--study-control-background)}.interaction-study__markers a.is-current,.interaction-study__markers a:target-current{color:var(--study-specimen-color);background:var(--study-specimen-background)}.interaction-study__track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:var(--study-small-gap);overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-inline:contain}.interaction-study__track section{min-inline-size:0;min-block-size:8rem;padding:var(--study-gap);scroll-snap-align:start;background:var(--study-control-background);border-radius:var(--study-control-radius)}.interaction-study__track :is(h3,p){margin:0}.interaction-study__track section p{margin-block-start:var(--study-small-gap);color:var(--study-card-muted-color)}.interaction-study__anchor-stage{position:relative;block-size:16rem;border-radius:var(--study-control-radius);background:var(--study-control-background)}.interaction-study__anchor-track{block-size:100%;overflow:auto;overscroll-behavior:contain;border-radius:inherit}.interaction-study__anchor-canvas{position:relative;inline-size:300%;block-size:48rem}.interaction-study__anchor-position{position:absolute;inset-inline-start:calc((100% - 2.5rem)/2);inset-block-start:calc((100% - 2.5rem)/2);inline-size:2.5rem}.primitive-study .interaction-study__anchor{anchor-name:--study-anchor;display:grid;place-items:center;padding:0;inline-size:2.5rem;block-size:2.5rem;background:var(--study-specimen-background);color:var(--study-specimen-color);border:0}.interaction-study__anchored-note{position:absolute;position-anchor:--study-anchor;position-area:top;position-try-fallbacks:flip-block,flip-inline;position-visibility:anchors-visible;margin:var(--study-small-gap);padding:var(--study-small-gap);inline-size:max-content;max-inline-size:min(10rem,calc(100% - 2 * var(--study-gap)));border-radius:var(--study-control-radius);border:var(--study-border-width) var(--study-border-style) var(--study-border-color);background:var(--study-specimen-background);color:var(--study-specimen-color);box-shadow:var(--study-shadow);text-align:center;pointer-events:none;z-index:1}.primitive-study[data-interaction-study=position-visibility] :is(input,select,button,[tabindex]):focus-visible{outline-color:var(--study-card-muted-color)}[data-fallback-position-note]{display:block;margin-block-start:var(--study-small-gap);color:var(--study-card-color)}@supports not (position-anchor: --study-anchor){.interaction-study__anchored-note{display:none}}@media(prefers-reduced-motion:reduce){.interaction-study__track{scroll-behavior:auto}}}@layer layout{.primitive-study>.interaction-study__anchor-stage{block-size:auto;min-block-size:16rem}}