.styles-module__YM2qTG__transition{z-index:1;pointer-events:none;transform:translate3d(calc(1% * calc(-50 + var(--x,0))), calc(1% * calc(-50 + var(--y,0))), 0);opacity:var(--opacity,1);will-change:transform;--calc-aspect-ratio:var(--aspect-ratio,calc(16 / 9));width:var(--col-width);height:calc(var(--col-width) * var(--calc-aspect-ratio));transition:transform .4s,opacity .4s,width .4s,height .4s,aspect-ratio .4s;position:absolute;top:50%;left:50%}.styles-module__YM2qTG__transition :-webkit-full-screen-ancestor{will-change:auto}@media (min-width:1176px){.styles-module__YM2qTG__transition{transform:translate3d(calc(1% * calc(-50 + var(--desktop-x,var(--x,0)))), calc(1% * calc(-50 + var(--desktop-y,var(--y,0)))), 0);--calc-aspect-ratio:var(--desktop-aspect-ratio,var(--aspect-ratio,calc(16 / 9)))}}@supports (aspect-ratio:auto){.styles-module__YM2qTG__transition{height:auto;aspect-ratio:var(--calc-aspect-ratio)}}.styles-module__YM2qTG__width__base{--calc-width:var(--width,1);--calc-width-padding:var(--width-padding,0);--calc-border-radius:var(--border-radius,14);border-radius:calc(1px * calc(var(--calc-border-radius) + var(--calc-width-padding) / 2));width:calc(100% * var(--calc-width) + calc(1px * var(--calc-width-padding)));height:calc(var(--col-width) * var(--calc-width) / var(--calc-aspect-ratio) + calc(1px * var(--calc-width-padding)));transition:opacity .4s,width .4s,height .4s,border-radius .4s,transform;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(1)}@media (min-width:1176px){.styles-module__YM2qTG__width__base{--calc-width:var(--desktop-width,var(--width,1));--calc-border-radius:var(--desktop-border-radius,var(--border-radius,14))}}.styles-module__YM2qTG__width{pointer-events:auto;overflow:hidden}.styles-module__YM2qTG__width__offscreen{transition:opacity .4s,width .4s,height .4s,aspect-ratio .4s,transform 0s .4s;transform:translate(-50%,-50%)scale(0)}.styles-module__YM2qTG__code--player-width{padding:0}@media (min-width:1176px){.styles-module__YM2qTG__code--player-width{padding-top:24px}.styles-module__YM2qTG__code--player-width:before{content:"";background-image:var(--traffic-url);background-position:10px 8px;background-repeat:no-repeat;background-size:34px 8px;height:25px;position:absolute;top:0;left:0;right:0}}.styles-module__YM2qTG__code--player-props{height:100%;padding:20px;overflow-x:scroll}.styles-module__YM2qTG__code--player-props>*{white-space:nowrap}.styles-module__YM2qTG__code--player-props .comment{--tw-text-opacity:1;color:rgb(130 140 151/var(--tw-text-opacity,1))}.styles-module__YM2qTG__code--player-props .comment.html:before{content:"<!-- "}.styles-module__YM2qTG__code--player-props .comment.html:after{content:" --> "}:is(.styles-module__YM2qTG__code--player-props .prop,.styles-module__YM2qTG__code--player-props .value){line-height:24px}.styles-module__YM2qTG__code--player-props a{--tw-text-opacity:1;color:rgb(203 117 255/var(--tw-text-opacity,1))}.styles-module__YM2qTG__code--player-props .token{--tw-text-opacity:1;color:rgb(203 117 255/var(--tw-text-opacity,1))}.styles-module__YM2qTG__code--player-props .value{--tw-text-opacity:1;color:rgb(203 117 255/var(--tw-text-opacity,1))}:is(.styles-module__YM2qTG__code--player-props .prop,.styles-module__YM2qTG__code--player-props .indent){white-space:nowrap;margin-left:2ch;display:block}@media (min-width:1176px){:is(.styles-module__YM2qTG__code--player-props .prop,.styles-module__YM2qTG__code--player-props .indent){margin-left:3ch}}.styles-module__YM2qTG__code--prop-label-input{width:calc(calc(1ch * var(--characters)) + .6em);font:inherit;appearance:none;background:0 0;border:1px solid;margin:0;padding:0 .25em;line-height:calc(24px - .5em);display:inline}.styles-module__YM2qTG__accessory-container{pointer-events:none;opacity:0;transition:transform .4s ease-in-out,opacity .4s ease-in-out}.styles-module__YM2qTG__accessory-container__visible{opacity:1;pointer-events:auto;transform:var(--transform-visible)}.styles-module__YM2qTG__select-example--example-container{justify-content:flex-start;margin-left:0;margin-right:5px;display:flex;position:absolute;bottom:calc(100% + 5px);left:0;right:0;overflow-x:scroll}@media (min-width:1176px){.styles-module__YM2qTG__select-example--example-container{margin-left:14px;top:calc(20px + 100%);bottom:auto}}.styles-module__YM2qTG__select-example--example-container__is-sandbox{bottom:calc(185% + 5px)}@media (min-width:1176px){.styles-module__YM2qTG__select-example--example-container__is-sandbox{bottom:auto}}.styles-module__YM2qTG__select-example--button{white-space:nowrap;text-align:center;cursor:pointer;flex:0 auto}.styles-module__YM2qTG__select-example--button:first-child{margin-left:0}.styles-module__YM2qTG__select-example--button:hover span{text-underline-offset:.25em;text-decoration:underline}.styles-module__YM2qTG__select-example--button__active:hover span{text-decoration:none}.styles-module__YM2qTG__player--width{display:flex}.styles-module__YM2qTG__player--width mux-player{--media-object-fit:contain;width:100%}.styles-module__YM2qTG__hover-preview--container{width:150px;bottom:60px;left:calc(var(--video-progress) * 100%);position:absolute;transform:translate(-50%)}@supports (left:clamp(95px, 20%, 100% - 95px)){.styles-module__YM2qTG__hover-preview--container{left:clamp(95px, calc(var(--video-progress) * 100%), 100% - 95px)}}.styles-module__YM2qTG__hover-preview--image-container{font-size:14px;font-family:var(--media-font-family,helvetica neue, segoe ui, roboto, arial, sans-serif);background-color:#fff;border-radius:5px;flex-direction:column;align-items:center;padding:5px;display:flex;position:relative}.styles-module__YM2qTG__hover-preview--image-container:after{content:"";border:8.5px solid #0000;border-top:10px solid #fff;border-bottom-width:0;width:0;height:0;position:absolute;top:100%;left:50%;transform:translate(-50%)}.styles-module__YM2qTG__data--image-container{filter:drop-shadow(0 0 .5rem #0000001a);width:35%;position:absolute;bottom:10%;right:8%}@media (min-width:1176px){.styles-module__YM2qTG__data--image-container{top:20%;right:15%}}.styles-module__YM2qTG__keyboard--svg{filter:drop-shadow(0 0 .5rem #0000001a);width:35%;position:absolute;bottom:100%;left:50%;transform:translate(-50%,33%)}@media (min-width:1176px){.styles-module__YM2qTG__keyboard--svg{bottom:0;transform:translate(-50%,75%)}}.styles-module__YM2qTG__hide-mobile{display:none}@media (min-width:784px) and (min-height:768px){.styles-module__YM2qTG__hide-mobile{display:block}}.styles-module__YM2qTG__hide-desktop{display:block}@media (min-width:784px) and (min-height:768px){.styles-module__YM2qTG__hide-desktop{display:none}}.styles-module__YM2qTG__section-list{margin-bottom:50px;padding-bottom:1px;overflow:hidden}@supports (overscroll-behavior-y:contain){.styles-module__YM2qTG__section-list{scroll-behavior:smooth}}.styles-module__YM2qTG__section-list--item-button{white-space:nowrap;text-align:center;cursor:pointer;width:100%;margin-bottom:-1px;display:block;position:relative;overflow:hidden}.styles-module__YM2qTG__section-list--item-button:before{content:"";z-index:-1;transform-origin:0;width:100%;height:100%;transform:scaleX(var(--progress));opacity:0;background:#fff;position:absolute;top:0;left:0}.styles-module__YM2qTG__section-list--item-button__active:before{opacity:1}.styles-module__YM2qTG__section-list--descriptions{margin:0 0 20px;padding:0;list-style-type:none;position:relative}@media (min-width:1176px){.styles-module__YM2qTG__section-list--descriptions{margin-bottom:0;margin-left:50px}}.styles-module__YM2qTG__demo-list--dl{scroll-behavior:smooth;flex:0 1px;margin:0 0 10px;padding:0;overflow:hidden}@media not all and (min-resolution:.001dpcm){@supports ((-webkit-appearance:none)){.styles-module__YM2qTG__demo-list--dl{scroll-behavior:auto}}}@media (min-width:1176px){.styles-module__YM2qTG__demo-list--dl{margin-bottom:0}}.styles-module__YM2qTG__demo-list--dl:before,.styles-module__YM2qTG__demo-list--dl:after{content:"";z-index:1;background-image:linear-gradient(to bottom, var(--tw-gradient-stops));--tw-gradient-from:#e2e4dd var(--tw-gradient-from-position);--tw-gradient-to:#e2e4dd00 var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to);--tw-gradient-to-position:80%;width:100%;height:20px;display:block}.styles-module__YM2qTG__demo-list--dl:before{position:sticky;top:-1px}.styles-module__YM2qTG__demo-list--dl:after{position:sticky;bottom:-1px;transform:rotate(180deg)}.styles-module__YM2qTG__demo-list--icon{width:2em;height:2em}.styles-module__YM2qTG__demo-list--description-group{appearance:none;font:inherit;text-align:left;cursor:pointer;background:0 0;border:none;width:100%;margin:0;padding:20px 0;display:block;position:relative}.styles-module__YM2qTG__demo-list--description-group dd{--tw-text-opacity:1;width:calc(100% - 10px - 2em);height:0;color:rgb(0 0 0/var(--tw-text-opacity,1));align-items:center;margin-top:0;margin-bottom:0;display:flex;overflow:hidden}.styles-module__YM2qTG__demo-list--description-group:before,.styles-module__YM2qTG__demo-list--description-group:after{content:"";width:100%;height:1px;position:absolute;top:0;left:0}.styles-module__YM2qTG__demo-list--description-group:before{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.styles-module__YM2qTG__demo-list--description-group:after{--tw-bg-opacity:1;background-color:rgb(172 57 242/var(--tw-bg-opacity,1));transform-origin:0;opacity:0;pointer-events:none;transform:scaleX(var(--progress))}.styles-module__YM2qTG__demo-list--description-group:hover dt{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));font-weight:700}.styles-module__YM2qTG__demo-list--description-group dt{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));font-weight:400;transition:transform .15s ease-in-out 50ms;transform:translate(0,0)}.styles-module__YM2qTG__demo-list--description-group dd{opacity:0;pointer-events:none;transition:height .15s ease-in-out 50ms,opacity .15s ease-in-out 50ms,transform .15s ease-in-out 50ms;transform:translate(0,0)}.styles-module__YM2qTG__demo-list--description-group .styles-module__YM2qTG__demo-list--icon{opacity:.5;transition:transform .2s ease-in-out,opacity .2s ease-in-out;transform:translate(-50%,calc(10px + .25em))scale(0)}.styles-module__YM2qTG__demo-list--description-group__active:after{opacity:1;pointer-events:auto}.styles-module__YM2qTG__demo-list--description-group__active dt{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity,1));font-weight:700;transition:transform .2s ease-in-out;transform:translate(calc(10px + 2em))}.styles-module__YM2qTG__demo-list--description-group__active dd{opacity:1;pointer-events:auto;height:calc(var(--mobile-height,0) * 1.5em);transition:height .2s ease-in-out,opacity .2s ease-in-out,transform .2s ease-in-out;transform:translate(calc(10px + 2em))}@media (min-width:504px){.styles-module__YM2qTG__demo-list--description-group__active dd{height:1.5em}}@media (min-width:1176px){.styles-module__YM2qTG__demo-list--description-group__active dd{height:calc(var(--desktop-height,0) * 1.5em)}}.styles-module__YM2qTG__demo-list--description-group__active .styles-module__YM2qTG__demo-list--icon{opacity:1;pointer-events:auto;transition:transform .15s ease-in-out 50ms,opacity .2s ease-in-out .1s;transform:translateY(calc(10px + .25em))scale(1)}.styles-module__YM2qTG__sandbox--after-player{height:calc(var(--col-width) * 9 / 16 + var(--col-width) * 3 / 4 + 168px);position:relative}.styles-module__YM2qTG__sandbox--after-player:after{content:"";--tw-bg-opacity:1;background-color:rgb(86 94 103/var(--tw-bg-opacity,1));width:100%;height:70%;position:absolute;bottom:0;left:0}@media (min-width:1176px){.styles-module__YM2qTG__sandbox--after-player:after{display:none}}