<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">
/* font family 'Favorit' */

body.tumblr {
	--fullscreen-background: none;
	background: #001935;
}

body.tumblr.fucksafari::before {
	content: none;
	background: none;
}

@media (max-width: 1240px) {
	/* right sidebar 'check out these' recommended etc. hidden */
}

@media (max-width: 1161px) {
	/* left menu compact */
}

@media (max-width: 1017px) {
	/* left menu icons only */
}

@media (max-width: 989px) {
	/* phoneposter mode - top menu bar, slideout desktop-style menu hamburger icon */
}

/******************************************************************************/

body.toktik {
	background-color: #ffffff;
	--fullscreen-background: url(midlhbri2.jpg);
	margin: 0;
}

body.toktik .container {
	/* TODO custom max-width? */
}

body.toktik .youresoclose {
	border: none;
	background: #ffffff;
	padding: 1.5rem; /* phoneposter mode no padding at all */
	/* TODO box-shadow if screen wider than container width? */
}

.here-toktik {
	border: none;
	padding: 0;
	background: #ffffff;
	color: #161823;
	font-family: TikTokFont, Arial, Tahoma, PingFangSC, sans-serif;
	font-weight: 400;
}

.tokuser {
	display: flex;
	column-gap: 1.75rem;
	align-items: center;
	margin-bottom: 1.25rem;
}

.tokuser-avatar {
	width: 13.25rem;  /* 212px... no idea where they got this number but it's hardcoded in inline styles on tiktok site */
	height: 13.25rem;
}

.tokmainpfp-wrappah {
	border-radius: 6.625rem;
	overflow: hidden;
}

.tokmainpfp-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
}

.tokuser-bio {
	flex-grow: 1;
}

.tokbio {
	display: flex;
	flex-direction: column;

	row-gap: 0.75em;
}

.tokbio-displayname-username {
	display: flex;
	column-gap: 0.75rem;
	align-items: center;
}

.tokbio-username {
	margin: 0;
	font-size: 1.5em;
	font-weight: 700;
	font-family: TikTokDisplayFont, Arial, Tahoma, PingFangSC, sans-serif;
}

.tokbio-displayname {
	margin: 0;
	font-size: 1.125em;
	font-weight: 500;
}

.tokbio-metrics {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
}

.tokbio-metrics &gt; li {

}

.tokbio-metrics &gt; li:not(:last-child) {
	margin-right: 1.25em;
}

.tokbio-metrics .number {
	font-size: 1.125em;
	font-weight: 700;
}

.tokbio-metrics .label {
	color: #16182380;
	font-weight: 400;
	/* line-height: 1.25em*/
}

.toktabs-wrappah {
	/* some of this to be moved to .toktabs once this wrappah is Eliminated w/ Xtreme Prejudis */
	margin-bottom: 1.5rem;
	display: flex;
	height: 2.75rem; /* 44px */
	border-bottom: 1px solid #efefef;
}

.toktabs {
	display: flex;
}

.toktabs-tab {
	padding-left: 32px;
	padding-right: 32px;
	display: flex;
	align-items: center;
	column-gap: 0.25rem;
	font-size: 1.125rem;
	color: #73747b;
	text-decoration: none;
	text-rendering: optimizespeed; /* TODO is this used anywhere else? probably */
	font-weight: 500;
	justify-content: center;

	border-bottom: 2px solid transparent;
}

.toktabs-tab.active {
	color: #161823;
	border-bottom-color: #161823;
}

/*.toktabs:not(:hover)*/ .toktabs-tab.active {
	border-bottom-color: #161823;
}

/*.toktabs:hover .toktabs-tab.active:not(:hover) {
	border-bottom-color: transparent;
}*/

.toktabs:hover .toktabs-tab:hover {
	border-bottom-color: transparent;
	border-bottom-color: #161823;
}

.toktabs-icon {
	width: 1.5rem;
	height: 1.5rem;
	min-width: 1.5rem;
	min-height: 1.5rem;
}

.tokvids {
	display: grid;
	gap: 1.5rem 1rem;
	grid-template-columns: repeat(auto-fill, minmax(11.25rem /* 180px */, 1fr));
}

