.fum {
--fum-blue: #2145EF;
--fum-blue-deep: #1A38C9;
--fum-blue-muted: #ACBEFF;
--fum-wash: #EEF1FF;
--fum-ink: #111114;
--fum-ink-2: #3A3D44;
--fum-muted: #6B7280;
--fum-faint: #9CA0A8;
--fum-line: #E7E8EC;
--fum-line-2: #D6D8DE;
--fum-white: #FFFFFF;
--fum-bg-alt: #F5F6F8;
--fum-bg-50: #F9FAFB;
--fum-success: #1B8A5A;
--fum-success-bg: #E8F5EE;
--fum-call: #0F0F1A;
--fum-live: #E5242B;
--fum-green: #4ADE80;
--fum-font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
position: relative;
display: block;
width: 100%;
font-family: var(--fum-font);
color: var(--fum-ink);
text-align: left;
-webkit-font-smoothing: antialiased;
}
.fum *, .fum *::before, .fum *::after { box-sizing: border-box; }
.fum :where(p, h3, h4, ol, ul, li) { margin: 0; padding: 0; }
.fum :where(ol, ul) { list-style: none; }
.fum :where(img, video, svg) { display: block; max-width: none; }
.fum-frame {
position: relative;
width: 100%;
aspect-ratio: 1040 / 600;
container-type: inline-size;
border-radius: 14px;
overflow: hidden;
background: var(--fum-white);
border: 1px solid var(--fum-line);
box-shadow: 0 2px 4px rgba(0,0,0,.015), 0 8px 16px rgba(0,0,0,.03), 0 20px 40px rgba(0,0,0,.05);
}
.fum-canvas { position: absolute; inset: 0; display: flex; flex-direction: column; }
.fum-mode {
display: inline-flex; flex: none; align-items: center; gap: 0.6cqw;
height: 2.6cqw; padding: 0 1.1cqw; border-radius: 99cqw;
font: 600 1.25cqw/1 var(--fum-font); letter-spacing: .04em; text-transform: uppercase;
background: var(--fum-wash); color: var(--fum-blue-deep);
}
.fum-mode svg { width: 1.35cqw; height: 1.35cqw; fill: none; stroke: currentColor; stroke-width: 2; }
.fum-chrome {
flex: none; display: flex; align-items: center; gap: 1.3cqw;
height: 5.2cqw; padding: 0 1.9cqw;
border-bottom: 1px solid var(--fum-line); background: var(--fum-bg-50);
}
.fum-dots { display: flex; gap: 0.65cqw; }
.fum-dots i { width: 1cqw; height: 1cqw; border-radius: 50%; background: var(--fum-line-2); }
.fum-url {
flex: 1; height: 2.8cqw; border-radius: 0.75cqw;
background: var(--fum-white); border: 1px solid var(--fum-line);
display: flex; align-items: center; gap: 0.75cqw; padding: 0 1.15cqw;
font: 500 1.3cqw/1 var(--fum-font); color: var(--fum-faint);
}
.fum-url svg { width: 1.3cqw; height: 1.3cqw; fill: none; stroke: var(--fum-faint); stroke-width: 2; }
.fum-ava { width: 2.8cqw; height: 2.8cqw; border-radius: 50%; background: var(--fum-wash); color: var(--fum-blue); display: grid; place-items: center; font: 600 1.2cqw/1 var(--fum-font); }
.fum-live {
display: inline-flex; align-items: center; gap: 0.65cqw;
height: 2.9cqw; padding: 0 1.15cqw; border-radius: 99cqw;
font: 600 1.15cqw/1 var(--fum-font); letter-spacing: .08em;
background: var(--fum-live); color: #fff;
}
.fum-live i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: #fff; animation: fum-pulse 1.6s ease-in-out infinite; }
@keyframes fum-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.72); } }
.fum-sec { display: inline-block; height: 1.45cqw; overflow: hidden; vertical-align: -0.18cqw; }
.fum-sec b { display: block; font-weight: inherit; animation: fum-tick 10s steps(10) infinite; }
.fum-sec b span { display: block; height: 1.45cqw; line-height: 1.45cqw; }
@keyframes fum-tick { from { transform: translateY(0); } to { transform: translateY(-14.5cqw); } }
.fum-call { flex: 1; position: relative; background: var(--fum-call); overflow: hidden; }
.fum-call-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fum-glass { background: rgba(14,14,22,.58); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; border: 1px solid rgba(255,255,255,.14); }
.fum-call-top { position: absolute; top: 1.7cqw; left: 1.7cqw; right: 1.7cqw; display: flex; align-items: center; justify-content: space-between; gap: 1.1cqw; z-index: 2; }
.fum-call-top-l { display: flex; align-items: center; gap: 0.9cqw; }
.fum-call-title { display: inline-flex; align-items: center; height: 2.9cqw; padding: 0 1.25cqw; border-radius: 99cqw; font: 500 1.35cqw/1 var(--fum-font); }
.fum-clock { display: inline-flex; align-items: center; height: 2.9cqw; padding: 0 1.25cqw; border-radius: 99cqw; font: 600 1.35cqw/1 var(--fum-font); font-variant-numeric: tabular-nums; }
.fum-name { position: absolute; left: 1.7cqw; bottom: 9.4cqw; z-index: 2; display: inline-flex; align-items: center; gap: 0.75cqw; height: 3.1cqw; padding: 0 1.25cqw; border-radius: 99cqw; font: 500 1.35cqw/1 var(--fum-font); }
.fum-name i { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: var(--fum-green); }
.fum-speak { position: absolute; left: 1.7cqw; bottom: 13.6cqw; z-index: 2; display: flex; align-items: flex-end; gap: 0.35cqw; height: 2.2cqw; padding: 0 1cqw; border-radius: 0.7cqw; }
.fum-speak i { width: 0.42cqw; border-radius: 99cqw; background: var(--fum-blue-muted); height: 0.5cqw; animation: fum-speakbar 1s ease-in-out infinite, fum-speakwin 16s linear infinite; }
.fum-speak i:nth-child(2) { animation-delay: .12s, 0s; }
.fum-speak i:nth-child(3) { animation-delay: .26s, 0s; }
.fum-speak i:nth-child(4) { animation-delay: .38s, 0s; }
@keyframes fum-speakbar { 0%, 100% { height: 0.5cqw; } 50% { height: 1.7cqw; } }
@keyframes fum-speakwin { 0%, 54% { opacity: 1; } 56%, 100% { opacity: .18; } }
.fum-captions { position: absolute; left: 50%; transform: translateX(-50%); bottom: 9.4cqw; width: 54cqw; z-index: 2; display: grid; }
.fum-cap {
grid-area: 1 / 1;
display: flex; gap: 0.85cqw; align-items: baseline;
padding: 0.95cqw 1.4cqw; border-radius: 1.1cqw;
font: 400 1.45cqw/1.45 var(--fum-font);
opacity: 0;
animation: fum-cap 16s ease-in-out infinite;
}
.fum-cap b { font: 600 1.25cqw/1.45 var(--fum-font); color: var(--fum-blue-muted); flex: none; }
.fum-cap--me { background: rgba(33,69,239,.78); border-color: rgba(172,190,255,.45); }
.fum-cap--me b { color: #fff; opacity: .8; }
.fum-cap:nth-of-type(1) { animation-delay: 0s; }
.fum-cap:nth-of-type(2) { animation-delay: 4.6s; }
.fum-cap:nth-of-type(3) { animation-delay: 9.2s; }
.fum-cap:nth-of-type(4) { animation-delay: 12.4s; }
@keyframes fum-cap {
0% { opacity: 0; transform: translateY(0.8cqw); }
3%, 22% { opacity: 1; transform: translateY(0); }
26%, 100% { opacity: 0; transform: translateY(-0.5cqw); }
}
.fum-levers { position: absolute; right: 1.7cqw; top: 6.4cqw; width: 27cqw; z-index: 2; display: flex; flex-direction: column; gap: 0.65cqw; }
.fum-levers-head { display: flex; align-items: center; justify-content: space-between; padding: 0.85cqw 1.25cqw; border-radius: 0.95cqw; font: 500 1.25cqw/1 var(--fum-font); }
.fum-levers-head b { font-weight: 600; }
.fum-lever { position: relative; display: flex; align-items: center; gap: 0.95cqw; padding: 0.95cqw 1.25cqw; border-radius: 0.95cqw; font: 400 1.35cqw/1.3 var(--fum-font); opacity: .62; animation: fum-leverwake 16s ease-in-out infinite; }
.fum-lever:nth-of-type(1) { animation-delay: 0s; }
.fum-lever:nth-of-type(2) { animation-delay: 5.4s; }
.fum-lever:nth-of-type(3) { animation-delay: 10.8s; }
@keyframes fum-leverwake { 0%, 2% { opacity: .62; } 6%, 100% { opacity: 1; } }
.fum-mark { position: relative; flex: none; width: 2cqw; height: 2cqw; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); display: grid; place-items: center; font: 600 1.15cqw/1 var(--fum-font); color: rgba(255,255,255,.75); }
.fum-mark > * { grid-area: 1 / 1; place-self: center; }
.fum-mark::after { content: ""; position: absolute; inset: -1.5px; grid-area: unset; border-radius: 50%; background: var(--fum-green); transform: scale(0); animation: fum-markfill 16s ease-in-out infinite; }
.fum-lever:nth-of-type(1) .fum-mark::after { animation-delay: 3.4s; }
.fum-lever:nth-of-type(2) .fum-mark::after { animation-delay: 8.8s; }
.fum-lever:nth-of-type(3) .fum-mark::after { animation-delay: 14.2s; }
@keyframes fum-markfill { 0%, 1% { transform: scale(0); } 5%, 100% { transform: scale(1); } }
.fum-mark svg { position: relative; z-index: 1; width: 1.15cqw; height: 1.15cqw; fill: none; stroke: #0B3B24; stroke-width: 2.6; opacity: 0; animation: fum-markcheck 16s ease-in-out infinite; }
.fum-lever:nth-of-type(1) .fum-mark svg { animation-delay: 3.4s; }
.fum-lever:nth-of-type(2) .fum-mark svg { animation-delay: 8.8s; }
.fum-lever:nth-of-type(3) .fum-mark svg { animation-delay: 14.2s; }
@keyframes fum-markcheck { 0%, 2% { opacity: 0; } 6%, 100% { opacity: 1; } }
.fum-mark span { position: relative; z-index: 1; animation: fum-marknum 16s ease-in-out infinite; }
.fum-lever:nth-of-type(1) .fum-mark span { animation-delay: 3.4s; }
.fum-lever:nth-of-type(2) .fum-mark span { animation-delay: 8.8s; }
.fum-lever:nth-of-type(3) .fum-mark span { animation-delay: 14.2s; }
@keyframes fum-marknum { 0%, 2% { opacity: 1; } 5%, 100% { opacity: 0; } }
.fum-callbar { position: absolute; left: 50%; transform: translateX(-50%); bottom: 2cqw; z-index: 2; display: flex; gap: 1.15cqw; }
.fum-callbar span { width: 4.4cqw; height: 4.4cqw; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); }
.fum-callbar span.is-end { background: var(--fum-live); border-color: var(--fum-live); }
.fum-callbar svg { width: 1.9cqw; height: 1.9cqw; fill: none; stroke: #fff; stroke-width: 1.9; }
.fum-pip { position: absolute; right: 1.7cqw; bottom: 2cqw; z-index: 2; width: 16cqw; height: 10.7cqw; border-radius: 1.1cqw; overflow: hidden; border: 1px solid rgba(255,255,255,.18); background: #1A1A26; }
.fum-pip img { width: 100%; height: 100%; object-fit: cover; }
.fum-pip span { position: absolute; left: 1.1cqw; bottom: 0.65cqw; font: 500 1.15cqw/1 var(--fum-font); color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.fum-voice { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 30cqw; min-height: 0; }
.fum-voice-main { padding: 2cqw 2.2cqw; display: flex; flex-direction: column; gap: 1.5cqw; min-width: 0; }
.fum-voice-head { display: flex; align-items: center; gap: 1cqw; }
.fum-voice-head .fum-live { background: #FDE8E8; color: #B42318; border: 1px solid #F8C8C8; }
.fum-voice-head .fum-live i { background: var(--fum-live); }
.fum-voice-head .fum-clock { background: var(--fum-bg-alt); color: var(--fum-ink-2); border: 0; }
.fum-voice-head strong { font: 600 1.6cqw/1 var(--fum-font); }
.fum-caller { display: flex; align-items: center; gap: 1.15cqw; padding: 1.2cqw 1.4cqw; border: 1px solid var(--fum-line); border-radius: 1.1cqw; background: var(--fum-bg-50); }
.fum-caller i { flex: none; width: 4cqw; height: 4cqw; border-radius: 50%; background: var(--fum-wash); color: var(--fum-blue); display: grid; place-items: center; font: 600 1.5cqw/1 var(--fum-font); font-style: normal; }
.fum-caller b { display: block; font: 600 1.55cqw/1.2 var(--fum-font); }
.fum-caller em { display: block; font-style: normal; font: 400 1.25cqw/1.3 var(--fum-font); color: var(--fum-muted); margin-top: 0.2cqw; }
.fum-caller .fum-tag { margin-left: auto; display: inline-flex; align-items: center; height: 2.4cqw; padding: 0 1cqw; border-radius: 99cqw; background: var(--fum-white); border: 1px solid var(--fum-line-2); font: 500 1.2cqw/1 var(--fum-font); color: var(--fum-muted); }
.fum-wave { display: flex; align-items: center; justify-content: space-between; gap: 0.5cqw; height: 9cqw; padding: 0 1cqw; border: 1px solid var(--fum-line); border-radius: 1.1cqw; background: var(--fum-white); }
.fum-wave i {
flex: 1; max-width: 1.1cqw; border-radius: 99cqw; background: var(--fum-blue);
height: 1cqw;
animation: fum-wavebar 1.15s ease-in-out infinite;
}
.fum-wave i:nth-child(3n) { background: var(--fum-blue-muted); }
.fum-wave i:nth-child(4n) { animation-duration: 1.45s; }
.fum-wave i:nth-child(5n) { animation-duration: .95s; }
.fum-wave i:nth-child(2n) { animation-delay: .18s; }
.fum-wave i:nth-child(3n+1) { animation-delay: .36s; }
.fum-wave i:nth-child(5n+2) { animation-delay: .54s; }
@keyframes fum-wavebar { 0%, 100% { height: 0.9cqw; } 50% { height: 6.4cqw; } }
.fum-turn { display: flex; align-items: center; gap: 0.7cqw; font: 500 1.25cqw/1 var(--fum-font); color: var(--fum-muted); }
.fum-turn span { position: relative; display: inline-flex; align-items: center; gap: 0.5cqw; }
.fum-turn span::before { content: ""; width: 0.75cqw; height: 0.75cqw; border-radius: 50%; background: var(--fum-line-2); }
.fum-turn span:nth-of-type(1)::before { background: var(--fum-blue); animation: fum-turnA 16s steps(1) infinite; }
.fum-turn span:nth-of-type(2)::before { animation: fum-turnB 16s steps(1) infinite; }
@keyframes fum-turnA { 0%, 54% { background: var(--fum-blue); } 55%, 100% { background: var(--fum-line-2); } }
@keyframes fum-turnB { 0%, 54% { background: var(--fum-line-2); } 55%, 100% { background: var(--fum-blue); } }
.fum-script { flex: 1; display: flex; flex-direction: column; gap: 0.9cqw; justify-content: flex-start; min-height: 0; }
.fum-script-head { font: 600 1.25cqw/1 var(--fum-font); color: var(--fum-faint); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 0.2cqw; }
.fum-line { display: flex; gap: 0.9cqw; align-items: baseline; opacity: 0; animation: fum-linein 16s ease-out infinite; }
.fum-line:nth-of-type(1) { animation-delay: 0.6s; }
.fum-line:nth-of-type(2) { animation-delay: 4.2s; }
.fum-line:nth-of-type(3) { animation-delay: 8.6s; }
.fum-line:nth-of-type(4) { animation-delay: 12.2s; }
@keyframes fum-linein {
0% { opacity: 0; transform: translateY(0.7cqw); }
4%, 92% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; }
}
.fum-who { flex: none; width: 5.6cqw; font: 600 1.25cqw/1.5 var(--fum-font); color: var(--fum-muted); }
.fum-line--me .fum-who { color: var(--fum-blue); }
.fum-line p { font: 400 1.4cqw/1.5 var(--fum-font); color: var(--fum-ink-2); }
.fum-line--me p { color: var(--fum-ink); }
.fum-caret { display: inline-block; width: 0.18cqw; height: 1.35cqw; background: var(--fum-blue); vertical-align: -0.2cqw; margin-left: 0.25cqw; animation: fum-blink 1s steps(1) infinite; }
@keyframes fum-blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
.fum-voice-side { border-left: 1px solid var(--fum-line); background: var(--fum-bg-50); padding: 2cqw 1.6cqw; display: flex; flex-direction: column; gap: 1.1cqw; }
.fum-side-title { font: 600 1.35cqw/1 var(--fum-font); }
.fum-vlever { display: flex; align-items: center; gap: 0.85cqw; padding: 0.95cqw 1.05cqw; border: 1px solid var(--fum-line); border-radius: 0.9cqw; background: var(--fum-white); font: 400 1.3cqw/1.3 var(--fum-font); color: var(--fum-ink-2); }
.fum-vmark { position: relative; flex: none; width: 1.9cqw; height: 1.9cqw; border-radius: 50%; border: 1.5px solid var(--fum-line-2); display: grid; place-items: center; }
.fum-vmark > * { grid-area: 1 / 1; place-self: center; }
.fum-vmark::after { content: ""; position: absolute; inset: -1.5px; grid-area: unset; border-radius: 50%; background: var(--fum-success-bg); border: 1.5px solid var(--fum-success); transform: scale(0); animation: fum-markfill 16s ease-in-out infinite; }
.fum-vmark svg { position: relative; z-index: 1; width: 1.05cqw; height: 1.05cqw; fill: none; stroke: var(--fum-success); stroke-width: 2.6; opacity: 0; animation: fum-markcheck 16s ease-in-out infinite; }
.fum-vlever:nth-of-type(1) .fum-vmark::after, .fum-vlever:nth-of-type(1) .fum-vmark svg { animation-delay: 3.8s; }
.fum-vlever:nth-of-type(2) .fum-vmark::after, .fum-vlever:nth-of-type(2) .fum-vmark svg { animation-delay: 9.4s; }
.fum-vlever:nth-of-type(3) .fum-vmark::after, .fum-vlever:nth-of-type(3) .fum-vmark svg { animation-delay: 14.6s; }
.fum-voice-bar { margin-top: auto; display: flex; gap: 0.9cqw; }
.fum-voice-bar span { flex: 1; height: 3.6cqw; border-radius: 0.9cqw; display: grid; place-items: center; background: var(--fum-white); border: 1px solid var(--fum-line-2); }
.fum-voice-bar span.is-end { background: var(--fum-live); border-color: var(--fum-live); }
.fum-voice-bar svg { width: 1.6cqw; height: 1.6cqw; fill: none; stroke: var(--fum-ink-2); stroke-width: 1.9; }
.fum-voice-bar span.is-end svg { stroke: #fff; }
@media (prefers-reduced-motion: reduce) {
.fum * { animation: none !important; }
.fum-cap:nth-of-type(2), .fum-line { opacity: 1 !important; }
.fum-cap:nth-of-type(1), .fum-cap:nth-of-type(3), .fum-cap:nth-of-type(4) { opacity: 0 !important; }
.fum-mark::after, .fum-vmark::after { transform: scale(1) !important; }
.fum-mark svg, .fum-vmark svg { opacity: 1 !important; }
.fum-mark span { opacity: 0 !important; }
.fum-wave i { height: 3cqw !important; }
}
.fum-duo { display: grid; gap: 22px; }
.fu-en { display: none; }
html[lang="en"] .fu-fr { display: none; }
html[lang="en"] .fu-en { display: inline; }