:root {
	--glow: 79, 175, 83; /* brand primary-700 as rgb */
}
.mono {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

html.dark body.cinematic {
	background-color: #08080a;
	color: #e7e7ea;
}
body.cinematic {
	position: relative;
	overflow-x: hidden;
}

/* --- Fixed background: engineering grid + one soft glow (reads "systems", not "moodboard") --- */
.fx-layer {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
/* Grid removed for a clean, natural-iOS background. */
.fx-grid {
	background-image: none;
}
/* A single soft brand wash on the desk - calm, so the app reads clean. */
.fx-glow {
	background: radial-gradient(60vmax 46vmax at 82% -8%, rgba(var(--glow), 0.12), transparent 62%);
}
html:not(.dark) body.cinematic .fx-glow {
	background: radial-gradient(60vmax 46vmax at 82% -8%, rgba(var(--glow), 0.08), transparent 62%);
}

/* Content above the background. */
body.cinematic > .app-frame,
body.cinematic > a.skip {
	position: relative;
	z-index: 10;
}

/* ===== App shell: on desktop the whole site is an app framed in a device;
   on mobile it is full-bleed (the visitor is already holding a device). ===== */
.app-frame {
	min-height: 100vh;
	background: #f2f2f7;
}
html.dark .app-frame {
	background: #000000;
}
/* App header - sticky like a real app top bar (fixes the "not sticky" navbar). */
.app-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.72);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid rgba(127, 140, 141, 0.16);
}
html.dark .app-header {
	background: rgba(12, 13, 15, 0.72);
	border-bottom-color: rgba(255, 255, 255, 0.06);
}
/* iPhone-style status strip. The island is decorative; navigation stays in the semantic nav below. */
.ios-status {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
	padding: max(0.5rem, env(safe-area-inset-top, 0px)) 1rem 0.35rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}
.ios-time {
	justify-self: start;
	min-width: 3.5rem;
	text-align: center;
}
.dynamic-island {
	position: relative;
	width: 6.25rem;
	height: 1.9rem;
	border-radius: 999px;
	background: #050506;
	box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 1px 1px rgba(0, 0, 0, 0.24);
}
.dynamic-island::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 1rem;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: #16151c;
	box-shadow: 0 0 0 1px rgba(115, 102, 158, 0.35);
	transform: translateY(-50%);
}
.dynamic-island::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	width: 2rem;
	height: 0.25rem;
	border-radius: 999px;
	background: #1c1c20;
	transform: translateY(-50%);
}
.ios-indicators {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 3.5rem;
}
.ios-signal {
	display: inline-flex;
	align-items: end;
	gap: 1px;
	height: 0.7rem;
}
.ios-signal i {
	display: block;
	width: 2px;
	border-radius: 999px;
	background: currentColor;
}
.ios-signal i:nth-child(1) { height: 30%; }
.ios-signal i:nth-child(2) { height: 55%; }
.ios-signal i:nth-child(3) { height: 78%; }
.ios-signal i:nth-child(4) { height: 100%; }
.ios-wifi {
	width: 0.95rem;
	height: 0.7rem;
	border: 2px solid currentColor;
	border-bottom: 0;
	border-radius: 999px 999px 0 0;
	transform: scaleX(0.85);
}
.ios-battery {
	position: relative;
	width: 1.35rem;
	height: 0.65rem;
	border: 1px solid currentColor;
	border-radius: 3px;
}
.ios-battery::before {
	content: "";
	position: absolute;
	inset: 1px;
	right: 4px;
	border-radius: 1px;
	background: #4faf53;
}
.ios-battery::after {
	content: "";
	position: absolute;
	right: -3px;
	top: 2px;
	width: 2px;
	height: 3px;
	border-radius: 0 1px 1px 0;
	background: currentColor;
}

/* Bottom tab bar - the primary nav on every viewport; the strongest "app" signal. */
/* iOS Liquid Glass tab bar: a floating, detached capsule that hugs its content,
   sits above the content with a gap all round, and casts a shadow (it floats). */
.tabbar {
	position: fixed;
	left: 50%;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	width: auto;
	max-width: calc(100vw - 28px);
	z-index: 55;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 7px 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.5);
	-webkit-backdrop-filter: blur(30px) saturate(200%);
	backdrop-filter: blur(30px) saturate(200%);
	border: 1px solid rgba(255, 255, 255, 0.6);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.95), inset 0 -8px 20px rgba(255, 255, 255, 0.16), 0 14px 44px -8px rgba(0, 0, 0, 0.38);
}
html.dark .tabbar {
	background: rgba(32, 34, 39, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.38), inset 0 -10px 26px rgba(255, 255, 255, 0.05), 0 18px 52px -8px rgba(0, 0, 0, 0.72);
}
/* Glossy top sheen - the "liquid" reading of light on the capsule. */
.tabbar::before {
	content: "";
	position: absolute;
	inset: 1px 1px auto 1px;
	height: 46%;
	border-radius: 999px;
	background: linear-gradient(rgba(255, 255, 255, 0.5), transparent);
	opacity: 0.55;
	pointer-events: none;
}
html.dark .tabbar::before {
	background: linear-gradient(rgba(255, 255, 255, 0.13), transparent);
	opacity: 0.7;
}
.tabbar a {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0.42rem 0.85rem;
	border-radius: 999px;
	font-size: 0.6rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: inherit;
	opacity: 0.55;
	transition: opacity 0.25s ease, color 0.25s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.tabbar a svg {
	width: 22px;
	height: 22px;
}
/* Active tab = its own tinted glass pill inside the capsule. */
.tabbar a.active {
	opacity: 1;
	color: #4faf53;
	background: rgba(79, 175, 83, 0.16);
	box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.6), 0 3px 12px -3px rgba(79, 175, 83, 0.5);
}
html.dark .tabbar a.active {
	background: rgba(79, 175, 83, 0.22);
	box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.28), 0 3px 14px -3px rgba(79, 175, 83, 0.55);
}
.tabbar a:hover {
	opacity: 0.9;
}
/* Keep content clear of the floating tab bar. */
.app-frame main {
	padding-bottom: 104px;
}

/* --- Desktop: frame the app in a centered device on an ambient desk. --- */
@media (min-width: 1024px) {
	html.dark body.cinematic {
		background-color: #050506;
	}
	body.cinematic {
		padding: 26px 0 0;
	}
	.app-frame {
		max-width: 1120px;
		margin: 0 auto;
		border-radius: 30px 30px 0 0;
		border: 1px solid rgba(0, 0, 0, 0.08);
		border-bottom: none;
		background: #f2f2f7;
		box-shadow: 0 8px 60px -20px rgba(0, 0, 0, 0.35);
	}
	html.dark .app-frame {
		background: #000000;
		border: 1px solid rgba(255, 255, 255, 0.08);
		border-bottom: none;
	}
	.app-header {
		border-radius: 29px 29px 0 0;
	}
}