:root{--twktk-build:"1.3.2"}

/* TWK Ticker */

.twktk-wrap {
	/* The height is set inline so the browser reserves the space during the
	   first layout pass. Nothing here may make the strip taller than this. */
	height: var(--twktk-h);
	min-height: var(--twktk-h);
	box-sizing: border-box;
	display: flex;
	align-items: stretch;
	width: 100%;
	overflow: hidden;
	background: var(--twktk-bg);
	color: var(--twktk-fg);
	font-size: .82rem;
	line-height: 1.5;
	letter-spacing: .01em;
	position: relative;
	z-index: 5;
}

.twktk-label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	padding: 0 14px;
	background: var(--twktk-accent);
	color: var(--twktk-accent-fg);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: .72rem;
	white-space: nowrap;
}

.twktk-wire .twktk-label {
	background: transparent;
	color: var(--twktk-accent-readable, var(--twktk-accent));
	border-right: 1px solid rgba(255, 255, 255, .18);
}

.twktk-viewport {
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
	mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}

.twktk-track {
	/* max-content is the load-bearing line. As a plain flex item the track gets
	   sized by the flex algorithm and can end up no wider than the viewport,
	   at which point translating it moves nothing anybody can see. */
	width: max-content;
	max-width: none;
	display: flex;
	flex: 0 0 auto;
	will-change: transform;
	animation: twktk-scroll var(--twktk-speed) linear infinite;
}

.twktk-run {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: max-content;
	white-space: nowrap;
	padding-left: 18px;
}

/* Distance is measured in pixels by the script and written to --twktk-dist,
   so the loop lands exactly one copy along whatever the content turns out to
   be. The percentage version below is the fallback for the first paint. */
@keyframes twktk-scroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(calc(-1 * var(--twktk-dist, 50%)), 0, 0); }
}

.twktk-item {
	color: inherit;
	text-decoration: none;
	padding: 0 4px;
	white-space: nowrap;
}

.twktk-item:hover,
.twktk-item:focus-visible {
	/* Not the raw accent. That color is designed to sit behind chip text, and
	   several of the schemes put it below 3 to 1 when used as text on the
	   strip background. */
	color: var(--twktk-accent-readable, var(--twktk-accent));
	text-decoration: underline;
}

.twktk-sep {
	padding: 0 14px;
	opacity: .45;
}

/* Fade template: one item at a time, cross faded by the script. */
.twktk-fade .twktk-viewport {
	mask-image: none;
	-webkit-mask-image: none;
	padding: 0 16px;
}

.twktk-fader {
	position: relative;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
}

.twktk-fader .twktk-item {
	position: absolute;
	left: 0;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

.twktk-fader .twktk-item.is-current {
	opacity: 1;
	pointer-events: auto;
}

.twktk-fade .twktk-sep {
	display: none;
}

/* Pause control. WCAG 2.2.2 asks for a mechanism to stop anything that moves
   for more than five seconds, and this strip moves forever. */
.twktk-pause {
	flex: 0 0 auto;
	width: 30px;
	border: 0;
	background: transparent;
	color: inherit;
	opacity: .55;
	cursor: pointer;
	padding: 0;
	position: relative;
}

.twktk-pause:hover,
.twktk-pause:focus-visible {
	opacity: 1;
}

.twktk-wrap.is-paused .twktk-pause {
	opacity: 1;
	color: var(--twktk-accent-readable, var(--twktk-accent));
}

.twktk-pause::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 8px;
	height: 10px;
	transform: translate(-50%, -50%);
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.twktk-wrap.is-paused .twktk-pause::before {
	border: 0;
	width: 0;
	height: 0;
	border-left: 9px solid currentColor;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
}

.twktk-wrap.is-paused .twktk-track {
	animation-play-state: paused;
}

/* Hover and keyboard focus pause, so a reader can catch a headline without
   hunting for the button.

   Scoped to the viewport, not the wrap. The pause button lives in the wrap, so
   a wrap-level rule meant the strip was already paused by the time the pointer
   reached the button, the click appeared to do nothing, and clicking again to
   resume could not work either because the pointer was still on it. */
.twktk-viewport:hover .twktk-track,
.twktk-viewport:focus-within .twktk-track {
	animation-play-state: paused;
}

/* The button's own state outranks hover, so a strip paused by the button stays
   paused when the pointer wanders across the items. */
.twktk-wrap.is-paused .twktk-viewport:hover .twktk-track,
.twktk-wrap.is-paused .twktk-viewport:focus-within .twktk-track {
	animation-play-state: paused;
}

@media (max-width: 782px) {
	.twktk-wrap { font-size: .78rem; }
	.twktk-label { padding: 0 10px; font-size: .68rem; }
}

/* The reduced-motion rules and the diagnostics override are NOT in this file.
   They are printed inline with the page by twktk_motion_css(), because a rule
   that has to change to fix a bug is a rule that must not be able to arrive
   stale from an edge cache. */