@charset "utf-8";
:root {
	--bg1:#070b16;
	--bg2:#10192b;
	--fg:#eef4ff;
	--muted:rgba(255,255,255,.72);
	--blue1:#dff4ff;
	--blue2:#53c7ff;
	--blue3:#246bff;
	--yellow1:#fff5c9;
	--yellow2:#ffd85e;
	--yellow3:#ffae00;
	--glass:rgba(255,255,255,.06);
	--line:rgba(255,255,255,.14);
}

* {
	box-sizing:border-box;
}
html, body {
	min-height:100%;
}
body {
	margin:0;
	font-family: Inter, Arial, sans-serif;
	color:var(--fg);
	background:
		radial-gradient(circle at 20% 20%, rgba(83,199,255,.10), transparent 30%),
		radial-gradient(circle at 80% 75%, rgba(255,216,94,.10), transparent 28%),
		linear-gradient(135deg, var(--bg1), var(--bg2));
}
.page {
	min-height:100vh;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	padding:28px 14px;
	position:relative;
}
h1 {
	margin:0 0 10px;
	font-size:clamp(28px, 4vw, 56px);
	font-weight:800;
	letter-spacing:.04em;
	text-shadow:0 0 20px rgba(255,255,255,.08);
	text-align: center;
}
.subtitle {
	margin:0 0 28px;
	color:var(--muted);
	font-size:15px;
	letter-spacing:.02em;
	text-align: center;
	max-width: 600px;
}

.scene {
	position:relative;
	width:min(1200px, 96vw);
	height:min(720px, 78vh);
	border-radius:30px;
	background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
	border:1px solid rgba(255,255,255,.08);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 30px 70px rgba(0,0,0,.35);
	backdrop-filter: blur(6px);
	overflow:hidden;
}
.gridGlow {
	position:absolute;
	inset:0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size:32px 32px;
	mask-image: radial-gradient(circle at center, black 55%, transparent 100%);
	pointer-events:none;
}
.columns {
	position:absolute;
	inset:0;
	display:grid;
	grid-template-columns: 1fr 340px 1fr;
	align-items:center;
}
.column {
	padding:42px;
	display:flex;
	flex-direction:column;
	gap:16px;
	z-index:2;
}
.column.left {
	align-items:flex-end;
}
.column.right {
	align-items:flex-start;
}
.tile {
	position:relative;
	width: 100%;
	min-width:200px;
	max-width:280px;
	padding:14px 18px;
	border-radius:18px;
	font-size:20px;
	line-height:1.1;
	font-weight:700;
	letter-spacing:.01em;
	border:1px solid rgba(255,255,255,.08);
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.16),
		0 12px 25px rgba(0,0,0,.18);
	cursor:pointer;
	user-select:none;
	transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, opacity .22s ease;
	isolation:isolate;
}
.left .tile {
	text-align:right;
	color:#fff;
	background:linear-gradient(135deg, rgba(223,244,255,.18), rgba(36,107,255,.78));
}
.right .tile {
	text-align:left;
	color:#231a00;
	background:linear-gradient(135deg, rgba(255,245,201,.96), rgba(255,174,0,.84));
}
.tile::before {
	content:"";
	position:absolute;
	inset:-1px;
	border-radius:inherit;
	background:linear-gradient(135deg, rgba(255,255,255,.38), transparent 40%, rgba(255,255,255,.10));
	z-index:-1;
	opacity:.6;
}
.tile:hover {
	transform:translateY(-2px) scale(1.03);
}
.tile.active {
	box-shadow:
		0 0 0 1px rgba(255,255,255,.22),
		0 0 28px rgba(255,255,255,.16),
		0 18px 40px rgba(0,0,0,.26);
	filter:saturate(1.18) brightness(1.05);
}
.tile.dimmed {
	opacity:.48;
}
.left .tile.active {
	box-shadow:
		0 0 0 1px rgba(83,199,255,.45),
		0 0 24px rgba(83,199,255,.30),
		0 18px 40px rgba(0,0,0,.26);
}
.right .tile.active {
	box-shadow:
		0 0 0 1px rgba(255,216,94,.55),
		0 0 26px rgba(255,216,94,.34),
		0 18px 40px rgba(0,0,0,.26);
}
.centerWrap {
	position:relative;
	height:100%;
	display:flex;
	align-items:center;
	justify-content:center;
	z-index:2;
}
.center {
	position:relative;
	width:260px;
	height:260px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}
