.tool-player {
text-align: left;
}
.tool-tabs {
display: flex;
gap: 28px;
margin: 0 0 26px;
border-bottom: 1px solid rgba(43, 41, 45, .14);
}
.tool-tab {
position: relative;
display: block;
padding: 0 0 12px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 16px;
font-weight: 700;
line-height: 1.3;
letter-spacing: -0.2px;
white-space: nowrap;
color: rgba(43, 41, 45, .6);
text-decoration: none;
transition: color .15s;
}
.tool-tab:hover,
.tool-tab:focus {
color: #2B292D;
text-decoration: none;
}
.tool-tab:focus-visible {
outline: 2px solid #0000ff;
outline-offset: 2px;
}
.tool-tab[aria-current="page"] {
color: #2B292D;
}
.tool-tab[aria-current="page"]::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 3px;
background: #00ffff;
}
@media (max-width: 575px) {
.tool-tabs {
gap: 20px;
}
.tool-tab {
font-size: 14px;
}
}
.tool-form {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
}
.tool-form .form-control {
flex: 1 1 320px;
min-width: 0;
height: 48px;
margin: 0;
}
.tool-form .btn {
flex: 0 0 auto;
padding: 12px 22px;
white-space: nowrap;
}
@media (max-width: 767px) {
.tool-form .form-control {
flex-basis: 100%;
}
.tool-form .btn {
flex: 1 1 auto;
}
.tool-form .btn-primary {
flex: 1 1 100%;
}
}
.tool-samples {
margin: 12px 0 0;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.tool-sample {
margin: 0 0 0 10px;
padding: 0;
border: 0;
background: none;
font: inherit;
font-weight: 700;
color: #0000ff;
cursor: pointer;
}
.tool-sample:hover,
.tool-sample:focus {
color: #0000ff;
text-decoration: underline;
text-underline-offset: 2px;
}
.tool-samples .tool-sample:first-of-type {
margin-left: 6px;
}
.tool-samples .tool-sample:only-child {
margin-left: 0;
}
.tool-captions {
margin: 10px 0 0;
}
.tool-captions .form-control {
height: 48px;
}
.tool-screen {
margin-top: 22px;
}
.tool-stage {
position: relative;
background: #000;
border-radius: 6px;
color: #fff;
overflow: hidden;
}
.tool-stage::before {
content: '';
display: block;
padding-top: 56.25%;
}
.tool-stage-inner {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px;
text-align: center;
}
.tool-stage-icon {
display: block;
width: 44px;
height: 44px;
margin: 0 0 16px;
opacity: .55;
}
.tool-stage-title {
margin: 0 0 6px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -0.4px;
line-height: 1.2;
}
.tool-stage-text {
max-width: 34em;
margin: 0;
font-size: 15px;
line-height: 1.6;
opacity: .72;
}
.tool-player .drop-highlight {
outline: 3px dashed #0000ff;
outline-offset: -3px;
}
.tool-player .video-player-container {
margin-top: 0;
}
.tool-player .plyr {
border-radius: 6px;
}
@media (max-width: 575px) {
.tool-stage-icon {
display: none;
}
.tool-stage-title {
font-size: 17px;
}
.tool-stage-text {
font-size: 14px;
}
}
.tool-steps {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 20px 32px;
margin: 30px 0 0;
padding: 0;
list-style: none;
counter-reset: tool-step;
}
@media (min-width: 768px) {
.tool-steps {
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 34px;
}
}
.tool-step {
position: relative;
min-width: 0;
padding-left: 44px;
counter-increment: tool-step;
}
.tool-step::before {
content: counter(tool-step);
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
border: 1px solid #2B292D;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 28px;
text-align: center;
color: #2B292D;
}
.tool-step-title {
margin: 4px 0 6px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.2px;
line-height: 1.3;
color: #2B292D;
}
.tool-step-text {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .72);
}
.tool-player--offer .tool-stage,
.tool-player--offer .plyr {
border-radius: 6px 6px 0 0;
}
.tool-offer {
padding: 24px 34px;
background: #FFEE00;
border-radius: 0 0 6px 6px;
}
.tool-offer-list {
margin: 0;
padding: 0;
list-style: none;
}
.tool-offer-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 16px 32px;
}
.tool-offer:not(.tool-offer--picked) .tool-offer-item + .tool-offer-item {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(43, 41, 45, .15);
}
.tool-offer-item--hidden {
display: none;
}
.tool-offer-copy {
flex: 1 1 420px;
min-width: 0;
}
.tool-offer-title {
margin: 0 0 6px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.4px;
line-height: 1.2;
color: #2B292D;
}
.tool-offer-text {
max-width: 44em;
margin: 0;
font-size: 15px;
line-height: 1.6;
color: rgba(43, 41, 45, .8);
}
.tool-offer-link {
flex: 0 0 auto;
white-space: nowrap;
}
@media (max-width: 575px) {
.tool-offer {
padding: 20px;
}
.tool-offer-title {
font-size: 19px;
}
.tool-offer-link {
flex-basis: 100%;
white-space: normal;
}
}
.section-main.tool-hero {
padding: 96px 0 40px;
}
@media (min-width: 992px) {
.section-main.tool-hero {
padding: 132px 0 56px;
}
}
.tool-hero .title {
margin-bottom: 16px;
text-wrap: balance;
}
.tool-hero-lead {
max-width: 36em;
margin: 0;
font-size: 18px;
line-height: 1.5;
color: #2B292D;
}
@media (min-width: 992px) {
.tool-hero-lead {
font-size: 20px;
}
}
.tool-stage-btn {
margin-top: 20px;
padding: 12px 28px;
}
.section.tool-camera {
padding-top: 40px;
}
.tool-camera .tool-stage::before {
display: none;
}
.tool-camera .tool-stage-inner {
position: static;
min-height: 300px;
padding: 40px 24px;
}
@media (min-width: 992px) {
.tool-camera .tool-stage-inner {
min-height: 440px;
}
}
.tool-camera-controls .form-control {
flex: 1 1 280px;
}
.tool-camera-controls[hidden],
.tool-camera-view[hidden],
.tool-stage[hidden] {
display: none;
}
.tool-camera-info:empty {
display: none;
}
.tool-camera-info b {
color: #2B292D;
}
.tool-camera-view video {
display: block;
width: 100%;
background: #000;
border-radius: 6px;
}
.tool-player--offer .tool-camera-view video {
border-radius: 6px 6px 0 0;
}
.tool-mic-view[hidden] {
display: none;
}
.tool-mic-view canvas {
display: block;
width: 100%;
height: 180px;
background: #000;
border-radius: 6px;
}
@media (min-width: 992px) {
.tool-mic-view canvas {
height: 260px;
}
}
.tool-player--offer .tool-mic-view canvas {
border-radius: 6px 6px 0 0;
}
.tool-mic-view audio {
display: block;
width: 100%;
padding: 12px 0;
background: #000;
}
.tool-mic-view audio[hidden] {
display: none;
}
.tool-offer--standalone {
margin-top: 40px;
border-radius: 6px;
}
.tool-tips {
padding: 64px 0;
background: #fff;
}
@media (min-width: 992px) {
.tool-tips {
padding: 108px 0;
}
}
.aop-cmp-table.tool-table {
min-width: 0;
max-width: 720px;
margin: 0 auto;
}
.aop-cmp-table.tool-table tbody th,
.aop-cmp-table.tool-table td {
width: auto;
}
.tool-tips .aop-cmp-foot {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.tool-tips .sec-h,
.faq .sec-h,
.fcta-h {
text-wrap: balance;
}
@media (max-width: 420px) {
.tool-hero .title {
font-size: 32px;
}
}
@media (max-width: 575px) {
.aop-cmp-table.tool-table th,
.aop-cmp-table.tool-table td {
padding: 12px 8px;
font-size: 14px;
}
}
.tool-offer-title {
text-wrap: balance;
}
.tool-recorder {
--rec-ink: #2B292D;
--rec-muted: rgba(43, 41, 45, .62);
--rec-line: rgba(43, 41, 45, .13);
--rec-line-strong: rgba(43, 41, 45, .3);
--rec-soft: #F0F1F5;
--rec-blue: #0000ff;
--rec-blue-tint: #F0F0FF;
--rec-focus: 0 0 0 3px rgba(0, 0, 255, .35);
--rec-red: #dc3545;
}
.section.tool-recorder {
padding-top: 24px;
}
.tool-recorder [hidden] {
display: none !important;
}
.tool-recorder .btn-sm {
padding: 7px 16px;
border-radius: 10px;
font-size: 15px;
}
.tool-recorder .btn-secondary:not(:disabled):not(.disabled):active,
.tool-recorder .btn-secondary:not(:disabled):not(.disabled).active {
background: #EDEEF3;
color: var(--rec-ink);
}
.tool-recorder .btn-secondary:focus {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .10), 0 4px 6px 0 rgba(0, 0, 0, .05);
}
.tool-recorder .btn-secondary:focus-visible {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .10), var(--rec-focus);
}
.rec-i {
display: block;
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.rec-alert {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px 14px;
margin: 0 0 16px;
padding: 12px 16px;
border: 1px solid var(--rec-line);
border-radius: 14px;
background: #fff;
}
.rec-alert-icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
color: var(--rec-blue);
}
.rec-alert-text {
flex: 1 1 260px;
margin: 0;
font-size: 15px;
line-height: 1.5;
color: var(--rec-ink);
}
.rec-alert-actions {
display: flex;
gap: 8px;
}
.rec {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 16px;
padding: 10px;
border: 1px solid rgba(43, 41, 45, .08);
border-radius: 20px;
background: #fff;
box-shadow: 0 1px 2px rgba(43, 41, 45, .05), 0 24px 48px -28px rgba(43, 41, 45, .35);
}
@media (min-width: 992px) {
.rec {
grid-template-columns: minmax(0, 1fr) 300px;
gap: 20px;
padding: 14px;
}
}
.rec-main,
.rec-panel {
min-width: 0;
}
.rec-main {
position: relative;
align-self: start;
}
.rec-panel {
display: flex;
flex-direction: column;
padding: 4px 6px 8px;
}
@media (min-width: 992px) {
.rec-panel {
padding: 6px 8px 6px 0;
}
}
.rec-stage {
position: relative;
overflow: hidden;
border-radius: 14px;
background: #000;
container-type: inline-size;
}
.rec-stage::before {
content: '';
display: block;
padding-top: 56.25%;
}
.rec-scene,
.rec-canvas,
.rec-video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.rec-canvas,
.rec-video,
.rec-count,
.rec-camtools,
.rec-trim {
display: none;
}
.rec[data-phase="preview"] .rec-canvas,
.rec[data-phase="countdown"] .rec-canvas,
.rec[data-phase="recording"] .rec-canvas,
.rec[data-phase="paused"] .rec-canvas,
.rec[data-phase="stopping"] .rec-canvas,
.rec[data-phase="done"] .rec-video,
.rec[data-phase="trimming"] .rec-video,
.rec[data-phase="done"] .rec-trim,
.rec[data-phase="trimming"] .rec-trim {
display: block;
}
.rec:not([data-phase="setup"]):not([data-phase="unsupported"]) .rec-scene {
display: none;
}
.rec-canvas {
background: #000;
touch-action: none;
}
.rec-canvas.is-over-bubble {
cursor: grab;
}
.rec-canvas.is-dragging {
cursor: grabbing;
}
.rec-video {
background: #000;
object-fit: contain;
}
.rec-scene {
background: #E9EBF3;
overflow: hidden;
}
.rec-slide {
position: absolute;
top: 7%;
left: 7%;
width: 86%;
height: 76%;
overflow: hidden;
border-radius: 10px;
background: #fff;
box-shadow: 0 1px 2px rgba(43, 41, 45, .06), 0 18px 40px -18px rgba(43, 41, 45, .35);
transition: opacity .25s ease, transform .25s ease;
}
.rec-slide-bar {
display: flex;
gap: 6px;
padding: 2.2% 3%;
border-bottom: 1px solid rgba(43, 41, 45, .08);
}
.rec-slide-bar i {
width: 9px;
height: 9px;
width: 1.1cqw;
height: 1.1cqw;
border-radius: 50%;
background: rgba(43, 41, 45, .15);
}
.rec-slide-body {
padding: 5% 7%;
}
.rec-slide-title {
margin: 0 0 3%;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 26px;
font-size: 3.6cqw;
font-weight: 800;
letter-spacing: -.5px;
line-height: 1.15;
color: var(--rec-ink);
}
.rec-slide-line {
display: block;
width: 58%;
height: 10px;
height: 1.25cqw;
margin: 0 0 2.2%;
border-radius: 99px;
background: rgba(43, 41, 45, .1);
}
.rec-slide-line--short {
width: 38%;
}
.rec-slide-chart {
display: flex;
align-items: flex-end;
gap: 3%;
width: 46%;
height: 90px;
height: 13cqw;
margin-top: 5%;
}
.rec-slide-chart i {
flex: 1 1 0;
border-radius: 4px 4px 0 0;
background: var(--rec-blue);
}
.rec-slide-chart i:nth-child(1) { height: 38%; }
.rec-slide-chart i:nth-child(2) { height: 56%; background: #00ffff; }
.rec-slide-chart i:nth-child(3) { height: 47%; }
.rec-slide-chart i:nth-child(4) { height: 78%; background: #00ffff; }
.rec-slide-chart i:nth-child(5) { height: 64%; background: #FFEE00; }
.rec-scene-cam {
position: absolute;
left: 74%;
top: 58%;
width: 18%;
height: 32%;
overflow: hidden;
border: 3px solid #fff;
border-radius: 50%;
background: #2B292D;
box-shadow: 0 12px 28px -10px rgba(43, 41, 45, .55);
cursor: grab;
touch-action: none;
transition: left .25s ease, top .25s ease, width .25s ease, height .25s ease, border-radius .25s ease, opacity .25s ease, transform .25s ease;
}
.rec-scene-cam:focus-visible {
outline: 3px solid var(--rec-blue);
outline-offset: 3px;
}
.rec-scene-cam.is-square {
border-radius: 16%;
}
.rec-scene-cam.is-dragging {
cursor: grabbing;
transition: none;
}
.rec-scene-cam img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 45% 30%;
pointer-events: none;
user-select: none;
}
.rec-scene-cam.is-mirrored img {
transform: scaleX(-1);
}
.rec[data-mode="screen"] .rec-scene-cam {
opacity: 0;
transform: scale(.4);
pointer-events: none;
}
.rec[data-mode="camera"] .rec-slide {
opacity: 0;
transform: scale(.96);
}
.rec[data-mode="camera"] .rec-scene-cam {
left: 0;
top: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
box-shadow: none;
cursor: default;
}
.rec-count {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
width: 128px;
height: 128px;
margin: -64px 0 0 -64px;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(0, 0, 0, .55);
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 56px;
font-weight: 700;
color: #fff;
pointer-events: none;
}
.rec[data-phase="countdown"] .rec-count {
display: flex;
}
.rec-count-ring {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.rec-count-ring circle {
fill: none;
stroke: #fff;
stroke-width: 5;
stroke-linecap: round;
stroke-dasharray: 339.3;
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: no-preference) {
.rec[data-phase="countdown"] .rec-count-ring circle {
animation: rec-ring 1s linear infinite;
}
}
@keyframes rec-ring {
to { stroke-dashoffset: 339.3; }
}
.rec-camtools {
position: absolute;
left: 12px;
bottom: 12px;
z-index: 2;
align-items: center;
gap: 4px;
padding: 4px;
border-radius: 14px;
background: rgba(24, 24, 30, .78);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.rec[data-phase="setup"][data-mode="screenCamera"] .rec-camtools,
.rec[data-phase="setup"][data-mode="camera"] .rec-camtools,
.rec[data-cam="1"][data-phase="preview"] .rec-camtools,
.rec[data-cam="1"][data-phase="countdown"] .rec-camtools,
.rec[data-cam="1"][data-phase="recording"] .rec-camtools,
.rec[data-cam="1"][data-phase="paused"] .rec-camtools {
display: flex;
}
.rec[data-mode="screen"] .rec-camtools {
display: none;
}
@media (max-width: 575px) {
.rec-camtools {
position: static;
width: -moz-fit-content;
width: fit-content;
margin: 8px auto 0;
}
}
.rec-camtools-label {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 36px;
color: rgba(255, 255, 255, .72);
}
.rec-camtools-size,
.rec-camtools-shape,
#rec-mirror {
position: relative;
margin-left: 5px;
}
.rec-camtools-size::before,
.rec-camtools-shape::before,
#rec-mirror::before {
content: '';
position: absolute;
top: 9px;
bottom: 9px;
left: -5px;
width: 1px;
background: rgba(255, 255, 255, .18);
}
.rec:not([data-phase="setup"]) .rec-camtools-label,
.rec[data-phase="setup"] #rec-camtoggle,
.rec[data-mode="camera"] #rec-camtoggle,
.rec[data-mode="camera"] .rec-camtools-size,
.rec[data-mode="camera"] .rec-camtools-shape {
display: none;
}
.rec.is-cam-hidden .rec-camtools-size,
.rec.is-cam-hidden .rec-camtools-shape {
opacity: .4;
pointer-events: none;
}
.rec-tool {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: #fff;
cursor: pointer;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rec-tool:hover,
.rec-tool[aria-pressed="true"] {
background: rgba(255, 255, 255, .16);
}
.rec-tool:focus-visible {
outline: 2px solid #fff;
outline-offset: 1px;
}
.rec-tool .is-off,
.rec-tool[aria-pressed="true"] .is-on,
.rec-tool.is-toggled .is-on,
.rec-btn .is-off,
.rec-btn.is-toggled .is-on {
display: none;
}
.rec-tool[aria-pressed="true"] .is-off,
.rec-tool.is-toggled .is-off,
.rec-btn.is-toggled .is-off {
display: block;
}
.rec-tool--light {
width: 40px;
height: 40px;
border: 1px solid var(--rec-line);
background: #fff;
color: var(--rec-ink);
}
.rec-tool--light:hover {
border-color: var(--rec-line-strong);
background: #fff;
}
.rec-tool--light:focus-visible {
outline-color: var(--rec-blue);
}
.rec-tool--light[aria-pressed="true"] {
border-color: rgba(220, 53, 69, .4);
background: #FDF1F2;
color: var(--rec-red);
}
.rec-tool--light.is-toggled {
border-color: rgba(0, 0, 255, .35);
color: var(--rec-blue);
}
.rec-tool--light.is-armed {
border-color: rgba(220, 53, 69, .45);
background: #FDF1F2;
color: var(--rec-red);
}
.rec-tool--stop,
.rec-tool--stop:hover {
width: 40px;
height: 40px;
background: var(--rec-red);
color: #fff;
}
.rec-seg {
display: inline-flex;
gap: 2px;
padding: 3px;
border-radius: 10px;
background: var(--rec-soft);
}
.rec-seg-option {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 42px;
margin: 0;
padding: 6px 10px;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
color: var(--rec-muted);
cursor: pointer;
transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.rec-seg-option.is-active {
background: #fff;
color: var(--rec-ink);
box-shadow: 0 1px 3px rgba(43, 41, 45, .16);
}
.rec-seg-option:focus-within {
outline: 2px solid var(--rec-blue);
outline-offset: 1px;
}
.rec-seg-option .rec-i {
width: 16px;
height: 16px;
}
.rec-seg--dark {
padding: 0;
background: transparent;
}
.rec-seg--dark .rec-seg-option {
min-width: 32px;
height: 36px;
padding: 0 8px;
border-radius: 10px;
color: rgba(255, 255, 255, .72);
}
.rec-seg--dark .rec-seg-option:hover {
color: #fff;
}
.rec-seg--dark .rec-seg-option.is-active {
background: rgba(255, 255, 255, .2);
color: #fff;
box-shadow: none;
}
.rec-seg--dark .rec-seg-option:focus-within {
outline-color: #fff;
}
.rec-pane {
display: none;
flex: 1 1 auto;
flex-direction: column;
gap: 12px;
}
.rec[data-phase="setup"] .rec-pane--setup,
.rec[data-phase="unsupported"] .rec-pane--setup,
.rec[data-phase="preview"] .rec-pane--live,
.rec[data-phase="countdown"] .rec-pane--live,
.rec[data-phase="recording"] .rec-pane--live,
.rec[data-phase="paused"] .rec-pane--live,
.rec[data-phase="stopping"] .rec-pane--live,
.rec[data-phase="done"] .rec-pane--done,
.rec[data-phase="trimming"] .rec-pane--done {
display: flex;
}
.rec-group {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.rec-label {
display: block;
margin: 0 0 6px;
padding: 0;
border: 0;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--rec-muted);
}
.rec-help {
margin: 0;
font-size: 13px;
line-height: 1.45;
color: var(--rec-muted);
}
.rec-help--center {
text-align: center;
}
.rec-modes {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
.rec-mode {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin: 0;
padding: 10px 4px 9px;
border: 1px solid var(--rec-line);
border-radius: 12px;
background: #fff;
font-size: 13px;
font-weight: 600;
line-height: 1.25;
text-align: center;
color: var(--rec-ink);
cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.rec-mode .rec-i {
width: 24px;
height: 24px;
color: var(--rec-muted);
transition: color .15s ease;
}
.rec-mode:hover {
border-color: var(--rec-line-strong);
}
.rec-mode.is-active {
border-color: var(--rec-blue);
background: var(--rec-blue-tint);
box-shadow: inset 0 0 0 1px var(--rec-blue);
}
.rec-mode.is-active .rec-i {
color: var(--rec-blue);
}
.rec-mode:focus-within {
outline: 2px solid var(--rec-blue);
outline-offset: 2px;
}
@supports selector(:has(*)) {
.rec-mode:focus-within,
.rec-seg-option:focus-within {
outline: none;
}
.rec-mode:has(input:focus-visible) {
outline: 2px solid var(--rec-blue);
outline-offset: 2px;
}
.rec-seg-option:has(input:focus-visible) {
outline: 2px solid var(--rec-blue);
outline-offset: 1px;
}
.rec-seg--dark .rec-seg-option:has(input:focus-visible) {
outline-color: #fff;
}
}
.rec-mode.is-disabled {
opacity: .4;
cursor: not-allowed;
}
.rec-devices {
display: flex;
flex-direction: column;
gap: 8px;
}
.rec-select {
position: relative;
display: block;
margin: 0;
}
.rec-select select {
display: block;
width: 100%;
height: 46px;
margin: 0;
padding: 0 40px 0 44px;
overflow: hidden;
border: 1px solid var(--rec-line);
border-radius: 12px;
background: #fff;
font-family: inherit;
font-size: 15px;
color: var(--rec-ink);
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.rec-select select:hover {
border-color: var(--rec-line-strong);
}
.rec-select select:focus {
border-color: var(--rec-blue);
box-shadow: var(--rec-focus);
outline: none;
}
.rec-select-icon,
.rec-select-chevron {
position: absolute;
top: 50%;
color: var(--rec-muted);
pointer-events: none;
transform: translateY(-50%);
}
.rec-select-icon {
left: 14px;
}
.rec-select-chevron {
right: 14px;
width: 18px;
height: 18px;
}
.rec[data-mode="screen"] #rec-camera-field,
.rec[data-mode="camera"] #rec-system-field {
display: none;
}
.rec-switch-row {
display: flex;
align-items: center;
gap: 12px;
height: 46px;
margin: 0;
padding: 0 12px 0 14px;
border: 1px solid var(--rec-line);
border-radius: 12px;
font-size: 15px;
font-weight: 400;
color: var(--rec-ink);
cursor: pointer;
}
.rec-switch-row .rec-select-icon,
.rec-more summary .rec-select-icon {
position: static;
flex: 0 0 auto;
transform: none;
}
.rec-switch-text {
flex: 1 1 auto;
}
.rec-switch {
position: relative;
flex: 0 0 auto;
width: 40px;
height: 24px;
margin: 0;
border-radius: 12px;
background: rgba(43, 41, 45, .22);
cursor: pointer;
transition: background .15s ease;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.rec-switch::before {
content: '';
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
transition: transform .15s ease;
}
.rec-switch:checked {
background: var(--rec-blue);
}
.rec-switch:checked::before {
transform: translateX(16px);
}
.rec-switch:focus-visible {
outline: 2px solid var(--rec-blue);
outline-offset: 2px;
}
.rec-help--tip {
padding: 0 2px;
}
.rec-more {
border: 1px solid var(--rec-line);
border-radius: 12px;
}
.rec-more summary {
display: flex;
align-items: center;
gap: 12px;
min-height: 46px;
padding: 0 12px 0 14px;
font-size: 15px;
color: var(--rec-ink);
cursor: pointer;
list-style: none;
}
.rec-more summary::-webkit-details-marker {
display: none;
}
.rec-more summary:focus-visible {
border-radius: 12px;
outline: 2px solid var(--rec-blue);
outline-offset: 2px;
}
.rec-more-value {
flex: 1 1 auto;
white-space: nowrap;
}
.rec-more-chevron {
flex: 0 0 auto;
width: 18px;
height: 18px;
color: var(--rec-muted);
transition: transform .2s ease;
}
.rec-more[open] .rec-more-chevron {
transform: rotate(180deg);
}
.rec-more-body {
display: grid;
gap: 12px;
padding: 4px 12px 14px 14px;
}
.rec-more-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.rec-more-row .rec-label {
margin: 0;
}
.rec-go,
.rec-actions {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: auto;
}
.rec-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
min-height: 52px;
padding: 12px 20px;
border-radius: 12px;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
}
.rec-btn-icon {
flex: 0 0 auto;
}
.rec-btn--quiet {
min-height: 46px;
padding: 8px 12px;
font-size: 15px;
line-height: 1.2;
white-space: normal;
}
.rec-btn--quiet.is-armed {
color: var(--rec-red);
box-shadow: inset 0 0 0 1px rgba(220, 53, 69, .45);
}
.rec-for-camera,
.rec[data-mode="camera"] .rec-for-screen {
display: none;
}
.rec[data-mode="camera"] .rec-for-camera {
display: block;
}
.rec-link {
align-self: center;
padding: 6px 10px;
border: 0;
background: none;
font-size: 15px;
font-weight: 600;
color: var(--rec-muted);
cursor: pointer;
}
.rec-link:hover {
color: var(--rec-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
.rec-link:focus-visible {
border-radius: 6px;
outline: 2px solid var(--rec-blue);
}
.rec-state {
display: flex;
flex-direction: column;
gap: 6px;
}
.rec-status {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--rec-ink);
}
.rec-dot {
flex: 0 0 auto;
width: 10px;
height: 10px;
border-radius: 50%;
background: rgba(43, 41, 45, .3);
}
.rec[data-phase="countdown"] .rec-dot,
.rec[data-phase="recording"] .rec-dot,
.rec[data-phase="stopping"] .rec-dot,
.rec-mini-status .rec-dot {
background: var(--rec-red);
}
.rec-mini-status.is-paused .rec-dot {
background: rgba(43, 41, 45, .3);
}
@media (prefers-reduced-motion: no-preference) {
.rec[data-phase="recording"] .rec-status .rec-dot,
.rec-mini-status:not(.is-paused):not(.is-count) .rec-dot {
animation: rec-blink 1.2s ease-in-out infinite;
}
}
@keyframes rec-blink {
50% { opacity: .25; }
}
.rec-timer {
display: none;
margin: 0;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 44px;
font-weight: 700;
letter-spacing: -1px;
line-height: 1.1;
color: var(--rec-ink);
font-variant-numeric: tabular-nums;
}
.rec[data-phase="recording"] .rec-timer,
.rec[data-phase="paused"] .rec-timer,
.rec[data-phase="stopping"] .rec-timer {
display: block;
}
.rec[data-phase="paused"] .rec-timer {
color: var(--rec-muted);
}
.rec-hint {
display: none;
}
.rec[data-phase="preview"][data-mode="screenCamera"][data-cam="1"] .rec-hint {
display: block;
}
.rec-sources {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 12px 0 0;
border-top: 1px solid var(--rec-line);
list-style: none;
}
.rec-sources li {
display: flex;
align-items: flex-start;
gap: 10px;
min-width: 0;
font-size: 14px;
line-height: 20px;
color: var(--rec-ink);
}
.rec-sources li span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rec-sources .rec-i {
flex: 0 0 auto;
color: var(--rec-muted);
}
.rec-sources li.is-warn span {
white-space: normal;
}
.rec-sources li.is-warn,
.rec-sources li.is-warn .rec-i {
color: #B42318;
}
.rec-mic {
display: none;
align-items: center;
gap: 12px;
padding: 8px 14px 8px 8px;
border: 1px solid var(--rec-line);
border-radius: 12px;
}
.rec-mic-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 6px;
min-width: 0;
}
.rec-mic-name {
overflow: hidden;
font-size: 13px;
line-height: 1.2;
color: var(--rec-muted);
text-overflow: ellipsis;
white-space: nowrap;
}
.rec[data-mic="1"] .rec-mic {
display: flex;
}
.rec-meter {
display: block;
flex: 1 1 auto;
width: 100%;
height: 8px;
overflow: hidden;
border-radius: 4px;
background: rgba(43, 41, 45, .1);
}
.rec-meter-fill {
display: block;
height: 100%;
background: var(--rec-blue);
transform: scaleX(0);
transform-origin: left center;
}
.rec-warn {
margin: -8px 0 0;
padding: 8px 12px;
border-radius: 10px;
background: #FFF9D1;
font-size: 13px;
line-height: 1.45;
color: var(--rec-ink);
}
#rec-start,
#rec-go,
#rec-stop,
.rec-actions-pair,
#rec-cancel {
display: none;
}
.rec[data-phase="preview"] #rec-start,
.rec[data-phase="countdown"] #rec-go,
.rec[data-phase="recording"] #rec-stop,
.rec[data-phase="paused"] #rec-stop,
.rec[data-phase="stopping"] #rec-stop,
.rec[data-phase="preview"] #rec-cancel,
.rec[data-phase="countdown"] #rec-cancel {
display: flex;
}
.rec[data-phase="recording"] .rec-actions-pair,
.rec[data-phase="paused"] .rec-actions-pair,
.rec[data-phase="stopping"] .rec-actions-pair {
display: grid;
}
.rec-actions-pair {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.rec[data-phase="stopping"] .rec-actions {
opacity: .5;
pointer-events: none;
}
.rec-title {
margin: 0;
font-family: 'Montserrat', 'Montserrat Fb', 'Montserrat Fb A', sans-serif;
font-size: 20px;
font-weight: 700;
letter-spacing: -.3px;
line-height: 1.25;
color: var(--rec-ink);
}
.rec-facts {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: -6px 0 0;
padding: 0;
list-style: none;
}
.rec-facts li {
padding: 4px 10px;
border-radius: 99px;
background: var(--rec-soft);
font-size: 13px;
font-weight: 600;
color: var(--rec-ink);
font-variant-numeric: tabular-nums;
}
.rec-name {
display: flex;
align-items: center;
border: 1px solid var(--rec-line);
border-radius: 12px;
background: #fff;
}
.rec-name:focus-within {
border-color: var(--rec-blue);
box-shadow: var(--rec-focus);
}
.rec-name input {
flex: 1 1 auto;
min-width: 0;
height: 46px;
padding: 0 4px 0 14px;
border: 0;
border-radius: 12px;
background: transparent;
font-size: 15px;
color: var(--rec-ink);
outline: none;
}
.rec-ext {
flex: 0 0 auto;
padding-right: 14px;
font-size: 15px;
color: var(--rec-muted);
}
.rec-trim {
padding: 14px 4px 2px;
}
.rec-trim-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.rec-trim-head .rec-label {
margin: 0;
}
.rec-trim-times {
font-size: 14px;
color: var(--rec-muted);
font-variant-numeric: tabular-nums;
}
.rec-trimbar {
position: relative;
height: 32px;
margin: 4px 0;
}
.rec-trimbar::before,
.rec-trimfill {
content: '';
position: absolute;
top: 50%;
height: 6px;
margin-top: -3px;
border-radius: 3px;
}
.rec-trimbar::before {
left: 0;
right: 0;
background: rgba(43, 41, 45, .12);
}
.rec-trimfill {
left: 0;
right: 0;
background: var(--rec-blue);
}
.rec-trimbar input[type="range"] {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 32px;
margin: 0;
background: none;
pointer-events: none;
-webkit-appearance: none;
appearance: none;
}
.rec-trimbar input[type="range"]:focus {
outline: none;
}
.rec-trimbar input[type="range"]::-webkit-slider-runnable-track {
height: 32px;
background: transparent;
}
.rec-trimbar input[type="range"]::-webkit-slider-thumb {
width: 16px;
height: 28px;
margin-top: 2px;
border: 2px solid var(--rec-blue);
border-radius: 5px;
background: #fff;
box-shadow: 0 1px 3px rgba(43, 41, 45, .2);
cursor: ew-resize;
pointer-events: auto;
-webkit-appearance: none;
appearance: none;
}
.rec-trimbar input[type="range"]::-moz-range-track {
background: transparent;
}
.rec-trimbar input[type="range"]::-moz-range-thumb {
width: 12px;
height: 24px;
border: 2px solid var(--rec-blue);
border-radius: 5px;
background: #fff;
cursor: ew-resize;
pointer-events: auto;
}
.rec-trimbar input[type="range"]:focus-visible::-webkit-slider-thumb {
box-shadow: var(--rec-focus);
}
.rec-trimbar input[type="range"]:focus-visible::-moz-range-thumb {
box-shadow: var(--rec-focus);
}
.rec-trimbar input[type="range"]:disabled::-webkit-slider-thumb {
border-color: rgba(43, 41, 45, .3);
cursor: default;
}
.rec-trim-foot {
display: none;
flex-wrap: wrap;
align-items: center;
gap: 8px 14px;
}
.rec-trim.is-changed .rec-trim-foot,
.rec[data-phase="trimming"] .rec-trim-foot {
display: flex;
}
.rec-trim-foot .rec-help {
flex: 1 1 260px;
}
.rec-progress {
flex: 1 1 200px;
height: 8px;
accent-color: var(--rec-blue);
}
.tool-promo--standalone.tool-rec-stream {
margin-top: 24px;
}
.tool-rec-stream .tool-rec-stream-note {
margin-top: 8px;
font-size: 14px;
}
.rec-pip {
margin: 0;
background: #fff;
font-family: 'Open Sans', sans-serif;
color: #2B292D;
}
.rec-pip [hidden] {
display: none !important;
}
.rec-mini {
--rec-ink: #2B292D;
--rec-line: rgba(43, 41, 45, .13);
--rec-line-strong: rgba(43, 41, 45, .3);
--rec-blue: #0000ff;
--rec-red: #dc3545;
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
height: 100vh;
padding: 0 12px;
}
.rec-mini-status {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
font-family: 'Montserrat', sans-serif;
font-size: 16px;
font-weight: 700;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.rec-mini-status.is-count .rec-dot {
display: none;
}
.rec-mini .rec-meter {
flex: 0 0 56px;
width: 56px;
}
.rec-mini-buttons {
display: flex;
gap: 6px;
margin-left: auto;
}