@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root{
	--cm2-height: 80px;
	--cm2-font-size: 60px;
	--cm2-letter-space: 1px;
	--cm2-space: 7.2rem;
	--cm2-color: #7d7b7b;
	--cm2-stroke: #000000;
	--cm2-stroke-width: 0.6px;
	--cm2-dot: #000000;
	--cm2-dot-size: 0.22em;

	/* Controls */
	--cm2-btn-bg: #ffffff;
	--cm2-btn-border: #cfd6df;  /* neutral light gray outline */
	--cm2-btn-icon: #1f2937;    /* dark gray chevrons */
	--cm2-btn-shadow: 0 1px 1px rgba(0,0,0,0.04);
	--cm2-btn-hover-bg: #ffffff;
	--cm2-btn-hover-border: #c3cbd6;
}

.cm2-wrap{width:100%;box-sizing:border-box;background:#fff;}
.cm2-marquee{position:relative;width:100%;margin:0 auto;padding:12px 0;}
.cm2-viewport{overflow:hidden}
.cm2-track{display:flex;align-items:center;will-change:transform;transform:translateX(0);}
.cm2-set{--space:var(--cm2-space);display:inline-flex;align-items:center;white-space:nowrap;padding-right:var(--space) !important;}
.cm2-item{
	font-family:"Anton",sans-serif;
	font-size:var(--cm2-font-size);
	line-height:1;
	letter-spacing:var(--cm2-letter-space);
	display:inline-block;
	color:var(--cm2-color);
	-webkit-text-stroke:var(--cm2-stroke-width) var(--cm2-stroke);
	text-shadow:
		0.5px 0   0 var(--cm2-stroke),
	   -0.5px 0   0 var(--cm2-stroke),
		0   0.5px 0 var(--cm2-stroke),
		0  -0.5px 0 var(--cm2-stroke);
	margin-right:var(--cm2-space) !important;
	position:relative;
	white-space:nowrap;
}
.cm2-set .cm2-item:last-child{margin-right:0 !important;}
.cm2-item::after{
	content:"";
	position:absolute;
	left: calc(100% + (var(--cm2-space) / 2));
	top:50%;
	transform:translate(-50%,-50%);
	width: var(--cm2-dot-size);
	height: var(--cm2-dot-size);
	border-radius:50%;
	background: var(--cm2-dot);
	pointer-events:none;
}
.cm2-set .cm2-item:last-child::after{ display:none; }

/* Controls below the marquee */
.cm2-controls{display:flex;justify-content:center;gap:14px;margin-top:12px;user-select:none;}
.cm2-btn{
	width:48px;height:48px;border-radius:9999px;
	border:2px solid var(--cm2-btn-border);
	background:var(--cm2-btn-bg);
	display:grid;place-items:center;cursor:pointer;
	line-height:1;
	box-shadow: var(--cm2-btn-shadow);
}
.cm2-icon{font-size:18px;color:var(--cm2-btn-icon);}
.cm2-btn:hover{background:var(--cm2-btn-hover-bg);border-color:var(--cm2-btn-hover-border);}
.cm2-btn:active{transform:translateY(0);}
.cm2-btn:focus{outline:2px solid #94a3b8;outline-offset:2px;}

@media (max-width: 800px){
	.cm2-item{font-size:38.4px}
	:root{ --cm2-space: 4.32rem; }
}