.orbit {
	position:absolute;
	inset:0;
	border-radius:50%;
	border:1.5px dashed rgba(255,255,255,.14);
	animation:spin 22s linear infinite;
}
.orbit::before, .orbit::after {
	content:"";
	position:absolute;
	width:10px;
	height:10px;
	border-radius:50%;
	top:50%;
	left:0;
	transform:translate(-50%,-50%);
}
.orbit::before {
	background:radial-gradient(circle, white, rgba(83,199,255,.1));
	box-shadow:0 0 16px rgba(83,199,255,.9), 0 0 34px rgba(83,199,255,.5);
}
.orbit::after {
	background:radial-gradient(circle, white, rgba(255,216,94,.1));
	box-shadow:0 0 14px rgba(255,216,94,.9), 0 0 28px rgba(255,216,94,.45);
	inset:auto 0 50% auto;
	transform:translate(50%,50%);
}
.ballHalo {
	position:absolute;
	width:170px;
	height:170px;
	border-radius:50%;
	filter:blur(24px);
	background:radial-gradient(circle, rgba(83,199,255,.36), transparent 62%);
	transition:background .28s ease, transform .35s ease;
}
.ball {
	position:relative;
	width:112px;
	height:112px;
	border-radius:50%;
	background:radial-gradient(circle at 35% 30%, white 0%, var(--blue1) 18%, var(--blue2) 45%, var(--blue3) 100%);
	box-shadow:
		inset -10px -12px 26px rgba(0,0,0,.18),
		inset 8px 10px 18px rgba(255,255,255,.42),
		0 0 28px rgba(83,199,255,.55),
		0 20px 40px rgba(0,0,0,.30);
	transition: background .28s ease, box-shadow .28s ease, transform .28s ease;
}
.ball.yellow {
	background:radial-gradient(circle at 35% 30%, white 0%, var(--yellow1) 20%, var(--yellow2) 50%, var(--yellow3) 100%);
	box-shadow:
		inset -10px -12px 26px rgba(0,0,0,.16),
		inset 8px 10px 18px rgba(255,255,255,.38),
		0 0 30px rgba(255,216,94,.58),
		0 20px 40px rgba(0,0,0,.30);
}
.ballLabel {
	margin-top:18px;
	color:var(--muted);
	font-size:15px;
	letter-spacing:.08em;
	text-transform:uppercase;
}
svg.wires {
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	z-index:1;
	pointer-events:none;
}
.path-base {
	fill:none;
	stroke:rgba(255,255,255,.08);
	stroke-width:2.2;
	stroke-linecap:round;
}
.path-bridge {
	fill:none;
	stroke:rgba(255,255,255,.18);
	stroke-width:2.2;
	stroke-linecap:round;
	stroke-dasharray:6 14;
}
.path-left, .path-right, .path-energy {
	fill:none;
	stroke-linecap:round;
	opacity:0;
	transition:opacity .22s ease;
}
.path-left {
	stroke:url(#gradBlue);
	stroke-width:4;
	filter:url(#glowBlue);
}
.path-right {
	stroke:url(#gradYellow);
	stroke-width:4;
	filter:url(#glowYellow);
}
.path-energy {
	stroke:url(#gradEnergy);
	stroke-width:6;
	filter:url(#glowEnergy);
}
.path-left.active, .path-right.active, .path-energy.active {
	opacity:1;
}
.flowDot {
	opacity:0;
	transition:opacity .18s ease;
}
.flowDot.active {
	opacity:1;
}
.flowDot circle {
	filter:url(#whiteGlow);
}
.legend {
	position:absolute;
	left:22px;
	right:22px;
	bottom:18px;
	display:flex;
	justify-content:space-between;
	gap:16px;
	color:rgba(255,255,255,.58);
	font-size:12px;
	letter-spacing:.06em;
	text-transform:uppercase;
	z-index:2;
}
.legend span {
	padding:8px 10px;
	border-radius:999px;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(255,255,255,.06);
}
@keyframes spin {to{transform:rotate(360deg)}}
@media (max-width: 768px) {
	.scene {
		width: 100%;
		height: auto;
		min-height: 950px;
		padding-bottom: 60px;
	}
	.columns {
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 30px;
		padding: 20px 10px;
	}
	.column {
		width: 100%;
		padding: 10px;
		align-items: center !important;
	}
	.tile {
		max-width: 320px;
		text-align: center !important;
		font-size: 16px;
		padding: 12px 16px;
	}
	.centerWrap {
		order: 2;
		height: auto;
		margin: 20px 0;
	}
	.column.left {
		order: 1;
	}
	.column.right {
		order: 3;
	}
	.legend {
		position: relative;
		bottom: 0;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: center;
		gap: 8px;
		margin-top: 20px;
		padding: 0 10px;
	}
	.legend span {
		width: 100%;
		text-align: center;
	}
}