/* The approved composition is shared with the lab's preview scene. */
:is(.feedback-story__scene,.preview-scene){position:relative;isolation:isolate}
.prototype-diagonal :is(.feedback-story__scene,.preview-scene)::before{content:'';position:absolute;inset:0;z-index:-1;background:#626a65;clip-path:polygon(var(--feedback-diagonal-top,44.75%) 0,100% 0,100% 100%,var(--feedback-diagonal-bottom,27.75%) 100%)}
.prototype-diagonal .feedback-cycle{--cycle-ink:#eff2eb;--cycle-line:#e1e6df;--cycle-upgrade:#a1d09c;--lab-active:#d5efd0;--lab-caption:#e6ece2;--layout-field-x:7}
@media(min-width:851px) and (max-width:1200px){.prototype-diagonal .feedback-cycle{--layout-field-x:5.5}}
.prototype-diagonal .feedback-cycle.lab-compact-input{--layout-field-x:10}
#hardware-feedback .tl-feature__copy p + p{margin-top:1em}
@media(min-width:851px){
 .prototype-diagonal .feedback-cycle{translate:52px 24px;--layout-field-inset:3}
 .prototype-diagonal #hardware-feedback .tl-feature__copy p{max-width:min(100%,30vw)}
}
@media(max-width:850px){
 .prototype-diagonal #hardware-feedback .tl-feature__copy{padding-bottom:24px}
 .prototype-diagonal .feedback-cycle{--layout-field-x:0}
 .prototype-diagonal :is(.feedback-story__scene,.preview-scene)::before{clip-path:polygon(0 var(--lab-panel-mobile-top,45%),100% calc(var(--lab-panel-mobile-top,45%) + 18px),100% 100%,0 100%)}
}

.feedback-story{position:relative;min-width:0;margin-inline:calc(-1 * var(--page-gutter));height:300svh;overflow:visible}
.feedback-story__scene{position:sticky;top:0;display:flex;flex-direction:column;justify-content:center;min-height:100svh;background:#ecebe6}
.tl-page .feedback-story #hardware-feedback{flex:none;width:auto;margin-inline:var(--page-gutter);scroll-margin-top:var(--nav-h,69px)}
.feedback-story #hardware-feedback .reveal{opacity:1;transform:none;transition:none}
.feedback-story--reduced{height:auto}
@media(max-width:850px){
 .feedback-story__scene{top:var(--feedback-sticky-offset,var(--feedback-sticky-top,69px));min-height:calc(100svh - var(--feedback-sticky-top,69px))}
 .tl-page .feedback-story #hardware-feedback{padding-block:0;gap:1.5rem}
}
@media(prefers-reduced-motion:reduce){
 .feedback-story{height:auto}
 .feedback-story__scene{position:relative;top:0}
}