.player-frame:has(>.recording-playback){border-radius:14px}.recording-playback{container-type:inline-size;background:#101211;color:#fff;border-radius:inherit;overflow:hidden;-webkit-font-smoothing:antialiased;outline:1px solid rgba(0,0,0,.1)}.recording-controller{width:100%;height:100%;--media-primary-color: #fff;--media-secondary-color: transparent;--media-control-hover-background: #ffffff1f;--media-control-background: transparent;--media-control-padding: 12px;--media-control-height: 28px;--media-font-family: "IBM Plex Sans", sans-serif;--media-font-size: 15px;--media-range-track-height: 5px;--media-range-thumb-width: 14px;--media-range-thumb-height: 14px;--media-range-bar-color: #c7b5ff;--media-range-track-background: #ffffff38;--media-focus-ring-color: #c7b5ff}.recording-controller video{width:100%;height:100%;min-width:0;min-height:0}.recording-controls{align-self:end;width:100%;box-sizing:border-box;padding:48px 20px 12px;background:linear-gradient(transparent,#0009 45%,#000e)}.recording-controls media-time-range{display:flex;width:100%;--media-control-padding: 15px 0;--media-range-track-height: 7px}.recording-controls media-control-bar{display:flex;align-items:center;gap:4px}.recording-controls media-control-bar>:is(media-play-button,media-seek-backward-button,media-seek-forward-button,media-mute-button,media-fullscreen-button,media-playback-rate-menu-button){min-width:52px;min-height:52px;border-radius:10px;transition:scale .15s ease-out,background-color .15s ease-out}.recording-controls media-time-display{font-variant-numeric:tabular-nums;white-space:nowrap;padding-inline:8px}.recording-control-spacer{flex:1}.recording-volume-slider{width:80px;--media-control-padding: 15px 2px}.recording-controls media-playback-rate-menu-button{min-width:60px;font-weight:600;font-variant-numeric:tabular-nums}.recording-rate-menu{--media-menu-background: #202321f5;--media-menu-border-radius: 12px;--media-menu-item-hover-background: #ffffff14;--media-menu-item-checked-background: #c7b5ff24;--media-menu-item-focus-shadow: inset 0 0 0 2px #c7b5ff;margin-bottom:10px;min-width:130px;max-height:calc(100% - 96px);border:1px solid #ffffff1f;border-radius:12px;box-shadow:0 2px 6px #0003,0 12px 32px #0005}.recording-rate-menu::part(menu-item){border-radius:6px;padding:12px 18px}.recording-rate-menu::part(checked){color:#c7b5ff}.recording-player-message{position:absolute;inset:0;z-index:3;opacity:1!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px;text-align:center;background:#101211;font-size:14px;line-height:1.5}.recording-player-message span{color:#b6bbb6;max-width:320px}.recording-player-message button{border:1px solid #ffffff38;border-radius:7px;min-height:44px;padding:9px 14px;background:#ffffff14;color:#fff;cursor:pointer}.recording-player-message button:focus-visible{outline:2px solid #c7b5ff;outline-offset:3px}@container (max-width: 560px){.recording-volume-slider{display:none}.recording-controls{padding:36px 8px 6px}.recording-controls media-control-bar{gap:0}.recording-controller{--media-control-padding: 10px;--media-control-height: 24px;--media-font-size: 13px}}@container (max-width: 480px){.recording-skip{display:none}.recording-rate-menu{--media-menu-layout: row;--media-menu-item-checked-indicator-display: none;--media-menu-gap: 0;width:calc(100% - 16px);min-width:0}.recording-rate-menu::part(menu-item){flex:1;justify-content:center;padding:12px 3px;font-size:12px}.recording-controls media-time-display{padding-inline:4px}}@media(prefers-reduced-motion:reduce){.recording-controller{--media-menu-transition-in: none;--media-menu-transition-out: none}}.recording-controller[data-error=true] :is(.recording-controls,.recording-rate-menu,.recording-big-play,media-loading-indicator){display:none!important}.recording-controller:has(media-playback-rate-menu-button[aria-expanded=true]) .recording-controls{--media-tooltip-display: none}.recording-big-play{position:absolute;top:50%;left:50%;translate:-50% -50%;width:96px;height:96px;border-radius:50%;color:#171918;--media-primary-color: #171918;--media-control-background: #fff;--media-control-hover-background: #f1ecff;--media-control-height: 42px;--media-control-padding: 25px;box-shadow:0 0 0 1px #0000000d,0 2px 5px #0002,0 8px 24px #0003;transition:transform .16s ease,box-shadow .16s ease}.recording-big-play:not([mediapaused]){display:none}.recording-center-icons{position:relative;display:block;width:var(--media-control-height);height:var(--media-control-height)}.recording-center-icons svg{position:absolute;inset:0;width:100%;height:100%;opacity:1;scale:1;filter:blur(0);transition:opacity .3s cubic-bezier(.2,0,0,1),scale .3s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1)}.recording-big-play:not([mediaended]) .recording-replay-icon,.recording-big-play[mediaended] .recording-play-icon{opacity:0;scale:.25;filter:blur(4px)}.recording-big-play:active{transform:scale(.96)}.recording-big-play:focus-visible{outline:3px solid #c7b5ff;outline-offset:10px}@media(hover:hover){.recording-big-play:hover{box-shadow:0 0 0 1px #0000000d,0 3px 8px #0002,0 12px 28px #0004}}@container (max-width: 560px){.recording-controls media-control-bar>:is(media-play-button,media-seek-backward-button,media-seek-forward-button,media-mute-button,media-fullscreen-button,media-playback-rate-menu-button){min-width:44px;min-height:44px}.recording-big-play{width:72px;height:72px;--media-control-height: 32px;--media-control-padding: 20px}}@media(prefers-reduced-motion:reduce){.recording-big-play{transition:none}}.recording-controls media-control-bar>:is(media-play-button,media-seek-backward-button,media-seek-forward-button,media-mute-button,media-fullscreen-button,media-playback-rate-menu-button):active{scale:.96}@media(prefers-reduced-motion:reduce){.recording-center-icons svg,.recording-controls media-control-bar>*{transition:none}.recording-big-play:active{transform:none}.recording-controls media-control-bar>:active{scale:1}}