:root {
	color-scheme: dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #0b1020;
	color: #eff5ff;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-width: 20rem;
	background: radial-gradient(circle at 18% -20%, #1d3962 0, transparent 36rem), #0b1020;
}

button,
a {
	font: inherit;
}

button {
	cursor: pointer;
}

button:focus-visible,
a:focus-visible {
	outline: 3px solid #8dd0ff;
	outline-offset: 3px;
}

.site-header,
main {
	width: min(100% - 2rem, 90rem);
	margin-inline: auto;
}

.site-header {
	min-height: 4.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #2a3952;
}

.brand {
	color: inherit;
	font-size: 1.1rem;
	font-weight: 750;
	letter-spacing: .01em;
	text-decoration: none;
}

.brand span {
	color: #9cb2d3;
	font-weight: 500;
}

nav a {
	color: #b9dfff;
	text-underline-offset: .2em;
}

main {
	padding-block: 2.5rem 4rem;
}

.intro,
.section-heading,
.stream-row,
.tile-header,
.layout-controls,
.tile-actions {
	display: flex;
	align-items: center;
}

.intro,
.section-heading {
	justify-content: space-between;
	gap: 1.5rem;
}

.intro {
	margin-bottom: 2rem;
}

.eyebrow {
	margin: 0 0 .4rem;
	color: #82d7ba;
	font-size: .8rem;
	font-weight: 750;
	letter-spacing: .09em;
	text-transform: uppercase;
}

h1,
h2,
h3,
p {
	margin-top: 0;
}

h1 {
	margin-bottom: .6rem;
	font-size: clamp(2rem, 6vw, 3.35rem);
	letter-spacing: -.045em;
}

h2 {
	margin-bottom: .3rem;
	font-size: 1.2rem;
}

h3 {
	margin-bottom: .2rem;
	font-size: 1rem;
}

.intro p:not(.eyebrow),
.section-heading p,
.stream-meta,
.tile-status,
.empty-viewer {
	margin-bottom: 0;
	color: #aebcd0;
}

.layout-controls {
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: .5rem;
	color: #aebcd0;
	white-space: nowrap;
}

button {
	border: 1px solid #42638a;
	border-radius: .45rem;
	padding: .5rem .75rem;
	background: #13233a;
	color: #eff5ff;
	font-weight: 650;
}

button:hover:not(:disabled) {
	background: #1b3454;
}

button:disabled {
	cursor: not-allowed;
	opacity: .57;
}

.layout-button[aria-pressed="true"] {
	border-color: #8dd0ff;
	background: #204b73;
}

.notice {
	margin-block: 1.25rem;
	padding: .85rem 1rem;
	border: 1px solid #815e25;
	border-radius: .5rem;
	background: #332612;
	color: #ffdaa2;
}

.notice[data-variant="error"] {
	border-color: #9d5263;
	background: #371923;
	color: #ffb9c5;
}

.notice a {
	color: inherit;
	font-weight: 750;
}

.stream-picker,
.viewer-section {
	padding: 1.25rem;
	border: 1px solid #293b56;
	border-radius: .75rem;
	background: rgb(15 25 42 / .78);
	box-shadow: 0 .75rem 2.25rem rgb(0 0 0 / .13);
}

.viewer-section {
	margin-top: 1.5rem;
}

.secondary-button {
	background: transparent;
}

.stream-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: .75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}

.stream-row {
	min-width: 0;
	justify-content: space-between;
	gap: .75rem;
	padding: .85rem;
	border: 1px solid #31445f;
	border-radius: .5rem;
	background: #101d31;
}

.stream-row > div {
	min-width: 0;
}

.stream-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.stream-meta {
	font-size: .875rem;
}

.add-button {
	flex: none;
}

.viewer-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
	gap: 1rem;
	margin-top: 1rem;
}

.viewer-grid[data-layout="compact"] {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: .75rem;
}

.viewer-tile {
	overflow: hidden;
	border: 1px solid #3b5270;
	border-radius: .6rem;
	background: #07101e;
}

.tile-header {
	justify-content: space-between;
	gap: 1rem;
	padding: .75rem .85rem;
}

.tile-header > div:first-child {
	min-width: 0;
}

.tile-name,
.tile-status {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tile-status {
	font-size: .82rem;
}

.tile-actions {
	flex: none;
	gap: .4rem;
}

.tile-actions button {
	padding: .35rem .5rem;
	font-size: .83rem;
}

.video-frame {
	aspect-ratio: 16 / 9;
	display: grid;
	place-items: center;
	background: #02060c;
}

video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.empty-viewer {
	margin: 1rem 0 0;
	padding: 2rem 1rem;
	border: 1px dashed #3b5270;
	border-radius: .55rem;
	text-align: center;
}

@media (max-width: 42rem) {
	.site-header,
	main {
		width: min(100% - 1.25rem, 90rem);
	}

	main {
		padding-top: 1.5rem;
	}

	.intro,
	.section-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: .9rem;
	}

	.layout-controls {
		justify-content: flex-start;
	}

	.stream-picker,
	.viewer-section {
		padding: 1rem;
	}
}

@media (max-width: 25rem) {
	.tile-header {
		align-items: flex-start;
		flex-direction: column;
		gap: .6rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	* {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}