.tokvids-card {
	/*max-width: 20rem;*/
	border-radius: 0.25rem;
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 3/4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tokcard-img {
	width: 100%;
	height: auto;
}

/* the fucked black bit at the bottom of the video squares */
.tokvids-card::after {
	pointer-events: none;
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 6.25rem; /*3.75rem;*/ /* 100px on user videos page - 60px on 'videos that used this sound' page */
	background: linear-gradient(rgba(18, 18, 18, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
	padding-bottom: 0.75rem;
	padding-left: 0.75rem;
	padding-right: 0.75rem;
}

.tokwords {
	font-family: 'Times New Roman', serif;
}

.tokpostvid-wrappah {
	width: 100%;
	height: calc(100vh - 5.5rem);
	overflow: hidden;
	background-color: #111;
	border-top-left-radius: 0.25rem;
	border-top-right-radius: 0.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tokpostvid-wrappah::before {
	/* TOOD */
}

.tokpostvid-video {
	width: 100%;
	max-height: 100%;
	height: auto;
}

.tokpost-info {
	/*background-color: #d8d8d8;*/ /* for testing */
	background-color: #f8f8f8;
	border-bottom-left-radius: 0.75rem;
	border-bottom-right-radius: 0.75rem;

	padding: 1em;
}

.tokpost-infoheader {
	display: flex;
	justify-content: space-between;
	margin-bottom: 1em;
}

.tokpost-author {
	display: flex;
	column-gap: 0.5em;
	align-items: center;
	text-decoration: none;
}

.tokpost-avatar-wrappah {
	overflow: hidden;
	min-width: 3em;
	width: 3em;
	height: 3em;
	border-radius: 1.5em;
}

.tokpost-avatar-img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1;
}

.tokpost-summary {
	display: flex;
	flex-direction: column;
}

.tokpost-username {
	font-size: 1.125em;
	font-weight: 700;
	text-decoration: none;
}

.tokpost-username,
.tokpost-username:link,
.tokpost-username:visited {
	color: #161823;
}

.tokpost-displayname-date {
	font-size: 0.875em;
	color: #4e5058;
}

.tokpost-author:hover .tokpost-username {
	text-decoration: underline;
}

.tokpost-actions {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-description &gt; *:first-child {
	margin-top: 0;
}
.tt-description &gt; *:last-child {
	margin-bottom: 0;
}

.tt-description a,
.tt-description a:link,
.tt-description a:visited {
	color: #2b5db9;
	text-decoration: none;
	font-weight: 500;
}
.tt-description a:hover {
	text-decoration: underline;
}

.tt-sound {
	/*TODO something about margin*/
	font-size: 0.875em;
	/*color: #161823;*/
	/*color: #4e5058;*/
	color: #73747b;
	list-style: none;
	padding: 0 0 0 1.125rem;
	margin: 0.5rem 0 0 0;
	line-height: 1.5;
}

.tt-sound a,
.tt-sound a:link {
	text-decoration: none;
	color: #161823;
}

.tt-sound a:hover {
	text-decoration: underline;
}

.tt-sound &gt; li {
	position: relative;
}

.tt-sound-icon {
	position: absolute;
	right: 100%;
	width: 1em;
	height: 1.5em; /* HACK! line height! */
	margin-right: 0.25rem;
	display: block;
}

.tt-sound &gt; li:not(:first-child)::before {
	content: '\2022';
	position: absolute;
	right: 100%;
	width: 1em;
	text-align: center;
	/*height: 1.5em;*/
	margin-right: 0.25rem;
	display: block;
}

.tok-postcomments {
}

.tok-commentwrite {
	display: flex;
	column-gap: 1rem;
}

.tok-commentwrite-field {
	flex-grow: 1;
	border-radius: 0.5rem;
	background-color: #f1f1f2;
	height: 3rem;
}

.tok-commentwrite-button {
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	color: #c0c0c0;
	pointer-events: none;
}

.tok-comments {
	border-top: 1px solid #e0e0e0;
	/*padding-top: 1rem;*/
	position: relative;
	margin-top: 1.5rem;
}

.fakecomment {
	height: 69px;
	background-image: url(fakecomment.png);
	background-position: center;
	background-size: 999999px 69px;
	position: relative;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}
.fakecomment::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 144px;
	background-image: url(fakecomment.png);
	background-position: left;
}
.fakecomment::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 62px;
	background-image: url(fakecomment.png);
	background-position: right;
}

.commentsuc {
	position: absolute;
	top: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	left: 0;
	right: 0;
}

.commentsuc &gt; img {
	margin-left: 1rem;
}

.commentsuc-text {
	flex-grow: 1;
	font-size: 1.5rem;
	font-weight: 500;
	font-style: italic;
	text-align: center;
}

.tokbtn { /* MOVE THIS THE FUCK UP THERE! */
	font-weight: 500;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1rem;
	padding-right: 1rem;
	border-radius: 0.375rem;
	font-weight: 500;
	/*min-width: 108px;*/
	font-family: inherit;
	font-size: 1rem;
	border: none;
	outline: none;

	color: #000000;
	background-color: rgba(0, 0, 0, 0.05);
}

.tokbtn:hover {
	background-color: rgba(0, 0, 0, 0.12);
}

.tokbtn:active {
	background-color: rgba(0, 0, 0, 0.14);
}

.tokbtn:focus {
	outline: none;
}

.tokbtn-primary {
	color: #ffffff;
	background-color: #fe2c55;
}

.tokbtn-primary:hover {
	background-color: #ea284e;
}

.tokbtn-primary:active {
	background-color: #e0274b;
}

.tokpost-actions .tokbtn {
	border-radius: 2px;
	height: 2.25rem;

}

.tokbtn-viewtttfuckit {
	padding: 0;
	width: 2.25rem;
}

.ttbtnlogo {
	height: 1.5rem;
	width: auto;
	opacity: 0.7;
}

.tok-post {
	display: grid;
	grid-template-columns: auto 20rem;
	grid-template-areas: "main side" "comments side" "back side";
	column-gap: 1.5rem;
	row-gap: 1.5rem;
}
.tok-postmain {
	grid-area: main;
}
.tok-postside {
	grid-area: side;
}
.tok-postcomments {
	grid-area: comments;
}
.tok-postback {
	grid-area: back;
}

.tokrelated-heading {
	font-weight: 700;
	font-size: 1.125rem;
	margin-bottom: 1rem;
}

.tokrelated-vids .tokvids-card {
	max-width: unset;
}

@media (min-width: 900px) {
	.tokrelated-vids {
		gap: 1rem 1rem;
		grid-template-columns: repeat(2, 1fr);
	}

	.tok-post {
		grid-template-rows: auto auto 1fr;
	}
}

@media (max-width: 899px) {
	.tok-post {
		row-gap: 1.5rem;
	}

	/* show 'related' below main vid */
	.tok-post {
		grid-template-columns: auto;
		grid-template-areas: "main" "comments" "back" "side";
	}

	/* slightly cheeky bodge to 'fullscreenify' the top player */
	.tok-postmain {
		margin-left: -1.5rem;
		margin-right: -1.5rem;
		margin-top: -1.5rem;
	}

	.tokpostvid-wrappah {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

	.tokpost-info {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}
}

@media (max-width: 666px) {
	/* phoneposter mode */

	body.toktik .youresoclose {
		padding: 1rem;
	}

	body.toktik-list .youresoclose {
		padding-left: 0;
		padding-right: 0;
	}

	.tokuser {
		flex-direction: column;
		row-gap: 0.75rem;
		margin-bottom: 1rem;
	}

	.tokuser-avatar {
		width: 6rem;
		height: 6rem;
	}

	.tokmainpfp-wrappah {
		border-radius: 3rem;
	}

	.tokbio {
		width: 100%;
		row-gap: 1em;
	}

	.tokbio-displayname-username {
		justify-content: center;
	}

	.tokbio-username {
		font-size: 1rem;
		font-weight: 500;
	}

	.tokbio-username::before {
		content: '@';
	}

	.tokbio-displayname {
		display: none; /* TODO try absolute positioning */
	}

	.tokbio-metrics {
		width: 100%;
		padding-left: 3rem;
		padding-right: 3rem;
	}

	.tokbio-metrics &gt; li {
		flex: 1 1 0;
	}

	.tokbio-metrics &gt; li,
	.tokbio-metrics &gt; li:not(:last-child) {
		margin: 0;
	}

	.tokbio-metrics .number,
	.tokbio-metrics .label {
		display: block;
		text-align: center;
		white-space: nowrap;
	}

	.tokbio-metrics .number {
		font-size: 1.0625rem;
	}

	.tokbio-metrics .label {
		font-size: 0.8125rem;
		color: #8a8b91;
	}

	.tokbio-description {
		text-align: center;
		padding-left: 2.5rem;
		padding-right: 2.5rem;
		font-size: 0.875rem;
	}

	.toktabs-wrappah {
		border-top: 1px solid #efefef;
		border-bottom: none;
		width: 100%;
		margin-bottom: 0;
	}

	.toktabs {
		width: 100%;
	}

	.toktabs-tab {
		flex: 1 1 0;
	}

	.toktabs-label {
		display: none;
	}

	.toklist-vids {
		/* TODO this for tokpost as well? */
		gap: 1px;
		grid-template-columns: repeat(3, 1fr);
	}

	.toklist-vids .tokvids-card {
		border-radius: 0;
	}

	.tok-postmain {
		margin-left: -1rem;
		margin-right: -1rem;
		margin-top: -1rem;
	}
}

.tok-postcomments {
	display: none;
}
</pre></body></html>