@font-face {
	font-display: swap;
	font-family: 'ys-display';
	font-weight: 400;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/display-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 300;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/text-light.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 300;
	font-style: italic;
	src: url('/yastatic/s3/home/fonts/ys/4/text-light-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 400;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/text-regular.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 400;
	font-style: italic;
	src: url('/yastatic/s3/home/fonts/ys/4/text-regular-italic.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'ys';
	font-weight: 500;
	font-style: normal;
	src: url('/yastatic/s3/home/fonts/ys/4/text-medium.woff2') format('woff2');
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	/* outline: 1px solid #f00; */
}

:root {
	--col-white: #fff;
	--col-text: #ccc;
	--col-subtitle: #999;
	--col-block: #555;
	--col-black: #000;
	--col-link: #f90;

	--size-font: 16px;
	--width: min(790px, calc(100% - 2rem));

	@media (max-width: 700px) {
		--size-font: 15px;
	}

	@media (max-width: 400px) {
		--size-font: 14px;
	}
}

html {
	font-size: var(--size-font);

	#rs-root {
		font-family: 'ys', sans-serif;
		font-weight: 300;
		font-size: 1rem;
		line-height: 1.5rem;
		letter-spacing: .01rem;

		color: var(--col-text);
		background-color: var(--col-black);

		position: relative;
		padding: 6rem 0 3rem 0;

		transition: all .5s ease-in-out;

		&:has(.rs-light.active) {
			color: var(--col-black);
			background-color: var(--col-white);

			.rs-h3 {
				color: var(--col-black);
			}

			.rs-compare-center {
				&::before {
					border: 1px solid var(--col-black);
				}
			}
		}

		.rs-link {
			text-decoration-line: underline;
			text-underline-offset: 3px;
			text-decoration-thickness: 1px;

			color: var(--col-link);

			&:hover {
				text-decoration: none;
			}
		}

		.rs-effect {
			pointer-events: none;
			user-select: none;
			overflow: hidden;
			position: absolute;
			inset: 0 0 auto 0;
			height: 40rem;

			&::after {
				content: '';

				background-color: var(--col-white);
				border-radius: 50%;

				z-index: 9;
				position: absolute;
				top: -300px;
				left: 0;
				width: 100%;
				height: 300px;

				animation: flicker 10s infinite alternate;
			}
		}

		.rs-narrow {
			width: var(--width);
			margin-inline: auto;
		}

		.rs-insert {
			margin-block: 3rem;
		}

		.rs-center {
			text-align: center;
		}
	}
}

@keyframes flicker {
	0%, 100% {
		box-shadow:
			0 0 .25rem #fff,
			0 0 .5rem #fff,
			0 0 1rem #39f,
			0 0 2rem #39f,
			0 0 4rem #39f,
			0 0 10rem #39f;
	}

	38%, 45%, 75% {
		box-shadow:
			0 0 .25rem #fff,
			0 0 .5rem #fff,
			0 0 1rem #39f,
			0 0 2rem #39f,
			0 0 4rem #39f,
			0 0 10rem #39f,
			0 0 20rem #39f,
			0 0 40rem #39f;
	}

	42%, 73%, 85% {
		box-shadow:
			0 0 .25rem #fff,
			0 0 .5rem #f66,
			0 0 1rem #f66,
			0 0 2rem #f66,
			0 0 4rem #f66,
			0 0 10rem #f66,
			0 0 20rem #f66;
	}
}

.rs-text {
	margin-block: 1.5rem;

	span {
		font-weight: 500;
		color: var(--col-white);
	}
}

.rs-h1 {
	font-weight: 400;
	font-family: 'ys-display';
	font-size: 3.5rem;
	line-height: 3.75rem;
	text-wrap: balance;
	text-shadow:
		0 2px 1px rgba(0, 0, 0, .5),
		0 4px 2px rgba(0, 0, 0, .5),
		0 8px 4px rgba(0, 0, 0, .5),
		0 16px 8px rgba(0, 0, 0, .5),
		0 32px 16px rgba(0, 0, 0, .5);

	color: var(--col-white);

	z-index: 99;
	position: relative;
	margin-block: 3rem;
}

.rs-h2 {
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 2rem;
	letter-spacing: .05rem;

	color: var(--col-white);

	margin-block: 4.5rem 1.5rem;
}

.rs-h3 {
	font-weight: 500;
	font-size: 1.125rem;
	line-height: 1.5rem;
	letter-spacing: .05rem;

	color: var(--col-white);

	margin-block: 3rem 1.5rem;

	&.rs-title {
		margin-block: 3rem .5rem;

		& + .rs-subtitle {
			font-style: italic;
			color: var(--col-subtitle);
			margin-block: .5rem 1.5rem;

			.rs-kids {
				font-weight: 400;
				color: #f60;
			}

			.rs-cartoon {
				font-weight: 400;
				color: #fc0;
			}

			.rs-fantasy {
				font-weight: 400;
				color: #f7e;
			}

			.rs-adventure {
				font-weight: 400;
				color: #5dd;
			}

			.rs-thriller {
				font-weight: 400;
				color: #c9f;
			}

			.rs-horror {
				font-weight: 400;
				color: #cc6;
			}

			.rs-ticket-one {
				font-weight: 400;
				color: #e5f3df;
			}

			.rs-ticket-two {
				font-weight: 400;
				color: #fdc579;
			}

			.rs-ticket-three {
				font-weight: 400;
				color: #cc3028;
			}
		}
	}
}

.rs-source {
	color: var(--col-white);
	opacity: .35;
}

.rs-copyright {
	font-size: 0.6rem;
	line-height: .75rem;
	letter-spacing: .05rem;
	text-transform: uppercase;
	opacity: .5;
}

.rs-cast {
	display: table;
	width: 100%;
	margin-block: 1.5rem;

	.rs-row {
		display: table-row;

		.rs-col {
			display: table-cell;
			width: 50%;
			padding: .5rem 1rem;

			@media (max-width: 400px) {
				padding: .25rem .5rem;
			}

			&:first-child {
				font-style: italic;
				text-align: right;
				opacity: .35;
			}
		}
	}
}

.rs-wrapper {
	position: relative;

	&.rs-wrapper-back {
		--radius: .5rem;
		background-color: var(--col-block);
		border-radius: var(--radius);

		padding-block: 2rem 1rem;
		padding-inline: 2rem;

		.rs-h3 {
			margin-block: 0;
		}

		@media (max-width: 700px) {
			padding-inline: 1.5rem;
		}

		@media (max-width: 400px) {
			padding-inline: 1rem;
		}
	}

	&.rs-columns {
		display: flex;
		flex-flow: row wrap;
		align-items: start;
		justify-content: center;
		gap: 2rem;

		&.rs-columns-compare {
			flex-flow: row nowrap;

			.rs-column-left {
				align-items: flex-end;

			}

			.rs-column-right {
				align-items: flex-start;
			}

			svg {
				width: 100%;
				height: auto;
			}
		}

		.rs-column {
			display: flex;
			flex-flow: column;
			gap: 1.5rem;

			.rs-h3 {
				margin-block: 0;
			}
		}
	}
}

.rs-share {
	list-style: none;
	display: flex;
	flex-flow: row nowrap;
	gap: 1rem;
	justify-content: center;
	padding-block: 3rem;

	li {
		a {
			border-radius: 50%;

			overflow: hidden;
			display: block;
			width: 40px;
			height: 40px;

			&:hover {
				background-color: var(--col-black);
			}

			img {
				mix-blend-mode: difference;
			}
		}
	}
}

.rs-details {
	--radius: .5rem;
	border-radius: var(--radius);

	&[open] {
		summary {
			border-radius: var(--radius) var(--radius) 0 0;

			&::after {
				transform: rotate(45deg);
			}
		}
	}

	summary {
		cursor: pointer;
		user-select: none;

		font-size: 1.125rem;
		line-height: 1.5rem;
		font-weight: 500;

		color: var(--col-white);
		background-color: var(--col-block);
		border-radius: var(--radius);

		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 1.5rem 1.5rem 1.5rem 2rem;

		@media (max-width: 700px) {
			padding: 1rem 1rem 1rem 1.5rem;
		}

		@media (max-width: 400px) {
			padding: 1rem;
		}

		&::-webkit-details-marker {
			display: none;
		}

		&::after {
			content: '';

			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%23fff' fill='none' stroke-width='2px' d='M12,4v16M4,12h16'/%3E%3C/svg%3E");
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			border-radius: 50%;

			flex: 0 0 24px;
			width: 24px;
			height: 24px;
			transition: all .2s ease-in-out;
		}
	}

	.rs-content {
		background-color: var(--col-block);
		border-top: 1px solid var(--col-black);
		border-radius: 0 0 var(--radius) var(--radius);

		padding-block: 1rem;
		padding-inline: 2rem;

		@media (max-width: 700px) {
			padding-inline: 1.5rem;
		}

		@media (max-width: 400px) {
			padding-inline: 1rem;
		}
	}
}

.rs-figure {
	flex: 0 1 auto;
	display: flex;
	flex-flow: column;
	justify-content: start;
	align-items: center;
	gap: 1rem;

	figcaption {
		font-size: .85rem;
		text-align: center;
	}

	object {
		border: none;

		@media (max-width: 400px) {
			/* width: 100%; */
		}
	}

	&.rs-temp-small {
		figcaption {
			padding-right: 18px;
		}
	}

	&.rs-temp-middle {
		figcaption {
			padding-right: 25px;
		}
	}

	&.rs-temp-big {
		figcaption {
			padding-right: 25px;
		}
	}
}

.rs-barchart {
	display: block;

	.domain {
		display: none;
	}

	.tick {
		line {
			stroke: var(--col-white);
		}

		text {
			font-family: 'ys', sans-serif;
			fill: var(--col-text);
		}
	}

	.axis-x {
		line {
			opacity: .25;
		}

		text {
			font-size: .75rem;
			opacity: .75;
		}
	}

	.axis-y {
		text {
			font-size: .85rem;
		}
	}
}

.rs-linechart {
	display: block;

	.domain {
		display: none;
	}

	.chart {
		path {
			fill: none;
			stroke-linecap: round;
			stroke-linejoin: round;
		}
	}

	.tick {
		line {
			stroke: var(--col-text);
		}

		text {
			font-family: 'ys', sans-serif;
			font-size: .75rem;

			opacity: .75;
			fill: var(--col-text);
		}
	}

	.axis-y {
		line {
			opacity: .25;
		}

		text {
			text-anchor: start;
			transform: translate(0, -8px);
		}
	}
}

.rs-treemap {
	display: block;

	text {
		font-family: 'ys', sans-serif;
		fill: var(--col-text);
	}
}

.rs-viz {
	--size: min(100vw, 100vh, 600px);
	z-index: 9;
	position: sticky;
	top: calc((max(100dvh, var(--size)) - var(--size)) / 2);
	left: 0;
	display: flex;
	flex-flow: column;
	align-items: stretch;
	justify-content: center;
	height: 100dvh;
	max-height: var(--size);

	.rs-h3 {
		margin-block: 1.5rem;
	}

	.rs-copyright {
		margin-block: 1.5rem;
	}
}

.rs-compare {
	display: flex;
	flex-flow: column;
	justify-content: center;

	.rs-temp {
		position: absolute;
		top: 0;
		left: 0;
		width: 0;
		height: 0;
	}

	.rs-compare-title {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		margin-block: 0 1.5rem;

		.rs-compare-left {
			font-weight: 500;
			font-size: 1rem;
			text-align: right;
			flex: 1 1 100px;
			margin-right: 2rem;
		}

		.rs-compare-right {
			font-weight: 500;
			font-size: 1rem;
			flex: 1 1 100px;
			margin-left: 2rem;
		}

		.rs-compare-center {
			flex: 0 0 2rem;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2rem;
			height: 2rem;

			&::before {
				content: '';

				border: 1px solid var(--col-white);
				position: absolute;
				display: block;
				width: 2rem;
				height: 2rem;
				transform: rotate(45deg);
			}
		}
	}

	.rs-scheme {
		opacity: 0;
		transition: opacity .5s ease-in-out;

		.rs-other {
			opacity: 1;
			transition: opacity .5s ease-in-out;
		}

		&.active {
			opacity: 1;

			&.selection {
				.rs-other {
					opacity: .1;
				}
			}
		}
	}
}

.rs-step {
	z-index: 99;
	position: relative;
	padding: 0 0 100vh 0;

	p {
		background-color: var(--col-block);
		border-radius: .5rem;

		width: min(calc(100% - 2rem), 500px);
		margin: 0 auto;
		padding: 1rem 2rem;

		@media (max-width: 400px) {
			padding: 1rem;
		}

		span {
			font-weight: 500;
			color: var(--col-white);
		}
	}
}