.video-popup{--video-popup-surface:var(--wp--preset--color--blackblue);--video-popup-edge:color-mix(in srgb,var(--wp--preset--color--white) 12%,transparent);--video-popup-radius:22px;--video-popup-chip:color-mix(in srgb,var(--wp--preset--color--white) 4%,transparent);--video-popup-chip-edge:color-mix(in srgb,var(--wp--preset--color--white) 14%,transparent);--video-popup-chip-ink:var(--wp--preset--color--white);--video-popup-chip-radius:12px;--video-popup-chip-border:1px;--video-popup-chip-weight:600;--video-popup-chosen:var(--wp--preset--gradient--royalblue-to-cyan);--video-popup-chosen-ink:var(--wp--preset--color--dark);--video-popup-arrow:var(--wp--preset--color--cyan);--video-popup-arrow-chosen:var(--video-popup-chosen-ink);--video-popup-bar:linear-gradient(90deg,var(--wp--preset--color--royalblue),var(--wp--preset--color--cyan));--video-popup-caption-font:inherit;--video-popup-caption-size:0.96875rem;--video-popup-frame-ratio:9/12;--video-popup-frame-radius:0;background:var(--video-popup-surface);border:1px solid var(--video-popup-edge);border-radius:var(--video-popup-radius);box-shadow:0 40px 90px -24px rgba(0,0,0,.85);box-sizing:border-box;color:var(--wp--preset--color--white);font-size:1rem;line-height:1.4;overflow:hidden;i{display:block;font-style:normal}.video-popup__frame{aspect-ratio:var(--video-popup-frame-ratio);background:var(--wp--preset--color--darkestblue);border-radius:var(--video-popup-frame-radius);overflow:hidden;position:relative;&:after{background:linear-gradient(180deg,rgba(5,7,13,.35),rgba(5,7,13,0) 25%,rgba(5,7,13,0) 55%,rgba(5,7,13,.85));content:"";inset:0;pointer-events:none;position:absolute}}.video-popup__image{display:block;height:100%;object-fit:cover;width:100%}.video-popup__tag{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(5,7,13,.6);border-radius:999px;color:var(--wp--preset--color--light);font-size:.65625rem;font-weight:700;left:12px;letter-spacing:.06em;line-height:1.4;margin:0;padding:4px 9px;position:absolute;text-transform:uppercase;top:12px;z-index:2}.video-popup__close{align-items:center;background:rgba(5,7,13,.55);border-radius:50%;display:flex;font-size:1rem;height:26px;justify-content:center;line-height:1;right:12px;top:10px;width:26px}.video-popup__caption,.video-popup__close{color:var(--wp--preset--color--white);position:absolute;z-index:2}.video-popup__caption{bottom:18px;font-family:var(--video-popup-caption-font);font-size:var(--video-popup-caption-size);font-weight:700;left:14px;line-height:1.3;margin:0;right:14px;text-shadow:0 2px 12px rgba(0,0,0,.5)}.video-popup__progress{background:hsla(0,0%,100%,.2);bottom:0;display:block;height:3px;left:0;position:absolute;right:0;z-index:2;i{background:var(--video-popup-bar);height:100%;width:var(--video-popup-progress,62%)}}.video-popup__chips{display:flex;flex-direction:column;gap:7px;padding:12px}.video-popup__chip{align-items:center;background:var(--video-popup-chip);border:var(--video-popup-chip-border) solid var(--video-popup-chip-edge);border-radius:var(--video-popup-chip-radius);box-sizing:border-box;color:var(--video-popup-chip-ink);display:flex;font:inherit;font-size:.84375rem;font-weight:var(--video-popup-chip-weight);gap:10px;justify-content:space-between;line-height:1.35;margin:0;padding:10px 13px;text-align:left;width:100%;&:after{color:var(--video-popup-arrow);content:"\2192";flex:none}&.is-selected{background:var(--video-popup-chosen);border-color:transparent;color:var(--video-popup-chosen-ink);&:after{color:var(--video-popup-arrow-chosen)}}}}.wp-block-lohko-video-showcase{--video-showcase-paper:color-mix(in srgb,var(--wp--preset--color--paleblue) 25%,var(--wp--preset--color--white));--video-showcase-grey:color-mix(in srgb,var(--wp--preset--color--lilyblue) 55%,var(--wp--preset--color--white));--video-showcase-grey-dark:color-mix(in srgb,var(--wp--preset--color--lilyblue) 85%,var(--wp--preset--color--white));height:560px;position:relative;i{display:block;font-style:normal}.video-showcase__glow{border-radius:50%;filter:blur(64px);pointer-events:none;position:absolute;z-index:0}.video-showcase__glow--blue{background:radial-gradient(circle,color-mix(in srgb,var(--wp--preset--color--royalblue) 50%,transparent),transparent 70%);height:340px;right:0;top:-40px;width:340px}.video-showcase__glow--cyan{background:radial-gradient(circle,color-mix(in srgb,var(--wp--preset--color--cyan) 35%,transparent),transparent 70%);bottom:-20px;height:260px;left:0;width:260px}.video-showcase__site{background:var(--video-showcase-paper);border:1px solid var(--wp--preset--color--lilyblue);border-radius:18px;box-shadow:0 32px 16px rgba(0,0,0,.12),0 16px 8px rgba(0,0,0,.12),0 8px 4px rgba(0,0,0,.12);left:0;overflow:hidden;position:absolute;top:30px;width:82%;z-index:1}.video-showcase__chrome{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--lilyblue) 45%,var(--wp--preset--color--white));display:flex;gap:6px;height:32px;padding:0 12px;i{background:var(--wp--preset--color--lilyblue);border-radius:50%;flex-shrink:0;height:9px;width:9px}}.video-showcase__url{align-items:center;background:var(--wp--preset--color--white);border-radius:6px;color:var(--wp--preset--color--slateblue);display:flex;flex-grow:1;font-size:.6875rem;height:20px;margin-left:10px;min-width:0;overflow:hidden;padding:0 10px;white-space:nowrap}.video-showcase__page{box-sizing:border-box;display:flex;flex-direction:column;gap:12px;height:380px;padding:24px}.video-showcase__line{background:var(--video-showcase-grey);border-radius:4px;height:8px;&:first-child{background:var(--video-showcase-grey-dark);height:12px}}.video-showcase__tiles{display:grid;gap:10px;grid-template-columns:repeat(3,1fr);margin:6px 0;i{background:color-mix(in srgb,var(--wp--preset--color--lilyblue) 50%,var(--wp--preset--color--paleblue));border-radius:10px;height:90px}}.video-popup{bottom:0;position:absolute;right:0;width:270px;z-index:3}.video-showcase__float{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--blackblue) 94%,transparent);border:1px solid color-mix(in srgb,var(--wp--preset--color--white) 10%,transparent);border-radius:14px;bottom:56px;box-shadow:0 32px 16px rgba(0,0,0,.12),0 16px 8px rgba(0,0,0,.12),0 8px 4px rgba(0,0,0,.12);display:flex;gap:12px;left:-12px;padding:14px 16px;position:absolute;z-index:4}.video-showcase__float-icon{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--royalblue) 14%,transparent);border-radius:10px;color:var(--wp--preset--color--cyan);display:flex;flex-shrink:0;height:34px;justify-content:center;width:34px;svg{height:20px;width:20px}}.video-showcase__float-copy{display:flex;flex-direction:column;gap:2px}.video-showcase__float-title{color:var(--wp--preset--color--white);font-size:.8125rem;font-weight:700;line-height:1.35}.video-showcase__float-text{color:var(--wp--preset--color--greyblue);font-size:.75rem;line-height:1.4}.video-showcase__bubble{align-items:center;background:var(--wp--preset--color--blackblue);border-radius:999px;bottom:18px;box-shadow:0 18px 40px -12px rgba(0,0,0,.6);display:flex;gap:10px;padding:6px 8px 6px 6px;position:absolute;right:18px}.video-showcase__avatar{border-radius:50%;box-shadow:0 0 0 2px var(--wp--preset--color--cyan);display:block;flex-shrink:0;height:44px;overflow:hidden;width:44px;img{display:block;height:100%;object-fit:cover;width:100%}}.video-showcase__bubble-text{color:var(--wp--preset--color--lilyblue);display:flex;flex-direction:column;font-size:.75rem;line-height:1.3}.video-showcase__bubble-action{color:var(--wp--preset--color--white)}.video-showcase__play{align-items:center;background:var(--wp--preset--gradient--royalblue-to-cyan);border-radius:50%;color:var(--wp--preset--color--dark);display:flex;flex-shrink:0;height:30px;justify-content:center;width:30px;svg{height:13px;width:13px}}.video-showcase__label{align-items:center;background:color-mix(in srgb,var(--wp--preset--color--royalblue) 14%,transparent);border-radius:999px;box-sizing:border-box;color:var(--wp--preset--color--cyan);display:inline-flex;font-size:.75rem;font-weight:700;height:24px;padding:0 10px;position:absolute;white-space:nowrap}&.is-layout-publish{height:500px;.video-showcase__site{top:20px;width:60%}.video-showcase__page{height:300px}.video-showcase__closed{left:0;top:350px}.video-showcase__open{right:0;top:0}.video-popup{--video-popup-caption-size:0.84375rem;bottom:auto;top:40px;width:230px}.video-popup__chip{font-size:.78125rem;padding:8px 11px}}}@media (max-width:991px){.wp-block-lohko-video-showcase{height:520px;margin-inline:auto;max-width:520px;width:100%;.video-showcase__site{width:100%}.video-popup{right:50%;translate:50% 0}.video-showcase__float{display:none}&.is-layout-publish{max-width:560px;.video-showcase__site{width:60%}.video-popup{right:0;translate:none}}}}@media (max-width:640px){.wp-block-lohko-video-showcase{height:460px;.video-popup{width:250px}&.is-layout-publish{display:flex;flex-direction:column;gap:16px;height:auto;.video-popup,.video-showcase__label,.video-showcase__site{left:auto;position:relative;right:auto;top:auto;width:100%}.video-showcase__label{align-self:flex-start;width:auto}.video-showcase__open{order:2}.video-popup{margin:0 auto;order:3;width:250px}}}}