<section class="tm4-root" aria-labelledby="tm4-title">
<style>
.tm4-root,
.tm4-root * {
box-sizing: border-box;
}

.tm4-root {
--bg: #f5f4f0;
--ink: #111110;
--muted: #6b6b67;
--line: rgba(17, 17, 16, 0.10);
--ease: cubic-bezier(0.22, 1, 0.36, 1);

position: relative;
width: 100%;
max-width: 100%;
margin: 0;
overflow: hidden;

background: var(--bg);
color: var(--ink);

font-family: var(--t-text-font, "Inter", Arial, sans-serif);
-webkit-font-smoothing: antialiased;
}

.tm4-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 32px;

width: 100%;
max-width: 1200px;

margin-left: auto;
margin-right: auto;

padding: 80px 20px 0;
}

.tm4-title {
margin: 0;

font-family: var(--t-headline-font, Georgia, serif);
font-size: clamp(36px, 4vw, 52px);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.03em;
}

.tm4-meta {
display: flex;
flex-direction: column;
align-items: flex-end;

gap: 4px;

padding-bottom: 4px;
}

.tm4-meta__number {
font-family: var(--t-headline-font, Georgia, serif);
font-size: 36px;
line-height: 1;
letter-spacing: -0.04em;
}

.tm4-meta__label {
font-size: 11px;
letter-spacing: 0.10em;
text-transform: uppercase;

color: var(--muted);
}

.tm4-divider {
height: 1px;
max-width: 1160px;

margin: 40px auto 0;

background: rgba(17, 17, 16, 0.12);
}

.tm4-list {
list-style: none;

width: 100%;
max-width: 1200px;

margin-left: auto;
margin-right: auto;

padding: 0 20px;
}

.tm4-person {
position: relative;

width: 100%;

border-bottom: 1px solid var(--line);
}

.tm4-person::after {
content: "";

position: absolute;

left: 0;
bottom: -1px;

width: 0;
height: 1px;

background: var(--ink);

pointer-events: none;

transition: width 0.55s var(--ease);
}

.tm4-person.is-active::after {
width: 100%;
}

.tm4-person__row {
position: relative;

display: grid;

grid-template-columns:
minmax(0, 1fr)
auto;

align-items: center;

column-gap: 32px;

width: 100%;
min-width: 0;

padding: 26px 0;

color: inherit;
text-decoration: none;
}

.tm4-person__info {
display: flex;
align-items: baseline;

gap: 24px;

min-width: 0;
}

