/* Essential principles: one scene for the page and the video (assets/principles/principles.js). */
.ep {
	--ep-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	--ep-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	--ep-ink: #171717;
	--ep-mute: #737373;
	--ep-line: #e5e5e5;
	--ep-y: #34b77a;
	--ep-k: #3b82f6;
	--ep-d: #ef4444;
	--ep-s: #f5a623;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: #fff;
	color: var(--ep-ink);
	font-family: var(--ep-sans);
}
.ep *, .ep *::before, .ep *::after { box-sizing: border-box; margin: 0; padding: 0; }
.ep-canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 1920px;
	height: 1080px;
	transform-origin: 0 0;
	overflow: hidden;
	background: #fff;
}
.ep-abs { position: absolute; }
.ep-full { left: 0; top: 0; width: 1920px; height: 1080px; }
.ep-mono { font-family: var(--ep-mono); }

/* Rotated 40px grid that fades out towards the top */
.ep-gridmask {
	-webkit-mask-image: radial-gradient(75% 95% at 50% 100%, #000 30%, transparent);
	mask-image: radial-gradient(75% 95% at 50% 100%, #000 30%, transparent);
}
.ep-grid {
	left: 50%;
	top: 50%;
	width: 2600px;
	height: 2600px;
	margin: -1300px 0 0 -1300px;
	color: rgba(0, 0, 0, .09);
	transform: rotate(45deg);
}
.ep-noise { mix-blend-mode: overlay; opacity: .5; pointer-events: none; }

/* Title */
.ep-head { left: 0; top: 0; width: 1920px; transform-origin: 960px 0; }
.ep-kicker, .ep-title, .ep-sub { position: absolute; left: 0; width: 1920px; text-align: center; }
.ep-kicker { top: 330px; font: 500 22px var(--ep-mono); letter-spacing: 4px; text-transform: uppercase; color: var(--ep-mute); }
.ep-title { top: 380px; font: 700 150px/1 var(--ep-sans); letter-spacing: -6px; }
.ep-sub { top: 560px; font: 400 44px var(--ep-sans); letter-spacing: -1px; color: var(--ep-mute); }

/* Cards */
.ep-card {
	position: absolute;
	width: 360px;
	height: 360px;
	background: var(--c);
	border-radius: 4px;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .35);
	transform-origin: 50% 50%;
}
.ep-card svg { width: 96px; height: 96px; stroke: #fff; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ep-card b { font: 800 46px var(--ep-sans); letter-spacing: 1px; margin-top: 22px; }
.ep-card span { font: 500 24px var(--ep-sans); margin-top: 10px; }
.ep-oop {
	left: 195px;
	top: 800px;
	width: 1530px;
	height: 80px;
	border: 1.5px solid var(--ep-line);
	background: #fafafa;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 22px;
}
.ep-oop b { font: 800 30px var(--ep-mono); color: #525252; letter-spacing: 2px; }
.ep-oop span { font: 400 24px var(--ep-mono); color: var(--ep-mute); letter-spacing: 1px; text-transform: uppercase; }

/* Conflicts */
.ep-cap { left: 0; width: 1920px; top: 925px; text-align: center; font: 600 52px var(--ep-sans); letter-spacing: -1.5px; }
.ep-cap em { font-style: normal; font-weight: 800; }
.ep-bolt { left: 912px; top: 500px; width: 96px; height: 140px; }
.ep-arc { left: 0; top: 0; width: 1920px; height: 1080px; overflow: visible; }
.ep-vs {
	left: 910px;
	top: 236px;
	width: 100px;
	height: 52px;
	border-radius: 26px;
	background: var(--ep-ink);
	color: #fff;
	font: 700 26px/52px var(--ep-mono);
	text-align: center;
}

/* Questions */
.ep-q { left: 640px; font: 600 60px var(--ep-sans); letter-spacing: -1.5px; display: flex; align-items: center; gap: 34px; white-space: pre; }
.ep-q i {
	flex: none;
	width: 58px;
	height: 58px;
	border: 4px solid var(--ep-ink);
	border-radius: 6px;
	font: 800 40px/50px var(--ep-sans);
	font-style: normal;
	text-align: center;
	color: var(--ep-d);
}
.ep-caret { display: inline-block; width: 4px; height: 60px; background: var(--ep-ink); vertical-align: -8px; margin-left: 4px; }

/* Order */
.ep-arrow { width: 68px; text-align: center; font: 700 56px var(--ep-sans); color: var(--ep-ink); }
.ep-arrow small { display: block; font: 800 34px var(--ep-sans); color: var(--ep-d); margin-bottom: -6px; }
.ep-line { left: 0; width: 1920px; text-align: center; font: 700 64px var(--ep-sans); letter-spacing: -2px; }
.ep-line.is-mute { color: var(--ep-mute); font-weight: 500; }

/* Next in the series */
.ep-band { left: 0; top: 560px; width: 1920px; height: 140px; border-top: 1.5px solid var(--ep-line); border-bottom: 1.5px solid var(--ep-line); background: #fff; overflow: hidden; }
.ep-band-label {
	position: absolute;
	left: 0;
	top: 0;
	width: 330px;
	height: 137px;
	border-right: 1.5px solid var(--ep-line);
	background: #fff;
	z-index: 1;
	display: flex;
	align-items: center;
	padding: 0 40px;
	font: 500 24px/1.3 var(--ep-mono);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.ep-track { position: absolute; left: 330px; top: 0; height: 137px; display: flex; }
.ep-cell { flex: none; height: 137px; padding: 0 56px; border-right: 1.5px solid var(--ep-line); display: flex; align-items: center; gap: 18px; font: 700 44px var(--ep-sans); letter-spacing: -1px; white-space: nowrap; }
.ep-cell i { width: 22px; height: 22px; border-radius: 4px; background: var(--c); }

/* Finish */
.ep-logo { left: 810px; top: 300px; width: 300px; height: 98px; }
.ep-fin-title { left: 0; width: 1920px; top: 440px; text-align: center; font: 700 110px/1 var(--ep-sans); letter-spacing: -4px; }
.ep-fin-sub { left: 0; width: 1920px; top: 580px; text-align: center; font: 500 30px var(--ep-mono); letter-spacing: 3px; color: var(--ep-mute); }
.ep-btn {
	left: 660px;
	top: 680px;
	width: 600px;
	height: 92px;
	border-radius: 12px;
	background: var(--ep-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	font: 500 36px var(--ep-sans);
	letter-spacing: -.5px;
}

/* Shorts 1080×1920: same scene, vertical layout (positions of moving parts are in principles.js) */
.ep.is-shorts { aspect-ratio: 9 / 16; }
.ep.is-shorts .ep-canvas, .ep.is-shorts .ep-full { width: 1080px; height: 1920px; }
.ep.is-shorts .ep-head { width: 1080px; transform-origin: 540px 0; }
.ep.is-shorts .ep-kicker, .ep.is-shorts .ep-title, .ep.is-shorts .ep-sub { width: 1080px; }
.ep.is-shorts .ep-kicker { top: 640px; }
.ep.is-shorts .ep-title { top: 690px; }
.ep.is-shorts .ep-sub { top: 1020px; }
.ep.is-shorts .ep-oop { left: 110px; top: 1540px; width: 860px; }
.ep.is-shorts .ep-cap { left: 40px; width: 1000px; top: 412px; font-size: 50px; line-height: 1.12; }
.ep.is-shorts .ep-bolt { left: 492px; top: 1010px; }
.ep.is-shorts .ep-vs { left: 490px; top: 1036px; }
.ep.is-shorts .ep-line { width: 1080px; }
.ep.is-shorts .ep-band { top: 900px; width: 1080px; }
.ep.is-shorts .ep-logo { left: 390px; top: 640px; }
.ep.is-shorts .ep-fin-title { width: 1080px; top: 780px; }
.ep.is-shorts .ep-fin-sub { width: 1080px; top: 920px; }
.ep.is-shorts .ep-btn { left: 240px; top: 1020px; }
.ep.is-shorts .ep-arc { width: 1080px; height: 1920px; }
.ep.is-shorts .ep-cap { text-wrap: balance; }
.ep.is-shorts .ep-q { font-size: 64px; }