.co-dbf{margin-inline:auto;max-width:1180px}.co-dbf .co-page_intro{margin-left:0;text-align:left}.co-dbf--viewport{margin-top:min(10vh, 60px);margin-bottom:min(10vh, 60px);margin-inline:auto}@media (min-width:768px){.co-dbf--viewport{align-items:flex-end}}.co-dbf--skip_wrap{background-color:var(--g-bg-body);border-bottom:1px solid var(--g-text-color);text-align:right;margin-inline:auto;opacity:0;pointer-events:none;position:sticky;top:0;transition:opacity .5s ease;z-index:30}.co-dbf--skip_wrap.is-active{opacity:1;pointer-events:auto}.co-dbf--skip{align-items:center;display:inline-flex;font-weight:600;gap:15px;padding-top:15px;padding-bottom:15px;text-transform:uppercase}.co-dbf--list{position:relative;padding-top:min(30vh, 150px);padding-bottom:min(30vh, 150px)}.co-dbf--feature{margin-top:max(10vh, 120px);margin-bottom:max(10vh, 120px);transition:all .3s ease;opacity:.7}.co-dbf--feature.is-current{opacity:1;transform:translateX(10px)}.co-dbf--feature.is-adjacent{opacity:.5}.co-dbf--feature.is-distant{opacity:.15}.co-dbf--feature.is-extra-distant{opacity:.05}.co-dbf--feature__first{margin-top:0}.co-dbf--feature__last{margin-bottom:0}@media (min-width:768px){.co-dbf--feature{padding-right:73px}}.co-dbf--feature_desc{font-size:1.2em}.co-dbf--indicator{height:43px;position:absolute;right:0;top:0;transition:transform .4s cubic-bezier(.4,0,.2,1);width:43px;will-change:transform}@media (max-width:767.9px){.co-dbf--indicator{display:none}}.co-dbf--screenshots_wrap{border-bottom:5px solid var(--g-bg-secondary);bottom:-10vh;display:inline-block;max-width:100%;padding:0 min(30px, 2vw);position:sticky;z-index:10}@media (max-width:767.9px){.co-dbf--screenshots_wrap{width:100%}}@media (min-width:768px){.co-dbf--screenshots_wrap{bottom:calc(50vh - 257px)}}.co-dbf--screenshot_frame{aspect-ratio:.7265;border-top-right-radius:50px;border-top-left-radius:50px;border:16px solid var(--g-btn-bg-color);border-bottom:none;display:block;max-width:100%;overflow:hidden;position:relative;width:514px}@media (max-width:767.9px){.co-dbf--screenshot_frame{margin-inline:auto}}.co-dbf--screenshot{aspect-ratio:.7265;height:100%;left:0;margin:0;object-fit:cover;position:absolute;top:0;transition:opacity .4s cubic-bezier(.4,0,.2,1),visibility .4s cubic-bezier(.4,0,.2,1);width:100%;opacity:0;visibility:hidden;pointer-events:none}.is-loaded .co-dbf--screenshot{opacity:0;visibility:visible;pointer-events:none}.co-dbf--screenshot.is-active{opacity:1;visibility:visible;pointer-events:none}