.tm4-person__name {
--mag-x: 0px;
--mag-y: 0px;

margin: 0;

min-width: 0;

font-family: var(--t-headline-font, Georgia, serif);
font-size: clamp(32px, 5.2vw, 70px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;

white-space: nowrap;

transform:
translate(
var(--mag-x),
var(--mag-y)
);

transform-origin:
left center;

will-change:
transform,
filter,
opacity,
letter-spacing;

transition:
color 0.30s ease,
opacity 0.40s var(--ease),
filter 0.40s var(--ease),
letter-spacing 0.45s var(--ease),
transform 0.18s ease-out;
}

.tm4-person__role {
flex-shrink: 0;

font-size:
clamp(13px, 1.2vw, 15px);

color: var(--muted);

opacity: 0;

transform:
translateX(-8px);

transition:
opacity 0.35s var(--ease),
transform 0.35s var(--ease);
}

.tm4-person__side {
display: flex;
align-items: center;
justify-content: flex-end;

gap: 12px;

margin-left: auto;

flex-shrink: 0;
}

.tm4-tags {
display: flex;

gap: 8px;
}

.tm4-tag {
padding: 4px 11px;

border:
1px solid
rgba(17, 17, 16, 0.13);

border-radius: 999px;

font-size: 11px;
line-height: 1.2;

white-space: nowrap;

color:
rgba(17, 17, 16, 0.42);

transition:
color 0.30s ease,
border-color 0.30s ease,
opacity 0.30s ease;
}

.tm4-arrow {
display: flex;
align-items: center;
justify-content: center;

width: 38px;
height: 38px;

flex-shrink: 0;

border:
1px solid
rgba(17, 17, 16, 0.15);

border-radius: 50%;

transition:
background 0.30s ease,
border-color 0.30s ease,
transform 0.45s var(--ease),
opacity 0.30s ease;
}

.tm4-arrow svg {
transition:
transform 0.45s var(--ease),
stroke 0.30s ease;
}

@media (min-width: 961px) {

.tm4-root,
.tm4-person__row,
.tm4-footer__link {
cursor: none;
}

.tm4-list.has-active
.tm4-person:not(.is-active)
.tm4-person__name {
color:
rgba(17, 17, 16, 0.22);

opacity: 0.55;

filter:
blur(1.6px);

letter-spacing:
-0.055em;
}

.tm4-person.is-active
.tm4-person__name {
color: var(--ink);

opacity: 1;

filter:
blur(0);

letter-spacing:
-0.03em;
}

.tm4-person.is-active
.tm4-person__role {
opacity: 1;

transform:
translateX(0);
}

.tm4-person.is-active
.tm4-tag {
color: var(--ink);

border-color:
rgba(17, 17, 16, 0.55);
}

.tm4-list.has-active
.tm4-person:not(.is-active)
.tm4-tag,
.tm4-list.has-active
.tm4-person:not(.is-active)
.tm4-arrow {
opacity: 0.25;
}

.tm4-person.is-active
.tm4-arrow {
background:
var(--ink);

border-color:
var(--ink);

transform:
scale(1.08);
}

.tm4-person.is-active
.tm4-arrow svg {
stroke:
var(--bg);

transform:
rotate(45deg);
}

.tm4-person__photo-holder {
position: fixed;

z-index: 40;

top: 0;
left: 0;

width: 240px;

aspect-ratio:
3 / 4;

overflow: hidden;

border-radius: 6px;

pointer-events: none;

opacity: 0;

visibility: hidden;

transform:
translate3d(
-9999px,
-9999px,
0
)
translate(
-50%,
-62%
)
scale(0.90)
rotate(-4deg);

box-shadow:
0 20px 60px
rgba(17, 17, 16, 0.16);

clip-path:
inset(
100% 0 0 0
round 6px
);

will-change:
transform,
opacity,
clip-path;

transition:
opacity 0.28s ease,
visibility 0.28s ease,
clip-path 0.55s var(--ease);
}

.tm4-person.is-active
.tm4-person__photo-holder {
opacity: 1;

visibility: visible;

clip-path:
inset(
0 0 0 0
round 6px
);
}

.tm4-person__photo {
display: block;

width: 100%;
height: 100%;

object-fit: cover;
object-position: top center;
}
}

.tm4-dot {
position: fixed;

z-index: 80;

top: 0;
left: 0;

width: 7px;
height: 7px;

border-radius: 50%;

background: var(--ink);

pointer-events: none;

opacity: 0;

transform:
translate(
-50%,
-50%
);

transition:
opacity 0.20s ease,
width 0.20s ease,
height 0.20s ease,
background 0.20s ease;
}

.tm4-dot.show {
opacity: 1;
}

.tm4-dot.active {
width: 4px;
height: 4px;

background:
var(--muted);
}

.tm4-footer {
display: flex;
align-items: center;
justify-content: space-between;

gap: 24px;

width: 100%;
max-width: 1200px;

margin-left: auto;
margin-right: auto;

padding:
48px 20px 72px;
}

.tm4-footer__text {
max-width: 38ch;

margin: 0;

font-size: 15px;
line-height: 1.6;

color: var(--muted);
}

.tm4-footer__link {
display: inline-flex;

align-items: center;

gap: 10px;

flex-shrink: 0;

padding:
16px 30px;

border-radius: 999px;

background:
var(--ink);

color:
var(--bg);

text-decoration: none;

font-size: 14px;
font-weight: 500;

transition:
transform 0.30s var(--ease);
}

.tm4-footer__link:hover {
transform:
translateY(-2px);
}

.tm4-footer__link svg {
transition:
transform 0.35s var(--ease);
}

.tm4-footer__link:hover svg {
transform:
translate(
3px,
-3px
);
}

@media (max-width: 960px) {

.tm4-dot {
display:
none !important;
}

.tm4-header {
padding:
60px 20px 0;
}

.tm4-divider {
margin:
32px auto 0;
}

.tm4-list {
padding:
0 20px;
}

.tm4-person__row {
grid-template-columns:
minmax(0, 1fr)
108px;

grid-template-rows:
auto
auto;

column-gap: 24px;
row-gap: 12px;

min-height: 152px;

padding:
18px 0;
}

.tm4-person__info {
grid-column: 1;
grid-row: 1;

display: block;
}

.tm4-person__name {
font-size:
clamp(
30px,
7vw,
52px
);

white-space: normal;

opacity: 0.50;

filter:
blur(0.6px);

transition:
opacity 0.45s var(--ease),
filter 0.45s var(--ease),
transform 0.45s var(--ease);
}

.tm4-person__role {
display: block;

margin-top: 8px;

opacity: 1;

transform: none;

font-size: 13px;
}

.tm4-person__side {
grid-column: 1;
grid-row: 2;

justify-content:
flex-start;

margin-left: 0;
}

.tm4-arrow {
display: none;
}

.tm4-person__photo-holder {
position: relative;

grid-column: 2;
grid-row:
1 / span 2;

align-self: center;

width: 108px;

aspect-ratio:
3 / 4;

overflow: hidden;

border-radius: 6px;

opacity: 0.42;

transform:
scale(0.94);

transition:
opacity 0.45s var(--ease),
transform 0.55s var(--ease);
}

.tm4-person__photo {
display: block;

width: 100%;
height: 100%;

object-fit: cover;
object-position: top center;

filter:
saturate(0.68)
brightness(0.90);

transition:
filter 0.45s var(--ease);
}

.tm4-person.in-view
.tm4-person__name {
opacity: 1;

filter:
blur(0);

transform:
translateX(4px);
}

.tm4-person.in-view
.tm4-person__photo-holder {
opacity: 1;

transform:
scale(1);
}

.tm4-person.in-view
.tm4-person__photo {
filter:
saturate(1)
brightness(1);
}

.tm4-person.in-view::after {
width: 100%;
}

.tm4-footer {
padding:
36px 20px 56px;
}
}

@media (max-width: 640px) {

.tm4-header {
flex-direction:
column;

align-items:
flex-start;

gap: 18px;

padding:
48px 20px 0;
}

.tm4-meta {
align-items:
flex-start;
}

.tm4-divider {
margin:
24px auto 0;
}

.tm4-list {
padding:
0 20px;
}

.tm4-person__row {
grid-template-columns:
minmax(0, 1fr)
104px;

column-gap: 18px;
row-gap: 12px;

min-height: 148px;

padding:
18px 0;
}

.tm4-person__name {
font-size:
clamp(
28px,
9vw,
40px
);
}

.tm4-person__role {
margin-top: 6px;

font-size: 12px;
}

.tm4-tags {
display: flex;

flex-wrap: wrap;

gap: 6px;

max-width: 100%;
}

.tm4-tag {
padding:
4px 9px;

font-size: 10px;
line-height: 1.15;
}

.tm4-person__photo-holder {
width: 104px;

border-radius: 6px;
}

.tm4-footer {
flex-direction:
column;

align-items:
flex-start;

padding:
32px 20px 56px;
}
}

@media (max-width: 390px) {

.tm4-person__row {
grid-template-columns:
minmax(0, 1fr)
92px;

column-gap: 12px;
row-gap: 10px;

min-height: 136px;
}

.tm4-person__photo-holder {
width: 92px;
}

.tm4-tags {
display: flex;

gap: 5px;
}

.tm4-tag {
padding:
3px 7px;

font-size: 9px;
}
}

@media (prefers-reduced-motion: reduce) {

.tm4-person__name,
.tm4-person__role,
.tm4-tag,
.tm4-arrow,
.tm4-person__photo-holder,
.tm4-person__photo,
.tm4-person::after,
.tm4-footer__link,
.tm4-footer__link svg {
transition:
none !important;
}

.tm4-dot {
display:
none !important;
}
}
</style>

<!--
CONTENT

Header
Title
Meta
Number
Label

Team
Person
Info
Name
Role
Tags
Tag
Photo

Footer
Text
Button
Label
Link
-->

<div
class="tm4-dot"
aria-hidden="true"
></div>

<header
class="tm4-header"
aria-label="Header"
>
<h2
class="tm4-title"
id="tm4-title"
>The people<br>who make it.</h2>

<div
class="tm4-meta"
aria-label="Meta"
>
<span class="tm4-meta__number">4</span>
<span class="tm4-meta__label">people</span>
</div>
</header>

<div
class="tm4-divider"
aria-hidden="true"
></div>

<ul
class="tm4-list"
aria-label="Team"
>

<li
class="tm4-person"
aria-label="Person"
>
<div class="tm4-person__row">

<div
class="tm4-person__info"
aria-label="Info"
>
<h3 class="tm4-person__name">Mia Chen</h3>
<span class="tm4-person__role">CEO &amp; Co-founder</span>
</div>

<div
class="tm4-person__side"
aria-label="Tags"
>
<div class="tm4-tags">
<span class="tm4-tag">Strategy</span>
<span class="tm4-tag">Vision</span>
</div>

<span
class="tm4-arrow"
aria-hidden="true"
>
<svg
width="13"
height="13"
viewBox="0 0 14 14"
fill="none"
stroke="#111110"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 12L12 2M12 2H4M12 2V10"></path>
</svg>
</span>
</div>

<div
class="tm4-person__photo-holder"
aria-label="Photo"
>
<img
class="tm4-person__photo"
src="https://static.tildacdn.com/tild3637-6261-4063-a432-623130353930/Team_1.jpg"
alt="Team member portrait"
>
</div>

</div>
</li>

<li
class="tm4-person"
aria-label="Person"
>
<div class="tm4-person__row">

<div
class="tm4-person__info"
aria-label="Info"
>
<h3 class="tm4-person__name">James Park</h3>
<span class="tm4-person__role">CTO &amp; Co-founder</span>
</div>

<div
class="tm4-person__side"
aria-label="Tags"
>
<div class="tm4-tags">
<span class="tm4-tag">Engineering</span>
<span class="tm4-tag">Architecture</span>
</div>

<span
class="tm4-arrow"
aria-hidden="true"
>
<svg
width="13"
height="13"
viewBox="0 0 14 14"
fill="none"
stroke="#111110"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 12L12 2M12 2H4M12 2V10"></path>
</svg>
</span>
</div>

<div
class="tm4-person__photo-holder"
aria-label="Photo"
>
<img
class="tm4-person__photo"
src="https://static.tildacdn.com/tild6632-3966-4861-b339-393735646436/Team_6.jpg"
alt="Team member portrait"
>
</div>

</div>
</li>

<li
class="tm4-person"
aria-label="Person"
>
<div class="tm4-person__row">

<div
class="tm4-person__info"
aria-label="Info"
>
<h3 class="tm4-person__name">Sofia Reyes</h3>
<span class="tm4-person__role">Head of Design</span>
</div>

<div
class="tm4-person__side"
aria-label="Tags"
>
<div class="tm4-tags">
<span class="tm4-tag">UX</span>
<span class="tm4-tag">Motion</span>
</div>

<span
class="tm4-arrow"
aria-hidden="true"
>
<svg
width="13"
height="13"
viewBox="0 0 14 14"
fill="none"
stroke="#111110"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 12L12 2M12 2H4M12 2V10"></path>
</svg>
</span>
</div>

<div
class="tm4-person__photo-holder"
aria-label="Photo"
>
<img
class="tm4-person__photo"
src="https://static.tildacdn.com/tild3536-3963-4863-b936-613834366161/Team_2.jpg"
alt="Team member portrait"
>
</div>

</div>
</li>

<li
class="tm4-person"
aria-label="Person"
>
<div class="tm4-person__row">

<div
class="tm4-person__info"
aria-label="Info"
>
<h3 class="tm4-person__name">Alex Novak</h3>
<span class="tm4-person__role">Lead Engineer</span>
</div>

<div
class="tm4-person__side"
aria-label="Tags"
>
<div class="tm4-tags">
<span class="tm4-tag">Performance</span>
<span class="tm4-tag">Systems</span>
</div>

<span
class="tm4-arrow"
aria-hidden="true"
>
<svg
width="13"
height="13"
viewBox="0 0 14 14"
fill="none"
stroke="#111110"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M2 12L12 2M12 2H4M12 2V10"></path>
</svg>
</span>
</div>

<div
class="tm4-person__photo-holder"
aria-label="Photo"
>
<img
class="tm4-person__photo"
src="https://static.tildacdn.com/tild3336-6264-4834-a664-303966363366/Team_4.jpg"
alt="Team member portrait"
>
</div>

</div>
</li>

</ul>

<footer
class="tm4-footer"
aria-label="Footer"
>
<p class="tm4-footer__text">
We hire for curiosity and craft. If you obsess over the details nobody else notices, you'll fit right in.
</p>

<a
class="tm4-footer__link"
href="#jobs"
>
<span>Open positions</span>

<svg
width="13"
height="13"
viewBox="0 0 14 14"
fill="none"
stroke="currentColor"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<path d="M2 12L12 2M12 2H4M12 2V10"></path>
</svg>
</a>
</footer>

<script>
(function () {
'use strict';

var script =
document.currentScript;

var root =
script &&
script.closest
? script.closest(
'.tm4-root'
)
: null;

if (!root) {

var roots =
document.querySelectorAll(
'.tm4-root'
);

root =
roots.length
? roots[
roots.length - 1
]
: null;
}

if (
!root ||
root.classList.contains(
'tm4-ready'
)
) {
return;
}

var list =
root.querySelector(
'.tm4-list'
);

var dot =
root.querySelector(
'.tm4-dot'
);

if (
!list ||
!dot
) {
return;
}

var desktop =
window.matchMedia(
'(min-width: 961px)'
);

var activePerson =
null;

var mouseX = 0;
var mouseY = 0;

var currentX = 0;
var currentY = 0;

var previousX = 0;
var velocityX = 0;

var currentTilt =
-4;

var frame =
null;

var observer =
null;

var mutationTimer =
null;

function getPeople() {

return Array.prototype.slice.call(
list.querySelectorAll(
'.tm4-person'
)
);
}

function lerp(
from,
to,
amount
) {

return (
from +
(
to -
from
) *
amount
);
}

function resetPersonVisuals(
person
) {

if (
!person
) {
return;
}

var name =
person.querySelector(
'.tm4-person__name'
);

var photoHolder =
person.querySelector(
'.tm4-person__photo-holder'
);

if (
name
) {

name.style.removeProperty(
'--mag-x'
);

name.style.removeProperty(
'--mag-y'
);
}

if (
photoHolder
) {

photoHolder.style.transform =
'';
}
}

function clearActive() {

if (
activePerson
) {

activePerson.classList.remove(
'is-active'
);

resetPersonVisuals(
activePerson
);
}

activePerson =
null;

list.classList.remove(
'has-active'
);

dot.classList.remove(
'active'
);
}

function setActive(
person
) {

if (
!person ||
!desktop.matches
) {
return;
}

if (
activePerson &&
activePerson !==
person
) {

activePerson.classList.remove(
'is-active'
);

resetPersonVisuals(
activePerson
);
}

activePerson =
person;

person.classList.add(
'is-active'
);

list.classList.add(
'has-active'
);

dot.classList.add(
'active'
);

if (
!frame
) {

frame =
requestAnimationFrame(
animateDesktop
);
}
}

function animateDesktop() {

frame =
null;

if (
!desktop.matches
) {
return;
}

currentX =
lerp(
currentX,
mouseX,
0.115
);

currentY =
lerp(
currentY,
mouseY,
0.115
);

var targetTilt =
Math.max(
-12,
Math.min(
12,
velocityX *
0.55
)
);

currentTilt =
lerp(
currentTilt,
targetTilt,
0.10
);

dot.style.left =
mouseX +
'px';

dot.style.top =
mouseY +
'px';

if (
activePerson
) {

var photoHolder =
activePerson.querySelector(
'.tm4-person__photo-holder'
);

if (
photoHolder
) {

photoHolder.style.transform =
'translate3d(' +
currentX +
'px,' +
currentY +
'px,0) ' +
'translate(-50%,-62%) ' +
'scale(1) ' +
'rotate(' +
currentTilt.toFixed(2) +
'deg)';
}
}

var moving =
Math.abs(
mouseX -
currentX
) >
0.2 ||
Math.abs(
mouseY -
currentY
) >
0.2;

if (
moving &&
!frame
) {

frame =
requestAnimationFrame(
animateDesktop
);
}
}

function updateNameMagnet(
event
) {

if (
!activePerson ||
!desktop.matches
) {
return;
}

var name =
activePerson.querySelector(
'.tm4-person__name'
);

if (
!name
) {
return;
}

var rect =
name.getBoundingClientRect();

var centerX =
rect.left +
rect.width /
2;

var centerY =
rect.top +
rect.height /
2;

var deltaX =
event.clientX -
centerX;

var deltaY =
event.clientY -
centerY;

var distance =
Math.sqrt(
deltaX *
deltaX +
deltaY *
deltaY
);

var radius =
Math.max(
160,
rect.width *
0.75
);

if (
distance <
radius &&
distance >
0
) {

var strength =
(
1 -
distance /
radius
) *
10;

var moveX =
deltaX /
distance *
strength;

var moveY =
deltaY /
distance *
strength *
0.45;

name.style.setProperty(
'--mag-x',
moveX.toFixed(2) +
'px'
);

name.style.setProperty(
'--mag-y',
moveY.toFixed(2) +
'px'
);
}
else {

name.style.setProperty(
'--mag-x',
'0px'
);

name.style.setProperty(
'--mag-y',
'0px'
);
}
}

function setupScrollObserver() {

if (
observer
) {

observer.disconnect();

observer =
null;
}

getPeople().forEach(
function (person) {

person.classList.remove(
'in-view',
'is-active'
);

resetPersonVisuals(
person
);
}
);

list.classList.remove(
'has-active'
);

activePerson =
null;

if (
desktop.matches
) {
return;
}

var people =
getPeople();

if (
!(
'IntersectionObserver'
in window
)
) {

people.forEach(
function (person) {

person.classList.add(
'in-view'
);
}
);

return;
}

observer =
new IntersectionObserver(
function (entries) {

entries.forEach(
function (entry) {

entry.target.classList.toggle(
'in-view',
entry.isIntersecting
);
}
);
},
{
root: null,

rootMargin:
'-28% 0px -28% 0px',

threshold: 0
}
);

people.forEach(
function (person) {

observer.observe(
person
);
}
);
}

root.addEventListener(
'mousemove',
function (event) {

if (
!desktop.matches
) {
return;
}

velocityX =
event.clientX -
previousX;

previousX =
event.clientX;

mouseX =
event.clientX;

mouseY =
event.clientY;

dot.classList.add(
'show'
);

if (
currentX === 0 &&
currentY === 0
) {

currentX =
mouseX;

currentY =
mouseY;
}

updateNameMagnet(
event
);

if (
!frame
) {

frame =
requestAnimationFrame(
animateDesktop
);
}
}
);

list.addEventListener(
'mouseover',
function (event) {

if (
!desktop.matches
) {
return;
}

var person =
event.target.closest(
'.tm4-person'
);

if (
!person ||
!list.contains(
person
)
) {
return;
}

var related =
event.relatedTarget;

if (
related &&
person.contains(
related
)
) {
return;
}

setActive(
person
);
}
);

list.addEventListener(
'mouseout',
function (event) {

if (
!desktop.matches
) {
return;
}

var person =
event.target.closest(
'.tm4-person'
);

if (
!person
) {
return;
}

var related =
event.relatedTarget;

if (
related &&
person.contains(
related
)
) {
return;
}

if (
activePerson ===
person
) {

clearActive();
}
}
);

root.addEventListener(
'mouseleave',
function () {

dot.classList.remove(
'show',
'active'
);

clearActive();
}
);

if (
desktop.addEventListener
) {

desktop.addEventListener(
'change',
setupScrollObserver
);
}
else if (
desktop.addListener
) {

desktop.addListener(
'change',
setupScrollObserver
);
}

if (
'MutationObserver'
in window
) {

var mutationObserver =
new MutationObserver(
function () {

clearTimeout(
mutationTimer
);

mutationTimer =
setTimeout(
setupScrollObserver,
40
);
}
);

mutationObserver.observe(
list,
{
childList: true
}
);
}

root.classList.add(
'tm4-ready'
);

setupScrollObserver();

})();
</script>

</section>

<style data-vb-overrides="true">
.tm4-tag {
font-size: 14px;
}
</style>