.product-tour{--tour-seg:0px;--header-h:74px;--hero-shadow:0 2.8px 2.2px #00000009, 0 6.7px 5.3px #0000000c, 0 12.5px 10px #0000000f, 0 22.3px 17.9px #00000012, 0 41.8px 33.4px #00000016, 0 100px 80px #0000001f}.dark .product-tour{--hero-shadow:0 0 0 transparent}.tour-frame>figure{box-shadow:var(--glass-highlight), var(--hero-shadow)}.tour-mock{container:frame/size}.tour-cell{display:grid}.tour-cell>*{grid-area:1/1;align-self:start}.tour-seg{height:var(--tour-seg)}.tour-tail{height:calc(var(--tour-seg) * .5)}.tour-cell{view-timeline:--tour-pin block}@keyframes tour-fill{0%{transform:scaleX(0)}13.5%{transform:scaleX(.25)}44%{transform:scaleX(.5)}74.6%{transform:scaleX(.75)}to{transform:scaleX(1)}}@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){html[data-js]:not([data-motion=off]) .product-tour{--tour-seg:75svh}html[data-js]:not([data-motion=off]) .tour-stage{top:var(--header-h);height:calc(100svh - var(--header-h));position:sticky}html[data-js]:not([data-motion=off]) .tour-body{height:100%;padding-bottom:24px}html[data-js]:not([data-motion=off]) .tour-frame{flex:1 1 0;justify-items:start;min-height:0;display:grid}html[data-js]:not([data-motion=off]) .tour-frame>figure{aspect-ratio:2;width:auto;max-width:100%;height:100%}html[data-js]:not([data-motion=off]) .tour-caption{grid-template-rows:auto auto;grid-template-columns:minmax(0,1fr) repeat(4,auto);gap:10px 4px;display:grid}html[data-js]:not([data-motion=off]) .tour-caption:before{content:"";border:1px solid var(--glass-edge);background:var(--glass);box-shadow:var(--glass-highlight);border-radius:999px;grid-area:1/2/2/-1;margin:-4px}html[data-js]:not([data-motion=off]) .tour-list,html[data-js]:not([data-motion=off]) .tour-list>li{grid-area:1/1/3/-1;grid-template-columns:subgrid;grid-template-rows:subgrid;gap:inherit;pointer-events:none;display:grid}html[data-js]:not([data-motion=off]) .tour-list>li>button{pointer-events:auto;grid-row:1}html[data-js]:not([data-motion=off]) .tour-list>li:first-child>button{grid-column:2}html[data-js]:not([data-motion=off]) .tour-list>li:nth-child(2)>button{grid-column:3}html[data-js]:not([data-motion=off]) .tour-list>li:nth-child(3)>button{grid-column:4}html[data-js]:not([data-motion=off]) .tour-list>li:nth-child(4)>button{grid-column:5}html[data-js]:not([data-motion=off]) .tour-list>li>.tour-text{grid-area:1/1/3/2;align-self:center;padding-right:32px;transition:opacity .2s ease-out}html[data-js]:not([data-motion=off]) .tour-list>li[data-current=false]>.tour-text{opacity:0}html[data-js]:not([data-motion=off]) .tour-caption>[data-tour-action]{grid-area:2/2/3/-1;justify-self:end}@supports (animation-timeline:view()){html[data-js]:not([data-motion=off]) .tour-caption:after{content:"";background:var(--text);opacity:.55;transform-origin:0;pointer-events:none;height:2px;animation:linear both tour-fill;animation-timeline:--tour-pin;animation-range:contain calc(0% - var(--header-h)) contain 100%;border-radius:1px;grid-area:1/2/2/-1;align-self:end;margin:0 18px -3px;transform:scaleX(0)}}}@media (min-width:1024px) and (max-width:1279px) and (min-height:640px) and (prefers-reduced-motion:no-preference){html[data-js]:not([data-motion=off]) .tour-caption{padding-right:52px}}