/*
 * YouTube Shorts: a shelf of posters in the article (.xy-shorts) and the theater that plays
 * them over it (.xy-shorts-theater). The shelf uses the album's heading so the two read as
 * siblings, and has no filled button, so the album's Open gallery stays the page's one
 * filled action. Rules that reset article content styles use two classes so .post-content
 * heading, paragraph, link and list rules do not reach them.
 */

/* ----- Tokens ----- */

.xy-shorts {
	--xy-shorts-ink: var(--c-headings, #161616);
	--xy-shorts-ink-2: #555;
	--xy-shorts-line: rgb(0 0 0 / 10%);
	--xy-shorts-tile: #f7f7f7;
	--xy-shorts-poster-bg: #e8e8e8;
	--xy-shorts-action: var(--c-main, #3c3fde);
	--xy-shorts-action-ink: var(--c-main, #3c3fde);
	--xy-shorts-gap: 12px;
	--xy-shorts-cols: 4;
	--xy-shorts-ui: var(--ui-font, "Outfit", system-ui, sans-serif);
	--xy-shorts-body: var(--body-font, "Inter", system-ui, sans-serif);

	container-type: inline-size;
	margin-block: 2em;
	color: var(--xy-shorts-ink);
	font-family: var(--xy-shorts-body);
}

/* ----- Shared pieces ----- */

.xy-shorts,
.xy-shorts *,
.xy-shorts-theater,
.xy-shorts-theater * {
	box-sizing: border-box;
}

/* The theme gives every button a fixed height, uppercase text and a black hover. */
:is(.xy-shorts, .xy-shorts-theater) button {
	block-size: auto;
	min-block-size: 0;
	margin: 0;
	box-shadow: none;
	font-family: inherit;
	line-height: inherit;
	letter-spacing: normal;
	text-transform: none;
}

.xy-shorts .xy-shorts-sr {
	position: absolute;
	overflow: hidden;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	white-space: nowrap;
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-arrow {
	display: grid;
	place-items: center;
	inline-size: 36px;
	block-size: 36px;
	padding: 0;
	border: 1px solid var(--xy-shorts-line);
	border-radius: 50%;
	background: transparent;
	color: var(--xy-shorts-ink);
	cursor: pointer;
}

.xy-shorts-theater .xy-shorts-arrow {
	inline-size: 48px;
	block-size: 48px;
	border-color: rgb(255 255 255 / 22%);
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-arrow:hover:not([disabled]) {
	border-color: var(--xy-shorts-ink);
	background: transparent;
	color: var(--xy-shorts-ink);
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-arrow[disabled] {
	opacity: 0.35;
	cursor: default;
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-arrow svg {
	inline-size: 16px;
	block-size: 16px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-subscribe {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-block-size: 44px;
	padding: 10px 16px;
	border: 1.5px solid var(--xy-shorts-action);
	border-radius: var(--xy-radius-button, 6px);
	color: var(--xy-shorts-action-ink);
	font: 600 14px/1.3 var(--xy-shorts-ui);
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-subscribe:hover {
	border-color: var(--c-main, #3c3fde);
	background: var(--c-main, #3c3fde);
	color: #fff;
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: var(--xy-shorts-ink-2);
	font: 500 13px/1.3 var(--xy-shorts-ui);
	text-decoration: none;
	white-space: nowrap;
}

:is(.xy-shorts, .xy-shorts-theater) .xy-shorts-more:hover {
	color: var(--xy-shorts-ink);
}

:is(.xy-shorts, .xy-shorts-theater) :is(.xy-shorts-more, .xy-shorts-subscribe) svg {
	inline-size: 13px;
	block-size: 13px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ----- Heading: the album's rule and title ----- */

.xy-shorts .xy-shorts-rule {
	inline-size: 48px;
	block-size: 3px;
	margin-block-end: 14px;
	background: var(--xy-brand-gradient, linear-gradient(90deg, #e40666 0%, #3c3fde 100%));
}

.xy-shorts .xy-shorts-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 6px;
}

.xy-shorts .xy-shorts-heading {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	color: var(--xy-shorts-ink);
	font: 600 26px/1.15 var(--xy-shorts-ui);
	letter-spacing: -0.02em;
}

.xy-shorts .xy-shorts-count {
	color: var(--xy-shorts-ink-2);
	font: 500 15px/1 var(--xy-shorts-ui);
	letter-spacing: 0;
}

.xy-shorts .xy-shorts-nav {
	display: flex;
	gap: 8px;
}

.xy-shorts .xy-shorts-nav[hidden] {
	display: none;
}

/* The event the Shorts are from, under the heading, so the row reads as this event's. */
.xy-shorts .xy-shorts-event {
	max-inline-size: 60ch;
	margin: 0 0 16px;
	color: var(--xy-shorts-ink-2);
	font: 400 14px/1.45 var(--xy-shorts-body);
}

.xy-shorts .xy-shorts-event-name {
	color: var(--xy-shorts-ink);
	font-weight: 600;
}

/* ----- Shelf ----- */

.xy-shorts .xy-shorts-list {
	display: grid;
	grid-template-columns: repeat(var(--xy-shorts-cols), minmax(0, 1fr));
	gap: var(--xy-shorts-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* A full row scrolls sideways and keeps one row in view, with the channel tile last. */
.xy-shorts.is-scroll .xy-shorts-list {
	--xy-shorts-fade-start: 0px;
	--xy-shorts-fade-end: 0px;

	grid-template-columns: none;
	grid-auto-columns: calc((100% - var(--xy-shorts-gap) * (var(--xy-shorts-cols) - 1)) / var(--xy-shorts-cols));
	grid-auto-flow: column;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	mask-image: linear-gradient(to right, transparent, #000 var(--xy-shorts-fade-start), #000 calc(100% - var(--xy-shorts-fade-end)), transparent);
}

.xy-shorts.is-scroll .xy-shorts-list::-webkit-scrollbar {
	display: none;
}

/* Fade whichever edge has more posters behind it. */
.xy-shorts.has-before .xy-shorts-list {
	--xy-shorts-fade-start: 32px;
}

.xy-shorts.has-after .xy-shorts-list {
	--xy-shorts-fade-end: 48px;
}

.xy-shorts .xy-shorts-item,
.xy-shorts .xy-shorts-channel {
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	scroll-snap-align: start;
}

.xy-shorts .xy-shorts-item::before,
.xy-shorts .xy-shorts-channel::before {
	content: none;
}

.xy-shorts .xy-shorts-poster {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	background: var(--xy-shorts-poster-bg);
}

.xy-shorts .xy-shorts-poster img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
	transition: transform 0.4s ease;
}

/* A soft floor so the play mark reads on bright stage lighting. */
.xy-shorts .xy-shorts-poster::after {
	position: absolute;
	inset: auto 0 0;
	block-size: 34%;
	background: linear-gradient(to top, rgb(0 0 0 / 45%), transparent);
	content: "";
	pointer-events: none;
}

.xy-shorts .xy-shorts-play {
	position: absolute;
	inset-block-end: 10px;
	inset-inline-start: 10px;
	z-index: 1;
	display: grid;
	place-items: center;
	inline-size: 34px;
	block-size: 34px;
	border: 1.5px solid rgb(255 255 255 / 85%);
	border-radius: 50%;
	background: rgb(0 0 0 / 28%);
	backdrop-filter: blur(6px);
	color: #fff;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.xy-shorts .xy-shorts-play svg {
	inline-size: 12px;
	block-size: 12px;
	margin-inline-start: 2px;
	fill: currentcolor;
}

.xy-shorts .xy-shorts-poster:hover img {
	transform: scale(1.035);
}

.xy-shorts .xy-shorts-poster:hover .xy-shorts-play {
	border-color: #fff;
	background: #fff;
	color: #101016;
}

.xy-shorts .xy-shorts-poster:focus-visible {
	outline: 2px solid var(--xy-shorts-action);
	outline-offset: 3px;
}

.xy-shorts .xy-shorts-label {
	margin: 10px 0 0;
	color: var(--xy-shorts-ink);
	font: 600 14px/1.3 var(--xy-shorts-ui);
	letter-spacing: -0.01em;
}

/* ----- Channel tile: the YouTube promotion, in a poster's footprint ----- */

.xy-shorts .xy-shorts-channel {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 10px;
	aspect-ratio: 9 / 16;
	padding: 14px;
	border: 1px solid var(--xy-shorts-line);
	border-radius: 10px;
	background: var(--xy-shorts-tile);
}

/* With fewer Shorts than a row holds, the promotion runs across the rest of the row as
 * plain text on the posters' foot line, so the row never ends in empty boxes. */
.xy-shorts .xy-shorts-channel.is-wide {
	aspect-ratio: auto;
	padding: 0 0 4px 14px;
	border: 0;
	background: none;
}

.xy-shorts .xy-shorts-channel.is-span-2 {
	grid-column: span 2;
}

.xy-shorts .xy-shorts-channel.is-span-3 {
	grid-column: span 3;
}

.xy-shorts .xy-shorts-mark {
	flex: none;
	inline-size: 34px;
	block-size: 24px;
}

.xy-shorts .xy-shorts-channel-name {
	margin: 0;
	color: var(--xy-shorts-ink);
	font: 700 15px/1.25 var(--xy-shorts-ui);
	letter-spacing: -0.015em;
}

.xy-shorts .xy-shorts-channel-text {
	margin: 4px 0 0;
	color: var(--xy-shorts-ink-2);
	font-size: 12.5px;
	line-height: 1.5;
}

.xy-shorts .xy-shorts-channel.is-wide :is(.xy-shorts-channel-name, .xy-shorts-channel-text) {
	max-inline-size: 34ch;
}

.xy-shorts .xy-shorts-channel.is-wide .xy-shorts-channel-name {
	font-size: 18px;
}

.xy-shorts .xy-shorts-channel.is-wide .xy-shorts-channel-text {
	font-size: 14px;
}

.xy-shorts .xy-shorts-actions {
	display: grid;
	gap: 8px;
}

.xy-shorts .xy-shorts-channel:not(.is-wide) .xy-shorts-subscribe {
	min-block-size: 38px;
	padding: 8px 12px;
	font-size: 13px;
}

.xy-shorts .xy-shorts-channel.is-wide .xy-shorts-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

/* ----- Position line under a scrolling row ----- */

.xy-shorts .xy-shorts-track {
	position: relative;
	overflow: hidden;
	block-size: 2px;
	margin-block-start: 18px;
	border-radius: 2px;
	background: var(--xy-shorts-line);
}

.xy-shorts .xy-shorts-track[hidden] {
	display: none;
}

.xy-shorts .xy-shorts-track span {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	border-radius: inherit;
	background: var(--xy-brand-gradient, linear-gradient(90deg, #e40666 0%, #3c3fde 100%));
}

/* ----- Narrow columns (phones): a swipe row, posters at 58% so the next one peeks ----- */

@container (width < 540px) {
	.xy-shorts .xy-shorts-heading {
		font-size: 22px;
	}

	.xy-shorts .xy-shorts-nav {
		display: none;
	}

	.xy-shorts .xy-shorts-list,
	.xy-shorts.is-scroll .xy-shorts-list {
		--xy-shorts-gap: 10px;

		grid-template-columns: none;
		grid-auto-columns: 58%;
		grid-auto-flow: column;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.xy-shorts .xy-shorts-channel,
	.xy-shorts .xy-shorts-channel.is-wide {
		grid-column: auto;
		aspect-ratio: 9 / 16;
		padding: 16px;
		border: 1px solid var(--xy-shorts-line);
		background: var(--xy-shorts-tile);
	}

	.xy-shorts .xy-shorts-channel.is-wide .xy-shorts-channel-name {
		font-size: 16px;
	}

	.xy-shorts .xy-shorts-channel.is-wide .xy-shorts-channel-text {
		font-size: 13px;
	}

	.xy-shorts .xy-shorts-channel.is-wide .xy-shorts-actions {
		display: grid;
	}
}

/* ----- Theater ----- */

html.xy-shorts-open {
	overflow: hidden;
}

.xy-shorts-theater {
	position: fixed;
	inset: 0;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	max-block-size: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgb(8 8 12 / 97%);
	color: var(--xy-shorts-ink);
	font-family: var(--xy-shorts-body);
}

.xy-shorts-theater[open] {
	display: grid;
	place-items: center;
	animation: xy-shorts-fade 0.2s ease;
}

.xy-shorts-theater::backdrop {
	background: transparent;
}

.xy-shorts-theater .xy-shorts-th {
	position: relative;
	display: grid;
	grid-template-areas: "prev video info next";
	grid-template-columns: 48px auto 300px 48px;
	gap: 28px;
	align-items: center;
	padding: 32px;
}

.xy-shorts-theater .xy-shorts-th-close {
	position: fixed;
	inset-block-start: 20px;
	inset-inline-end: 20px;
}

.xy-shorts-theater .xy-shorts-th-prev {
	grid-area: prev;
}

.xy-shorts-theater .xy-shorts-th-next {
	grid-area: next;
}

.xy-shorts-theater .xy-shorts-th-video {
	position: relative;
	grid-area: video;
	overflow: hidden;
	block-size: min(calc(100dvh - 64px), 720px);
	aspect-ratio: 9 / 16;
	border-radius: 14px;
	background: #000;
}

.xy-shorts-theater .xy-shorts-player,
.xy-shorts-theater .xy-shorts-player iframe {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

/* The info column runs the video's height: the event at the top, the event's Shorts in the
 * middle and the channel links at the foot. */
.xy-shorts-theater .xy-shorts-th-info {
	display: flex;
	grid-area: info;
	flex-direction: column;
	gap: 18px;
	align-self: stretch;
	min-block-size: 0;
	padding-block: 8px;
}

.xy-shorts-theater .xy-shorts-th-head {
	display: grid;
	gap: 6px;
	padding-block-end: 18px;
	border-block-end: 1px solid rgb(255 255 255 / 12%);
}

.xy-shorts-theater .xy-shorts-th-head::before {
	inline-size: 32px;
	block-size: 3px;
	margin-block-end: 8px;
	background: var(--xy-brand-gradient, linear-gradient(90deg, #e40666 0%, #3c3fde 100%));
	content: "";
}

.xy-shorts-theater .xy-shorts-th-eyebrow {
	margin: 0;
	color: rgb(255 255 255 / 60%);
	font: 600 11px/1.3 var(--xy-shorts-ui);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.xy-shorts-theater .xy-shorts-th-event {
	margin: 0;
	color: #fff;
	font: 600 22px/1.25 var(--xy-shorts-ui);
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.xy-shorts-theater .xy-shorts-th-count {
	margin: 4px 0 0;
	color: rgb(255 255 255 / 60%);
	font: 500 13px/1.3 var(--xy-shorts-ui);
}

.xy-shorts-theater .xy-shorts-th-count:empty {
	display: none;
}

.xy-shorts-theater .xy-shorts-th-title {
	margin: 0;
	color: #fff;
	font: 600 18px/1.25 var(--xy-shorts-ui);
	letter-spacing: -0.01em;
}

.xy-shorts-theater .xy-shorts-th-strip {
	display: grid;
	flex: 1 1 auto;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	align-content: start;
	min-block-size: 0;
	padding: 3px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.xy-shorts-theater .xy-shorts-th-foot {
	display: grid;
	gap: 12px;
	margin-block-start: auto;
	padding-block-start: 18px;
	border-block-start: 1px solid rgb(255 255 255 / 12%);
}

.xy-shorts-theater .xy-shorts-th-channel {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	color: #fff;
	font: 600 14px/1.3 var(--xy-shorts-ui);
}

.xy-shorts-theater .xy-shorts-th-mark {
	flex: none;
	inline-size: 28px;
	block-size: 20px;
}

.xy-shorts-theater .xy-shorts-th-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
}

.xy-shorts-theater .xy-shorts-th-thumb {
	overflow: hidden;
	inline-size: 100%;
	aspect-ratio: 9 / 16;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: #222;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.xy-shorts-theater .xy-shorts-th-thumb-img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.xy-shorts-theater .xy-shorts-th-thumb:hover {
	background: #222;
	opacity: 0.85;
}

.xy-shorts-theater .xy-shorts-th-thumb[aria-current] {
	outline: 2px solid #fff;
	outline-offset: 2px;
	opacity: 1;
}

/* Phones and tablets: the Short fills the screen; buttons step because swipes over the
 * player go to YouTube. */
@media (width <= 960px) {
	.xy-shorts-theater {
		background: #000;
	}

	.xy-shorts-theater .xy-shorts-th {
		grid-template:
			"top" 56px
			"video" minmax(0, 1fr)
			"info" auto
			/ 100%;
		gap: 0;
		inline-size: 100%;
		block-size: 100%;
		padding: 0;
	}

	.xy-shorts-theater .xy-shorts-th-video {
		inline-size: 100%;
		block-size: auto;
		align-self: stretch;
		aspect-ratio: auto;
		border-radius: 0;
	}

	.xy-shorts-theater .xy-shorts-th-close {
		position: absolute;
		inset-block-start: 10px;
		inset-inline-end: 12px;
		inline-size: 36px;
		block-size: 36px;
	}

	.xy-shorts-theater :is(.xy-shorts-th-prev, .xy-shorts-th-next) {
		position: absolute;
		inset-block-start: 50%;
		z-index: 3;
		inline-size: 40px;
		block-size: 40px;
		background: rgb(0 0 0 / 40%);
	}

	.xy-shorts-theater .xy-shorts-th-prev {
		inset-inline-start: 8px;
	}

	.xy-shorts-theater .xy-shorts-th-next {
		inset-inline-end: 8px;
	}

	.xy-shorts-theater :is(.xy-shorts-th-prev, .xy-shorts-th-next)[disabled] {
		visibility: hidden;
	}

	.xy-shorts-theater .xy-shorts-th-info {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 4px 12px;
		align-self: auto;
		padding: 14px 16px max(22px, env(safe-area-inset-bottom));
	}

	.xy-shorts-theater .xy-shorts-th-head {
		gap: 2px;
		padding: 0;
		border: 0;
	}

	.xy-shorts-theater .xy-shorts-th-head::before {
		content: none;
	}

	.xy-shorts-theater .xy-shorts-th-eyebrow {
		font-size: 10px;
	}

	.xy-shorts-theater .xy-shorts-th-event {
		font-size: 15px;
	}

	.xy-shorts-theater .xy-shorts-th-count {
		position: absolute;
		inset-block-start: 19px;
		inset-inline-start: 18px;
		margin: 0;
	}

	.xy-shorts-theater .xy-shorts-th-title {
		color: rgb(255 255 255 / 80%);
		font-size: 14px;
	}

	.xy-shorts-theater .xy-shorts-th-foot {
		display: contents;
	}

	.xy-shorts-theater .xy-shorts-th-channel {
		display: none;
	}

	.xy-shorts-theater .xy-shorts-th-actions {
		grid-row: 1 / span 2;
		grid-column: 2;
		align-self: center;
		margin: 0;
	}

	.xy-shorts-theater :is(.xy-shorts-th-open, .xy-shorts-th-strip) {
		display: none;
	}
}

/* ----- End card: the next Short with a countdown, or the end of the list ----- */

.xy-shorts-theater .xy-shorts-end {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 16px;
	background: rgb(10 10 14 / 90%);
	backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--xy-shorts-ui);
	text-align: center;
	animation: xy-shorts-fade 0.25s ease;
}

.xy-shorts-theater .xy-shorts-end-eyebrow {
	margin: 0;
	color: rgb(255 255 255 / 65%);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.xy-shorts-theater .xy-shorts-end-thumb {
	display: block;
	inline-size: 64px;
	aspect-ratio: 9 / 16;
	border-radius: 8px;
	object-fit: cover;
}

.xy-shorts-theater .xy-shorts-end-title {
	max-inline-size: 22ch;
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.3;
}

.xy-shorts-theater .xy-shorts-end-play {
	position: relative;
	display: grid;
	place-items: center;
	inline-size: 56px;
	block-size: 56px;
	margin-block-start: 4px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgb(255 255 255 / 12%);
	color: #fff;
	cursor: pointer;
}

.xy-shorts-theater .xy-shorts-end-play:hover {
	background: rgb(255 255 255 / 20%);
	color: #fff;
}

.xy-shorts-theater .xy-shorts-end-play > svg:last-child {
	inline-size: 16px;
	block-size: 16px;
	margin-inline-start: 2px;
	fill: currentcolor;
}

.xy-shorts-theater .xy-shorts-end-ring {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	transform: rotate(-90deg);
}

.xy-shorts-theater .xy-shorts-end-ring circle {
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-dasharray: 150.8;
	stroke-dashoffset: 150.8;
	animation: xy-shorts-count 5s linear forwards;
}

.xy-shorts-theater .xy-shorts-end-link {
	padding: 4px;
	border: 0;
	background: none;
	color: rgb(255 255 255 / 72%);
	font: 500 13px/1.3 var(--xy-shorts-ui);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.xy-shorts-theater .xy-shorts-end-link:hover {
	background: none;
	color: #fff;
}

.xy-shorts-theater .xy-shorts-end-again {
	min-block-size: 40px;
	margin-block-start: 6px;
	padding: 8px 16px;
	border: 1.5px solid #fff;
	border-radius: var(--xy-radius-button, 6px);
	background: none;
	color: #fff;
	font: 600 14px/1.3 var(--xy-shorts-ui);
	cursor: pointer;
}

.xy-shorts-theater .xy-shorts-end-again:hover {
	background: #fff;
	color: #101016;
}

@keyframes xy-shorts-count {
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes xy-shorts-fade {
	from {
		opacity: 0;
	}
}

/* Dark mode follows the theme; the theater is always dark. */
.s-dark .xy-shorts,
.site-s-dark .xy-shorts,
.xy-shorts-theater {
	--xy-shorts-ink: #f0f0f3;
	--xy-shorts-ink-2: rgb(255 255 255 / 66%);
	--xy-shorts-line: rgb(255 255 255 / 12%);
	--xy-shorts-tile: rgb(255 255 255 / 4%);
	--xy-shorts-poster-bg: rgb(32 32 42);
	--xy-shorts-action: #8f91ff;
	--xy-shorts-action-ink: #fff;
	--xy-shorts-ui: var(--ui-font, "Outfit", system-ui, sans-serif);
	--xy-shorts-body: var(--body-font, "Inter", system-ui, sans-serif);
}

@media (prefers-reduced-motion: reduce) {
	.xy-shorts .xy-shorts-poster img,
	.xy-shorts .xy-shorts-play {
		transition: none;
	}

	.xy-shorts .xy-shorts-poster:hover img {
		transform: none;
	}

	.xy-shorts-theater[open],
	.xy-shorts-theater .xy-shorts-end {
		animation: none;
	}

	.xy-shorts-theater .xy-shorts-end-ring circle {
		animation: none;
	}
}