/* Focus Timer site. Tokens are lifted straight from the app
   (src/mainview/index.css) so the page and the window it shows read as one
   object: one neutral family, one mint accent, warn for pauses only. */

@font-face {
	font-family: "Geist";
	src: url("assets/fonts/geist.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

@font-face {
	font-family: "Geist Mono";
	src: url("assets/fonts/geist-mono.woff2") format("woff2");
	font-weight: 100 900;
	font-display: swap;
}

/* The page's own voice: Clash Display for headlines, Satoshi for text, and
   Departure Mono (a pixel mono, like the Pixel Heat icon) for numbers and
   labels. Geist stays on the app window replica, as in the real app. */
@font-face {
	font-family: "Clash Display";
	src: url("assets/fonts/clash-display-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

@font-face {
	font-family: "Satoshi";
	src: url("assets/fonts/satoshi-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: "Satoshi";
	src: url("assets/fonts/satoshi-500.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}

@font-face {
	font-family: "Satoshi";
	src: url("assets/fonts/satoshi-700.woff2") format("woff2");
	font-weight: 600 900;
	font-display: swap;
}

@font-face {
	font-family: "Departure Mono";
	src: url("assets/fonts/departure-mono.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
	--bg: 243 243 240;
	--bg-2: 236 236 232;
	--surface: 252 252 250;
	--surface-2: 246 246 243;
	--line: 222 222 216;
	--ink: 22 22 24;
	--ink-2: 88 88 94;
	--ink-3: 124 124 130;
	--accent: 20 158 101;
	--accent-ink: 250 255 252;
	--warn: 190 124 18;
	--danger: 204 66 56;
	--shadow: 40 40 30;
	--grain: 0.045;
	--hi: 255 255 255 / 0.9;
	color-scheme: light;

	--sans: "Satoshi", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--mono: "Departure Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--spring-soft: cubic-bezier(0.34, 1.36, 0.64, 1);
	--out: cubic-bezier(0.22, 1, 0.36, 1);
	--out-expo: cubic-bezier(0.16, 1, 0.3, 1);

	/* Radius system: panels 22, controls 14, small chips/keys 8, pills full. */
	--r-panel: 22px;
	--r-ctl: 14px;
	--r-sm: 8px;
	--gutter: 24px;
	--nav-h: 64px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: 12 12 13;
		--bg-2: 17 17 19;
		--surface: 22 22 25;
		--surface-2: 29 29 33;
		--line: 40 40 45;
		--ink: 236 236 238;
		--ink-2: 160 160 168;
		--ink-3: 112 112 120;
		--accent: 112 230 170;
		--accent-ink: 5 28 17;
		--warn: 242 188 92;
		--danger: 238 112 100;
		--shadow: 0 0 0;
		--grain: 0.07;
		--hi: 255 255 255 / 0.05;
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--bg: 12 12 13;
	--bg-2: 17 17 19;
	--surface: 22 22 25;
	--surface-2: 29 29 33;
	--line: 40 40 45;
	--ink: 236 236 238;
	--ink-2: 160 160 168;
	--ink-3: 112 112 120;
	--accent: 112 230 170;
	--accent-ink: 5 28 17;
	--warn: 242 188 92;
	--danger: 238 112 100;
	--shadow: 0 0 0;
	--grain: 0.07;
	--hi: 255 255 255 / 0.05;
	color-scheme: dark;
}

/* ── Base ───────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 88px;
	background: rgb(var(--bg));
}

/* Lenis owns the easing while it runs; native smooth scroll would fight it. */
html.lenis {
	scroll-behavior: auto;
}

body {
	margin: 0;
	font-synthesis: none;
	min-height: 100dvh;
	background: rgb(var(--bg));
	color: rgb(var(--ink));
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.5;
	font-feature-settings: "ss01", "cv11";
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
	transition: background-color 500ms var(--out), color 500ms var(--out);
}

/* Film grain, same recipe as the app: breaks up flat fills. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
	opacity: var(--grain);
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

::selection {
	background: rgb(var(--accent) / 0.25);
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

img,
svg {
	display: block;
}

:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid rgb(var(--accent) / 0.7);
	outline-offset: 3px;
	border-radius: 8px;
}

/* Sections focused by an in-page link (see smoothScroll in app.js). */
:is(main, main > section)[tabindex="-1"]:focus-visible {
	outline: none;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.mono {
	font-family: var(--mono);
}

.tabular {
	font-variant-numeric: tabular-nums;
}

.wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

@media (max-width: 640px) {
	:root {
		--gutter: 16px;
	}
}

/* ── Shared controls ────────────────────────────────────────────────────── */

/* Quick to press down, springs back on release. */
.press {
	transition:
		transform 420ms var(--spring),
		background-color 220ms ease-out,
		color 220ms ease-out,
		opacity 220ms ease-out,
		box-shadow 300ms ease-out,
		filter 220ms ease-out;
}

.press:active:not(:disabled),
.press.is-pressed {
	transform: scale(0.955);
	transition-duration: 110ms;
}

.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 52px;
	padding: 0 20px;
	border-radius: 16px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
}

.btn-primary {
	background: rgb(var(--accent));
	color: rgb(var(--accent-ink));
	box-shadow:
		0 10px 30px -12px rgb(var(--accent) / 0.8),
		inset 0 1px 0 rgb(255 255 255 / 0.25);
}

.btn-primary:hover {
	filter: brightness(1.05);
	box-shadow:
		0 14px 36px -12px rgb(var(--accent) / 0.95),
		inset 0 1px 0 rgb(255 255 255 / 0.25);
}

.btn-ghost {
	background: rgb(var(--ink) / 0.07);
	color: rgb(var(--ink));
}

.btn-ghost:hover {
	background: rgb(var(--ink) / 0.1);
}

.btn-sm {
	height: 38px;
	padding: 0 14px;
	border-radius: 12px;
	font-size: 13.5px;
	gap: 8px;
}

.btn .apple {
	width: 17px;
	height: 17px;
	margin-top: -2px;
}

.btn-sm .apple {
	width: 14px;
	height: 14px;
}

.kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 20px;
	min-width: 20px;
	padding: 0 6px;
	border-radius: 6px;
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 500;
	box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.18);
}

.btn-primary .kbd {
	background: rgb(0 0 0 / 0.1);
	color: rgb(var(--accent-ink) / 0.72);
	margin-right: -6px;
}

/* Segmented control with a sliding thumb (the app's Segmented). */
.seg {
	position: relative;
	display: inline-flex;
	padding: 3px;
	border-radius: 10px;
	background: rgb(var(--ink) / 0.06);
}

.seg-thumb {
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 0;
	border-radius: 7px;
	background: rgb(var(--surface));
	box-shadow:
		0 1px 2px rgb(0 0 0 / 0.12),
		0 0 0 0.5px rgb(0 0 0 / 0.06);
	transition:
		transform 420ms var(--spring-soft),
		width 420ms var(--spring-soft);
}

.seg button {
	position: relative;
	z-index: 1;
	height: 26px;
	padding: 0 10px;
	border-radius: 7px;
	font-size: 11.5px;
	font-weight: 500;
	color: rgb(var(--ink-3));
}

.seg button:hover {
	color: rgb(var(--ink-2));
}

.seg button[aria-checked="true"] {
	color: rgb(var(--ink));
}

/* Toggle: knob stretches while pressed, like a physical switch. */
.toggle {
	position: relative;
	flex-shrink: 0;
	width: 38px;
	height: 22px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.13);
	transition: background-color 300ms ease-out;
}

.toggle[aria-checked="true"] {
	background: rgb(var(--accent));
}

.toggle::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 16px;
	height: 16px;
	border-radius: 999px;
	background: #fff;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
	transition:
		left 380ms var(--spring-soft),
		width 380ms var(--spring-soft);
}

.toggle:active::after {
	width: 20px;
	transition-duration: 150ms;
}

.toggle[aria-checked="true"]::after {
	left: 19px;
}

.toggle[aria-checked="true"]:active::after {
	left: 15px;
}

.panel {
	border-radius: var(--r-panel);
	background: rgb(var(--surface));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line));
}

/* ── Navigation: a floating pill with a face ───────────────────────────── */

.nav {
	position: fixed;
	top: 12px;
	left: 0;
	right: 0;
	z-index: 50;
	padding: 0 var(--gutter);
	pointer-events: none;
}

.nav-pill {
	pointer-events: auto;
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	max-width: 1152px;
	height: 56px;
	margin: 0 auto;
	padding: 0 8px 0 10px;
	border-radius: 18px;
	background: rgb(var(--surface) / 0.62);
	-webkit-backdrop-filter: saturate(170%) blur(22px);
	backdrop-filter: saturate(170%) blur(22px);
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line) / 0.75),
		0 18px 40px -24px rgb(var(--shadow) / 0.55);
	transition:
		max-width 600ms var(--out-expo),
		background-color 400ms,
		box-shadow 400ms;
}

.nav.is-stuck .nav-pill {
	max-width: 1060px;
	background: rgb(var(--surface) / 0.78);
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.02em;
}

.brand img {
	width: 30px;
	height: 30px;
}

/* The logo is the buddy itself, on the app icon's dark tile. Its own bright
   tokens so it glows the same in both themes. */
.brand-face {
	--accent: 112 230 170;
	--warn: 242 188 92;
	--ink-3: 132 136 142;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 40%, rgb(var(--accent) / 0.18), transparent 70%),
		linear-gradient(160deg, #1d1f22, #0b0c0d);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.1),
		inset 0 0 0 1px rgb(255 255 255 / 0.04),
		0 4px 12px -4px rgb(0 0 0 / 0.5);
	transition: transform 420ms var(--spring);
}

.brand:hover .brand-face {
	transform: rotate(-6deg) scale(1.06);
}

.brand-face .buddy {
	flex-shrink: 0;
	transform: scale(0.34);
}

.nav-links {
	position: relative;
	display: flex;
	gap: 2px;
}

.nav-links a {
	position: relative;
	z-index: 1;
	padding: 7px 11px;
	border-radius: 10px;
	font-size: 13.5px;
	color: rgb(var(--ink-2));
	transition: color 200ms;
}

.nav-links a:hover,
.nav-links a.current {
	color: rgb(var(--ink));
}

.nav-thumb {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 0;
	border-radius: 10px;
	background: rgb(var(--ink) / 0.07);
	opacity: 0;
	transition:
		transform 460ms var(--spring-soft),
		width 460ms var(--spring-soft),
		opacity 250ms;
}

.nav-end {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.nav-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 12px;
	border-radius: 12px;
	font-size: 12.5px;
	font-weight: 500;
	color: rgb(var(--ink-2));
	background: rgb(var(--ink) / 0.05);
}

.nav-status:hover {
	background: rgb(var(--ink) / 0.08);
	color: rgb(var(--ink));
}

.ns-dot {
	width: 7px;
	height: 7px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.3);
	transition: background-color 400ms;
}

.nav-status.on .ns-dot {
	background: rgb(var(--accent));
	animation: pulse-dot 2.4s ease-out infinite;
}

.ns-time {
	font-family: var(--mono);
	font-size: 12px;
	color: rgb(var(--ink-3));
	font-variant-numeric: tabular-nums;
	min-width: 30px;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	color: rgb(var(--ink-2));
}

.icon-btn:hover {
	color: rgb(var(--ink));
	background: rgb(var(--ink) / 0.06);
}

@media (max-width: 1080px) {
	.nav-links {
		display: none;
	}
}

@media (max-width: 560px) {
	.brand-name,
	.nav .icon-btn,
	.nav .btn-sm .label-long {
		display: none;
	}
	.nav-pill {
		gap: 10px;
	}
}

/* ── Hero: the buddy on the horizon ─────────────────────────────────────── */
/* Type on top, the bot standing on a grid floor that runs to a glowing
   horizon below it. */

.hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	min-height: max(100svh, 700px);
	padding: 112px 0 64px;
	overflow: hidden;
	isolation: isolate;
}

.hero-canvas {
	position: absolute;
	inset: 0;
	z-index: -2;
	opacity: 0;
	transition: opacity 1400ms var(--out);
	-webkit-mask-image: linear-gradient(to bottom, #000 84%, transparent);
	mask-image: linear-gradient(to bottom, #000 84%, transparent);
}

.hero-canvas.ready {
	opacity: 1;
}

.hero-canvas canvas,
.mood-canvas canvas,
.final-canvas canvas {
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.hero-scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to bottom, rgb(var(--bg) / 0.9) 0%, rgb(var(--bg) / 0.55) 22%, transparent 40%);
}

.hero-fallback {
	display: none;
}

.no-3d .hero-fallback {
	display: block;
	position: absolute;
	left: 50%;
	bottom: 8%;
	width: min(320px, 50vw);
	height: auto;
	transform: translateX(-50%);
	filter: drop-shadow(0 30px 60px rgb(var(--accent) / 0.25));
	z-index: -1;
}

.hero-inner {
	position: relative;
	pointer-events: none;
}

.hero-copy {
	pointer-events: auto;
	text-align: center;
}

.hero h1 {
	margin: 0;
	font-size: clamp(48px, 6.2vw, 96px);
	line-height: 1;
	white-space: nowrap;
	text-wrap: balance;
}

.hero h1 .accent {
	color: rgb(var(--accent));
}

.hero-sub {
	margin: 18px auto 0;
	max-width: 44ch;
	font-size: clamp(16.5px, 1.4vw, 19px);
	line-height: 1.5;
	color: rgb(var(--ink-2));
	text-wrap: pretty;
}

.hero-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
}

.hero .hero-ctas {
	justify-content: center;
	margin-top: 26px;
}

@media (max-width: 1000px) {
	.hero {
		padding-top: 104px;
	}
	.hero h1 {
		white-space: normal;
		font-size: clamp(42px, 10.5vw, 72px);
		line-height: 1.02;
	}
	.hero-scrim {
		background: linear-gradient(to bottom, rgb(var(--bg) / 0.94) 0%, rgb(var(--bg) / 0.75) 34%, transparent 52%);
	}
}

/* HUD callouts, pinned to points on the 3D dial and the antenna. */
.hud {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	transition: opacity 900ms var(--out);
}

.hud.on {
	opacity: 1;
}

.hud-lines {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.hud-lines path {
	fill: none;
	stroke: rgb(var(--accent) / 0.55);
	stroke-width: 1;
}

.hud-lines circle {
	fill: rgb(var(--accent));
	filter: drop-shadow(0 0 4px rgb(var(--accent)));
}

.hud[data-state="idle"] .hud-lines path {
	stroke: rgb(var(--ink) / 0.25);
}

.hud[data-state="idle"] .hud-lines circle {
	fill: rgb(var(--ink-3));
	filter: none;
}

.hud-tag {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 14px;
	border-radius: 14px;
	background: rgb(var(--surface) / 0.55);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line) / 0.8),
		0 16px 30px -20px rgb(var(--shadow) / 0.6);
	will-change: transform;
}

.hud-k {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb(var(--ink-3));
}

.hud-v {
	margin-top: 6px;
	font-family: var(--mono);
	font-size: 33px;
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: rgb(var(--ink));
}

.hud[data-state="active"] .hud-v {
	color: rgb(var(--accent));
}

.hud-say {
	flex-direction: row;
	align-items: center;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 500;
	white-space: nowrap;
	color: rgb(var(--ink));
}

.hud-say-text {
	display: inline-block;
}

/* ── Live demo section ──────────────────────────────────────────────────── */

.demo::before {
	content: "";
	position: absolute;
	inset: 0 0 0 30%;
	pointer-events: none;
	background: radial-gradient(ellipse 45% 50% at 60% 50%, rgb(var(--accent) / 0.1), transparent 70%);
	opacity: 0;
	transition: opacity 1200ms var(--out);
}

.demo[data-state="active"]::before {
	opacity: 1;
}

.demo-grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 72px;
}

.demo-tips {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.demo-tips li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 15.5px;
	color: rgb(var(--ink-2));
}

.demo-tips .kbd {
	height: 26px;
	min-width: 26px;
	padding: 0 8px;
	font-size: 12px;
	background: rgb(var(--surface));
	color: rgb(var(--ink));
	box-shadow:
		0 0 0 1px rgb(var(--line)),
		0 2px 0 rgb(var(--line));
}

.hero-stage {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
}

@media (max-width: 1000px) {
	.demo-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}
	.demo .hero-stage {
		min-width: 0;
		width: 100%;
	}
}

/* ── The app window replica ─────────────────────────────────────────────── */

.mac-fit {
	/* JS sets --s so the 440×700 window fits narrow screens; the media
	   queries below are a no-JS first guess so phones never overflow. */
	--s: 1;
	width: calc(440px * var(--s));
	height: calc(700px * var(--s));
	position: relative;
}

@media (max-width: 472px) {
	.mac-fit {
		--s: 0.72;
	}
}

@media (max-width: 360px) {
	.mac-fit {
		--s: 0.64;
	}
}

.mac {
	position: absolute;
	top: 0;
	left: 0;
	width: 440px;
	height: 700px;
	transform: scale(var(--s));
	transform-origin: 0 0;
	border-radius: 16px;
	overflow: hidden;
	background: rgb(var(--bg));
	color: rgb(var(--ink));
	font-size: 13px;
	line-height: 1.4;
	box-shadow:
		0 0 0 1px rgb(var(--line)),
		0 0 0 0.5px rgb(0 0 0 / 0.2),
		inset 0 1px 0 rgb(var(--hi)),
		0 50px 100px -40px rgb(var(--shadow) / 0.55),
		0 30px 60px -30px rgb(var(--shadow) / 0.35);
	user-select: none;
	-webkit-user-select: none;
	cursor: default;
	animation: window-in 1100ms var(--out-expo) both;
}

@keyframes window-in {
	from {
		opacity: 0;
		transform: scale(var(--s)) translateY(26px) rotateX(8deg);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: scale(var(--s));
		filter: blur(0);
	}
}

.mac-bar {
	position: relative;
	z-index: 3;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.lights {
	position: absolute;
	left: 18px;
	top: 20px;
	display: flex;
	gap: 8px;
}

.lights i {
	width: 12px;
	height: 12px;
	border-radius: 999px;
	background: #ff5f57;
	box-shadow: inset 0 0 0 0.5px rgb(0 0 0 / 0.15);
}

.lights i:nth-child(2) {
	background: #febc2e;
}

.lights i:nth-child(3) {
	background: #28c840;
}

.mac-dot {
	position: absolute;
	right: 20px;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgb(var(--accent));
	opacity: 0;
	transition: opacity 300ms;
}

.mac-dot.on {
	opacity: 1;
	animation: pulse-dot 2.4s ease-out infinite;
}

.mac-dot.warn {
	background: rgb(var(--warn));
	animation: none;
}

.mac-main {
	position: absolute;
	inset: 52px 0 0;
	padding-top: 4px;
}

.view {
	position: absolute;
	inset: 4px 0 0;
}

.view[hidden] {
	display: none;
}

.view.in {
	animation: view-in 460ms var(--out) both;
}

.view.out {
	animation: view-out 260ms cubic-bezier(0.4, 0, 1, 1) both;
	pointer-events: none;
}

@keyframes view-in {
	from {
		opacity: 0;
		transform: translateX(calc(var(--dir, 1) * 22px)) scale(0.985);
		filter: blur(3px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@keyframes view-out {
	to {
		opacity: 0;
		transform: translateX(calc(var(--dir, 1) * -22px)) scale(0.985);
		filter: blur(3px);
	}
}

.scroll-y {
	overflow-y: auto;
	scrollbar-width: none;
}

.scroll-y::-webkit-scrollbar {
	display: none;
}

/* Focus view */

.focus {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0 20px 20px;
	overflow: clip;
}

.ambient {
	position: absolute;
	inset: 0 0 auto;
	height: 75%;
	pointer-events: none;
	opacity: 0;
	transition:
		opacity 900ms var(--out),
		background 900ms;
	background: radial-gradient(ellipse 55% 50% at 50% 55%, rgb(var(--accent) / 0.16), transparent 70%);
}

[data-state="active"] .ambient {
	opacity: 1;
}

[data-state="paused"] .ambient {
	opacity: 0.8;
	background: radial-gradient(ellipse 55% 50% at 50% 55%, rgb(var(--warn) / 0.12), transparent 70%);
}

.status-line {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 20px;
}

.status-line .left {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sdot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.25);
	transition: background-color 500ms;
}

[data-state="active"] .sdot {
	background: rgb(var(--accent));
	animation: pulse-dot 2.4s ease-out infinite;
}

[data-state="paused"] .sdot {
	background: rgb(var(--warn));
}

.s-title {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.s-mode {
	font-size: 12.5px;
	color: rgb(var(--ink-3));
}

.s-time {
	font-family: var(--mono);
	font-size: 12px;
	color: rgb(var(--ink-3));
	font-variant-numeric: tabular-nums;
}

.dial-zone {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.dial {
	position: relative;
	width: 288px;
	height: 288px;
}

.dial svg {
	position: absolute;
	inset: 0;
	overflow: visible;
}

.core-wrap {
	position: absolute;
	inset: 42px;
}

.core {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	transition:
		background 800ms ease-out,
		box-shadow 800ms ease-out;
}

[data-state="active"] .core {
	animation: breathe 5.5s ease-in-out infinite;
}

.ripple {
	position: absolute;
	inset: 0;
	border-radius: 999px;
	border: 1px solid rgb(var(--accent) / 0.7);
	animation: ripple 1.6s var(--out) forwards;
	pointer-events: none;
}

.core-text {
	margin-top: 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 70px;
}

.count {
	font-family: var(--mono);
	font-size: 44px;
	font-weight: 300;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.count.lap {
	animation: lap-pop 780ms cubic-bezier(0.37, 0, 0.63, 1) both;
	transform-origin: 50% 70%;
}

.count-label {
	margin-top: 8px;
	font-size: 11.5px;
	color: rgb(var(--ink-3));
}

.ready {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.035em;
}

.ready-sub {
	margin-top: 4px;
	font-size: 11.5px;
	color: rgb(var(--ink-3));
}

.narration {
	margin-top: 16px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12.5px;
	color: rgb(var(--ink-3));
}

.narration .n-act {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: rgb(var(--ink-2));
}

.narration .n-act b {
	font-weight: 500;
}

.narration .n-act.fresh {
	color: rgb(var(--ink));
}

.narration .n-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.25);
	transition: background-color 700ms;
}

.narration .fresh .n-dot {
	background: rgb(var(--accent));
}

.narration .n-ago {
	color: rgb(var(--ink-3));
}

.focus-bottom > * + * {
	margin-top: 16px;
}

.trace-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 8px;
}

.trace-head span:first-child {
	font-size: 12px;
	font-weight: 500;
	color: rgb(var(--ink-2));
}

.trace-head span:last-child {
	font-family: var(--mono);
	font-size: 11px;
	color: rgb(var(--ink-3));
}

.trace {
	position: relative;
}

.trace svg {
	width: 100%;
	height: 48px;
}

.trace-axis {
	margin-top: 4px;
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 10px;
	color: rgb(var(--ink-3));
}

.trace-mark {
	transform-box: fill-box;
	transform-origin: center;
	animation: grow-y 700ms var(--spring) both;
}

.trace-empty {
	position: absolute;
	left: 0;
	right: 0;
	top: 26px;
	height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.trace-empty span {
	padding: 0 8px;
	border-radius: 6px;
	background: rgb(var(--bg));
	font-size: 11.5px;
	color: rgb(var(--ink-3));
}

.chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	min-height: 28px;
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.055);
	font-size: 11.5px;
	font-weight: 500;
	color: rgb(var(--ink-2));
}

.chip.accent {
	color: rgb(var(--accent));
}

.chip-note {
	font-size: 11.5px;
	color: rgb(var(--ink-3));
}

.actions {
	display: flex;
	gap: 8px;
}

.start {
	position: relative;
	flex: 1;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 16px;
	overflow: hidden;
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
	background: rgb(var(--accent));
	color: rgb(var(--accent-ink));
	box-shadow:
		0 10px 30px -12px rgb(var(--accent) / 0.8),
		inset 0 1px 0 rgb(255 255 255 / 0.25);
}

.start .kbd {
	position: absolute;
	right: 14px;
	background: rgb(0 0 0 / 0.1);
	color: rgb(var(--accent-ink) / 0.7);
	transition: background-color 300ms, color 300ms;
}

.start.on {
	background: rgb(var(--ink) / 0.07);
	color: rgb(var(--ink));
	box-shadow: none;
}

.start.on:hover {
	background: rgb(var(--ink) / 0.1);
}

.start.on .kbd {
	background: rgb(var(--ink) / 0.08);
	color: rgb(var(--ink-3));
}

.nudge {
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: rgb(var(--ink) / 0.07);
	color: rgb(var(--ink-2));
}

.nudge:hover {
	background: rgb(var(--ink) / 0.1);
	color: rgb(var(--ink));
}

.nudge.moving svg {
	color: rgb(var(--accent));
	animation: wiggle 600ms var(--spring) infinite;
}

/* Insights and settings views */

.pad-view {
	height: 100%;
	padding: 0 20px 24px;
}

.pad-view > * + * {
	margin-top: 12px;
}

.mac .panel {
	border-radius: 18px;
}

.totals {
	display: flex;
}

.totals > div {
	flex: 1;
	padding: 14px 16px;
}

.totals > div + div {
	box-shadow: -1px 0 0 rgb(var(--line) / 0.7);
}

.totals .big {
	font-family: var(--mono);
	font-size: 26px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.04em;
	font-variant-numeric: tabular-nums;
}

.label {
	margin-top: 8px;
	font-size: 12px;
	font-weight: 500;
	color: rgb(var(--ink-3));
}

.card-pad {
	padding: 16px;
}

.card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 14px;
}

.card-head h4 {
	margin: 0;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.card-head span {
	font-size: 11.5px;
	color: rgb(var(--ink-3));
}

.heat {
	display: grid;
	gap: 3px;
	grid-template-columns: 38px repeat(24, minmax(0, 1fr));
	grid-auto-rows: 12px;
}

.heat .hl {
	font-family: var(--mono);
	font-size: 9.5px;
	line-height: 12px;
	color: rgb(var(--ink-3));
}

.heat .dl {
	font-size: 10.5px;
	line-height: 12px;
	color: rgb(var(--ink-3));
}

.heat .cell {
	display: block;
	border-radius: 3px;
	transition:
		transform 300ms var(--spring-soft),
		background-color 300ms;
}

.heat .cell:hover {
	transform: scale(1.4);
}

.heat-foot {
	margin-top: 14px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 11.5px;
	color: rgb(var(--ink-2));
}

.legend {
	display: flex;
	align-items: center;
	gap: 4px;
	color: rgb(var(--ink-3));
}

.legend i {
	width: 10px;
	height: 10px;
	border-radius: 3px;
}

.mix-bar {
	display: flex;
	gap: 2px;
	height: 10px;
	border-radius: 999px;
	overflow: hidden;
}

.mix-bar i {
	height: 100%;
}

.mix-list {
	margin-top: 14px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 24px;
	font-size: 12.5px;
}

.mix-list div {
	display: flex;
	align-items: center;
	gap: 8px;
}

.mix-list i {
	width: 8px;
	height: 8px;
	border-radius: 2px;
}

.mix-list span {
	flex: 1;
	color: rgb(var(--ink-2));
}

.mix-list em {
	font-style: normal;
	font-family: var(--mono);
	font-size: 11.5px;
	color: rgb(var(--ink-3));
}

.local-note {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding-top: 4px;
	font-size: 11px;
	color: rgb(var(--ink-3));
}

.sec-title {
	margin: 8px 4px 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: rgb(var(--ink-2));
}

.pad-view > .sec-title {
	margin-top: 20px;
}

.pad-view > .sec-title:first-child {
	margin-top: 0;
}

.sec-title + .panel {
	margin-top: 0;
}

.rows {
	overflow: hidden;
}

.rows > * + * {
	box-shadow: 0 -1px 0 rgb(var(--line) / 0.7);
}

.mode {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	width: 100%;
	padding: 12px 16px;
	text-align: left;
	transition: background-color 200ms;
}

.mode:hover {
	background: rgb(var(--ink) / 0.025);
}

.mode[aria-checked="true"] {
	background: rgb(var(--accent) / 0.06);
}

.radio {
	position: relative;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 3px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / 0.2);
	transition: all 300ms;
}

.radio::after {
	content: "";
	position: absolute;
	inset: 5px;
	border-radius: 999px;
	background: rgb(var(--accent-ink));
	transform: scale(0);
	transition: transform 300ms var(--spring-soft);
}

.mode[aria-checked="true"] .radio {
	background: rgb(var(--accent));
	box-shadow: none;
}

.mode[aria-checked="true"] .radio::after {
	transform: scale(1);
}

.mode b {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.mode small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.45;
	color: rgb(var(--ink-3));
}

.row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
}

.row-ic {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: rgb(var(--ink) / 0.05);
	color: rgb(var(--ink-2));
}

.row-txt {
	flex: 1;
	min-width: 0;
}

.row-txt b {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -0.01em;
}

.row-txt small {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.45;
	color: rgb(var(--ink-3));
}

/* ── Buddy ──────────────────────────────────────────────────────────────── */

.buddy {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 44px;
}

.buddy .eyes {
	display: flex;
	align-items: center;
	gap: 18px;
}

.buddy .eye-pos {
	display: block;
	transition: transform 380ms var(--spring);
}

.buddy .eye {
	display: block;
}

.buddy.scan .eye-pos > .eye {
	animation: buddy-scan 1.3s ease-in-out infinite;
}

.buddy .phones {
	position: absolute;
	inset: 0;
	overflow: visible;
	opacity: 0;
	transform: translateY(-6px) scale(0.92);
	transition:
		opacity 400ms var(--out),
		transform 500ms var(--spring);
}

.buddy.listen .phones {
	opacity: 1;
	transform: none;
}

.buddy .zzz {
	position: absolute;
	right: -4px;
	top: -12px;
	font-family: var(--mono);
	font-weight: 600;
	pointer-events: none;
	display: none;
}

.buddy.sleepy .zzz {
	display: block;
}

.buddy .zzz span {
	position: absolute;
	opacity: 0;
	animation: buddy-z 3.3s ease-out infinite;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.section {
	position: relative;
	padding: 108px 0;
}

.section-tight {
	padding: 96px 0;
}

.h2 {
	margin: 0;
	font-size: clamp(34px, 4.4vw, 56px);
	line-height: 1.02;
	letter-spacing: -0.045em;
	font-weight: 600;
	text-wrap: balance;
}

.lede {
	margin: 18px 0 0;
	max-width: 52ch;
	font-size: 18px;
	line-height: 1.55;
	color: rgb(var(--ink-2));
	text-wrap: pretty;
}

.center {
	text-align: center;
}

.center .lede {
	margin-left: auto;
	margin-right: auto;
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: rgb(var(--accent));
}

code,
.code {
	font-family: var(--mono);
	font-size: 0.9em;
	padding: 0.12em 0.38em;
	border-radius: 6px;
	background: rgb(var(--ink) / 0.06);
	color: rgb(var(--ink));
}

/* Reveal on scroll (IntersectionObserver adds .in). */
.reveal {
	opacity: 0;
	transform: translateY(18px);
	filter: blur(4px);
	transition:
		opacity 900ms var(--out-expo),
		transform 900ms var(--out-expo),
		filter 900ms var(--out-expo);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.reveal.in {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* Buddy moods stage */

.moods {
	margin-top: 64px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.mood-dial {
	position: relative;
	width: min(420px, 82vw);
	aspect-ratio: 1;
}

.mood-dial svg.ticks {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.mood-core {
	position: absolute;
	inset: 13%;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background 800ms ease-out,
		box-shadow 800ms ease-out;
}

.mood-core .buddy-scale {
	transform: scale(var(--bs, 2.4));
}

.mood-pills {
	margin-top: 44px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: 940px;
}

.mood-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 14px 0 12px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.05);
	font-size: 13.5px;
	font-weight: 500;
	color: rgb(var(--ink-2));
}

.mood-pill:hover {
	background: rgb(var(--ink) / 0.08);
	color: rgb(var(--ink));
}

.mood-pill i {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: rgb(var(--tone));
	box-shadow: 0 0 8px rgb(var(--tone) / 0.6);
}

.mood-pill[aria-selected="true"] {
	background: rgb(var(--surface));
	color: rgb(var(--ink));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line)),
		0 8px 24px -14px rgb(var(--shadow) / 0.5);
}

.mood-caption {
	margin-top: 26px;
	min-height: 56px;
	text-align: center;
}

.mood-caption b {
	display: block;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.mood-caption span {
	display: block;
	margin-top: 4px;
	font-size: 15.5px;
	color: rgb(var(--ink-2));
}

.swap {
	animation: swap-in 720ms var(--out-expo) both;
	animation-delay: var(--d, 0ms);
}

/* Four moves bento */

.bento {
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.tile {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 340px;
	padding: 28px;
	border-radius: var(--r-panel);
	background: rgb(var(--surface));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line));
}

.tile.wide {
	grid-column: span 2;
}

.tile-vis {
	position: relative;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 170px;
	margin: -8px -8px 22px;
	border-radius: 16px;
}

.tile h3 {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: -0.025em;
}

.tile h3 .tag {
	font-size: 11px;
	font-weight: 500;
	font-family: var(--mono);
	letter-spacing: 0;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgb(var(--accent) / 0.12);
	color: rgb(var(--accent));
}

.tile p {
	margin: 8px 0 0;
	max-width: 44ch;
	font-size: 15px;
	line-height: 1.5;
	color: rgb(var(--ink-2));
}

.tile-glow {
	background:
		radial-gradient(ellipse 60% 70% at 50% 55%, rgb(var(--accent) / 0.12), transparent 70%),
		rgb(var(--ink) / 0.025);
}

.tile-grid {
	background-color: rgb(var(--ink) / 0.025);
	background-image:
		linear-gradient(rgb(var(--ink) / 0.05) 1px, transparent 1px),
		linear-gradient(90deg, rgb(var(--ink) / 0.05) 1px, transparent 1px);
	background-size: 22px 22px;
	background-position: center;
}

/* ⌘-Tab switcher */
.switcher {
	display: flex;
	gap: 10px;
	padding: 14px;
	border-radius: 22px;
	background: rgb(var(--surface-2) / 0.9);
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line)),
		0 20px 40px -20px rgb(var(--shadow) / 0.5);
}

.switcher .app {
	position: relative;
	width: 58px;
	height: 58px;
	border-radius: 15px;
	transition: transform 260ms var(--spring);
}

.switcher .app::before {
	content: "";
	position: absolute;
	inset: -7px;
	border-radius: 19px;
	background: rgb(var(--ink) / 0.1);
	opacity: 0;
	transition: opacity 160ms;
}

.switcher .app.sel::before {
	opacity: 1;
}

.switcher .app i {
	position: absolute;
	inset: 0;
	border-radius: 15px;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 0.5px rgb(0 0 0 / 0.2);
}

.switcher .app:nth-child(1) i {
	background: linear-gradient(160deg, rgb(112 230 170), rgb(20 158 101));
}

.switcher .app:nth-child(2) i {
	background: linear-gradient(160deg, rgb(110 110 120), rgb(52 52 58));
}

.switcher .app:nth-child(3) i {
	background: linear-gradient(160deg, rgb(242 188 92), rgb(190 124 18));
}

.switcher .app:nth-child(4) i {
	background: linear-gradient(160deg, rgb(200 200 206), rgb(140 140 148));
}

.switcher .app:nth-child(5) i {
	background: linear-gradient(160deg, rgb(70 70 78), rgb(24 24 28));
}

.keys-hint {
	position: absolute;
	bottom: 14px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	align-items: center;
	font-size: 12px;
	color: rgb(var(--ink-3));
}

.keys-hint .kbd {
	background: rgb(var(--surface));
	color: rgb(var(--ink-2));
	box-shadow: 0 0 0 1px rgb(var(--line)), inset 0 -1px 0 rgb(0 0 0 / 0.12);
	transition: transform 120ms, background-color 120ms, color 120ms;
}

.keys-hint .kbd.down {
	transform: translateY(1px);
	background: rgb(var(--accent));
	color: rgb(var(--accent-ink));
	box-shadow: none;
}

/* Pixel cursor, drawn the way the app icon is: lit cells on a grid. */
.pix-cursor {
	position: relative;
	display: grid;
	grid-template-columns: repeat(10, 9px);
	grid-auto-rows: 9px;
	gap: 2px;
}

.pix-cursor i {
	border-radius: 2px;
}

.pix-cursor i.on {
	background: rgb(var(--c));
	box-shadow: 0 0 10px rgb(var(--c) / 0.55);
}

.live .cursor-move {
	animation: nudge 3.2s var(--spring) infinite;
}

.cursor-ghost {
	position: absolute;
	opacity: 0;
}

.live .cursor-ghost {
	animation: ghost 3.2s ease-out infinite;
}

/* Scroll lines */
.page-lines {
	position: relative;
	width: 72%;
	max-width: 260px;
	height: 128px;
	overflow: hidden;
	border-radius: 12px;
	padding: 0 18px;
	background: rgb(var(--surface-2));
	box-shadow: 0 0 0 1px rgb(var(--line));
	-webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
	mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}

.page-lines .track {
	padding-top: 6px;
}

.live .page-lines .track {
	animation: scroll-line 3.4s var(--out) infinite;
}

.page-lines i {
	display: block;
	height: 7px;
	margin: 11px 0;
	border-radius: 4px;
	background: rgb(var(--ink) / 0.12);
}

.page-lines i.hl {
	background: rgb(var(--accent) / 0.55);
}

.scroll-arrows {
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: rgb(var(--ink-3));
}

.live .scroll-arrows .up {
	animation: arrow-flash 3.4s infinite;
}

.live .scroll-arrows .dn {
	animation: arrow-flash 3.4s infinite 0.9s;
}

/* Shift key */
.shift-key {
	position: relative;
	width: 210px;
	height: 66px;
	border-radius: 14px;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	padding: 0 0 11px 16px;
	font-size: 15px;
	font-weight: 500;
	color: rgb(var(--ink-2));
	background: rgb(var(--surface));
	box-shadow:
		0 0 0 1px rgb(var(--line)),
		0 5px 0 rgb(var(--line)),
		0 6px 0 rgb(var(--ink) / 0.1),
		0 22px 30px -18px rgb(var(--shadow) / 0.45);
}

.shift-key .arrow {
	position: absolute;
	top: 10px;
	left: 16px;
}

.live .shift-key {
	animation: key-press 2.6s var(--spring) infinite;
}

.shift-ring {
	position: absolute;
	inset: 0;
	border-radius: 14px;
	border: 1.5px solid rgb(var(--accent));
	opacity: 0;
}

.live .shift-ring {
	animation: key-ring 2.6s var(--out) infinite;
}

/* Back-off timeline */

.timeline-card {
	margin-top: 56px;
	padding: 28px;
}

.tl-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 26px;
}

.tl-toggles {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.tl-toggle {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 40px;
	padding: 0 8px 0 14px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.045);
	font-size: 13.5px;
	font-weight: 500;
	color: rgb(var(--ink-2));
	cursor: pointer;
}

.tl-toggle .toggle {
	pointer-events: none;
	transform: scale(0.86);
}

.tl-count {
	font-size: 14px;
	color: rgb(var(--ink-2));
}

.tl-count b {
	font-family: var(--mono);
	font-weight: 500;
	font-size: 22px;
	letter-spacing: -0.03em;
	color: rgb(var(--ink));
	margin-right: 6px;
}

.tl {
	position: relative;
}

.tl svg {
	width: 100%;
	height: auto;
	overflow: visible;
}

.tl-lane-label {
	font-size: 12px;
	font-weight: 500;
	fill: rgb(var(--ink-3));
}

.tl-hour {
	font-family: var(--mono);
	font-size: 11px;
	fill: rgb(var(--ink-3));
}

.tl-tick {
	transition:
		opacity 500ms var(--out),
		transform 500ms var(--spring);
	transform-box: fill-box;
	transform-origin: center;
}

.tl-tick.off {
	opacity: 0;
	transform: scaleY(0);
}

.tl-zone {
	transition: opacity 400ms;
}

.tl-zone-label {
	font-size: 11.5px;
	font-weight: 500;
}

.tl-legend {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	font-size: 13px;
	color: rgb(var(--ink-3));
}

.tl-legend span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tl-legend i {
	width: 14px;
	height: 8px;
	border-radius: 2px;
}

@media (max-width: 760px) {
	.tl-scroll {
		overflow-x: auto;
		margin: 0 -28px;
		padding: 0 28px;
		scrollbar-width: none;
	}
	.tl-scroll::-webkit-scrollbar {
		display: none;
	}
	.tl-scroll svg {
		width: 760px;
	}
}

/* Sleep band */

.sleep {
	overflow: hidden;
}

.sleep::before {
	content: "";
	position: absolute;
	inset: 10% 0 auto;
	height: 70%;
	pointer-events: none;
	background: radial-gradient(ellipse 40% 50% at 50% 50%, rgb(var(--accent) / 0.07), transparent 70%);
}

.cmd-stack {
	position: relative;
	margin-top: 56px;
	display: grid;
	gap: 14px;
}

.cmd {
	display: grid;
	grid-template-columns: 170px minmax(0, 1fr) auto;
	align-items: center;
	gap: 24px;
	padding: 22px 28px;
	border-radius: var(--r-panel);
	background: rgb(var(--surface));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line));
}

.cmd .when {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 500;
	color: rgb(var(--ink-2));
}

.cmd .line {
	font-family: var(--mono);
	font-size: clamp(16px, 2.2vw, 26px);
	letter-spacing: -0.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cmd .line .p {
	color: rgb(var(--ink-3));
	margin-right: 0.6em;
}

.cmd .line .v {
	color: rgb(var(--accent));
}

.cmd .state {
	font-size: 12.5px;
	font-weight: 500;
	padding: 5px 11px;
	border-radius: 999px;
	white-space: nowrap;
}

.cmd .state.on {
	background: rgb(var(--accent) / 0.12);
	color: rgb(var(--accent));
}

.cmd .state.off {
	background: rgb(var(--ink) / 0.06);
	color: rgb(var(--ink-2));
}

.facts {
	margin-top: 56px;
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 40px;
}

.fact {
	padding-top: 22px;
	box-shadow: 0 -1px 0 rgb(var(--line));
}

.fact .row-ic {
	width: 34px;
	height: 34px;
	border-radius: 10px;
	margin-bottom: 16px;
}

.fact h3 {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.fact p {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgb(var(--ink-2));
	text-wrap: pretty;
}

@media (max-width: 760px) {
	.cmd {
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 20px;
	}
	.cmd .state {
		justify-self: start;
	}
	.facts {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* Insights band */

.insights-grid {
	margin-top: 56px;
	display: grid;
	grid-template-columns: 300px minmax(0, 1fr);
	gap: 14px;
}

.stat-stack {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
}

.stat-stack > div {
	padding: 24px 26px;
}

.stat-stack > div + div {
	box-shadow: 0 -1px 0 rgb(var(--line) / 0.8);
}

.stat-stack .big {
	font-family: var(--mono);
	font-size: 44px;
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.05em;
	font-variant-numeric: tabular-nums;
}

.stat-stack .label {
	font-size: 13px;
}

.heat-card {
	padding: 26px;
	min-width: 0;
}

.heat-card .heat {
	grid-template-columns: 44px repeat(24, minmax(0, 1fr));
	grid-auto-rows: minmax(18px, 1fr);
	gap: 4px;
}

.heat-card .heat .cell {
	border-radius: 4px;
}

.heat-card .heat .hl,
.heat-card .heat .dl {
	font-size: 11px;
	line-height: 18px;
}

.heat .cell-wrap {
	display: block;
}

.in .heat .cell-wrap,
.heat.live .cell-wrap {
	animation: pop-in 520ms var(--spring) both;
	animation-delay: var(--dl, 0ms);
}

.heat-card .mix-row {
	margin-top: 26px;
	padding-top: 22px;
	box-shadow: 0 -1px 0 rgb(var(--line) / 0.8);
}

.mix-row .mix-list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sample-note {
	font-size: 12px;
	color: rgb(var(--ink-3));
}

@media (max-width: 900px) {
	.insights-grid {
		grid-template-columns: 1fr;
	}
	.stat-stack {
		grid-template-rows: none;
		grid-template-columns: repeat(3, 1fr);
	}
	.stat-stack > div {
		padding: 18px;
	}
	.stat-stack > div + div {
		box-shadow: -1px 0 0 rgb(var(--line) / 0.8);
	}
	.stat-stack .big {
		font-size: 30px;
	}
}

@media (max-width: 640px) {
	.heat-card {
		padding: 18px;
	}
	.heat-card .heat {
		grid-template-columns: 34px repeat(24, minmax(0, 1fr));
		grid-auto-rows: 11px;
		gap: 2px;
	}
	.heat-card .heat .hl,
	.heat-card .heat .dl {
		font-size: 9.5px;
		line-height: 11px;
	}
	.mix-row .mix-list {
		grid-template-columns: 1fr 1fr;
	}
}

/* Keyboard + menu bar */

.kb-grid {
	margin-top: 64px;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.keys {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 22px 26px;
	align-items: center;
}

.keycap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 64px;
	min-width: 64px;
	padding: 0 20px;
	border-radius: 14px;
	font-family: var(--mono);
	font-size: 17px;
	font-weight: 500;
	color: rgb(var(--ink));
	background: rgb(var(--surface));
	box-shadow:
		0 0 0 1px rgb(var(--line)),
		0 5px 0 rgb(var(--line)),
		0 6px 0 rgb(var(--ink) / 0.1),
		0 22px 30px -20px rgb(var(--shadow) / 0.45);
	transition:
		transform 140ms var(--out),
		box-shadow 140ms var(--out),
		background-color 200ms,
		color 200ms;
}

.keycap.space {
	min-width: 220px;
	justify-content: flex-start;
	font-size: 15px;
	color: rgb(var(--ink-2));
}

.keycap.down,
.keycap:active {
	transform: translateY(5px);
	background: rgb(var(--accent));
	color: rgb(var(--accent-ink));
	box-shadow:
		0 0 0 1px rgb(var(--accent)),
		0 0 0 rgb(var(--line)),
		0 0 0 rgb(var(--line)),
		0 10px 30px -10px rgb(var(--accent) / 0.8);
}

.keycap.static {
	cursor: default;
}

.keycap.static:active {
	transform: none;
	background: rgb(var(--surface));
	color: rgb(var(--ink));
	box-shadow:
		0 0 0 1px rgb(var(--line)),
		0 5px 0 rgb(var(--line)),
		0 6px 0 rgb(var(--ink) / 0.1),
		0 22px 30px -20px rgb(var(--shadow) / 0.45);
}

.key-desc b {
	display: block;
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.key-desc span {
	display: block;
	margin-top: 2px;
	font-size: 14.5px;
	color: rgb(var(--ink-3));
}

.kb-live {
	margin-top: 34px;
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 10px 18px 10px 10px;
	border-radius: 999px;
	background: rgb(var(--surface));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line));
	font-size: 13.5px;
	color: rgb(var(--ink-2));
}

.kb-live .mini {
	width: 54px;
	height: 34px;
	border-radius: 999px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--bg));
	overflow: hidden;
}

.kb-live .mini .buddy {
	transform: scale(0.42);
}

.kb-live b {
	color: rgb(var(--ink));
	font-weight: 600;
}

/* Menu bar dropdown, as the tray renders it */
.menubar {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background:
		radial-gradient(ellipse 80% 90% at 70% 0%, rgb(var(--accent) / 0.16), transparent 70%),
		linear-gradient(160deg, rgb(var(--surface-2)), rgb(var(--bg-2)));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line));
	padding-bottom: 32px;
	min-height: 360px;
}

.mb-strip {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 16px;
	height: 30px;
	padding: 0 16px;
	font-size: 12.5px;
	font-weight: 500;
	background: rgb(var(--surface) / 0.6);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	box-shadow: 0 1px 0 rgb(var(--line) / 0.8);
	color: rgb(var(--ink-2));
}

.mb-strip .tray {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 22px;
	border-radius: 6px;
	background: rgb(var(--ink) / 0.12);
}

.mb-strip .tray img {
	width: 16px;
	height: 16px;
	border-radius: 4px;
}

.mb-menu {
	position: absolute;
	top: 36px;
	right: 70px;
	width: 236px;
	padding: 5px;
	border-radius: 12px;
	font-size: 13px;
	background: rgb(var(--surface) / 0.88);
	-webkit-backdrop-filter: blur(30px) saturate(160%);
	backdrop-filter: blur(30px) saturate(160%);
	box-shadow:
		0 0 0 0.5px rgb(0 0 0 / 0.25),
		inset 0 0.5px 0 rgb(255 255 255 / 0.2),
		0 20px 40px -12px rgb(var(--shadow) / 0.55);
}

.mb-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 24px;
	padding: 0 10px;
	border-radius: 5px;
	color: rgb(var(--ink));
}

.mb-item.dim {
	color: rgb(var(--ink-3));
}

.mb-item.hover {
	background: rgb(var(--accent));
	color: rgb(var(--accent-ink));
}

.mb-item .chev {
	opacity: 0.6;
}

.mb-sep {
	height: 1px;
	margin: 5px 10px;
	background: rgb(var(--ink) / 0.1);
}

.mb-caption {
	position: absolute;
	left: 26px;
	right: 26px;
	bottom: 24px;
	font-size: 14px;
	color: rgb(var(--ink-2));
	max-width: 30ch;
}

.mb-caption b {
	display: block;
	color: rgb(var(--ink));
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.015em;
	margin-bottom: 2px;
}

@media (max-width: 900px) {
	.kb-grid {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

@media (max-width: 520px) {
	.keys {
		gap: 18px 18px;
	}
	.keycap {
		height: 54px;
		min-width: 54px;
		padding: 0 14px;
		font-size: 15px;
	}
	.keycap.space {
		min-width: 120px;
	}
	.mb-menu {
		right: 16px;
	}
}

/* Install */

.steps {
	position: relative;
	margin-top: 64px;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	counter-reset: step;
}

.steps::before {
	content: "";
	position: absolute;
	top: 23px;
	left: 24px;
	right: 24px;
	height: 1px;
	background: linear-gradient(90deg, rgb(var(--accent) / 0.6), rgb(var(--line)) 60%);
}

.step {
	position: relative;
}

.step-ic {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgb(var(--surface));
	color: rgb(var(--ink));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line)),
		0 0 0 8px rgb(var(--bg));
}

.step:first-child .step-ic {
	background: rgb(var(--accent));
	color: rgb(var(--accent-ink));
	box-shadow:
		0 10px 24px -10px rgb(var(--accent) / 0.8),
		0 0 0 8px rgb(var(--bg));
}

.step h3 {
	margin: 26px 0 0;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

.step p {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.55;
	color: rgb(var(--ink-2));
	text-wrap: pretty;
}

.step a.inline {
	color: rgb(var(--accent));
	font-weight: 500;
}

.step a.inline:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 900px) {
	.steps {
		grid-template-columns: 1fr 1fr;
		gap: 40px 28px;
	}
	.steps::before {
		display: none;
	}
}

@media (max-width: 560px) {
	.steps {
		grid-template-columns: 1fr;
	}
}

/* FAQ */

.faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 64px;
	align-items: start;
}

.faq-head {
	position: sticky;
	top: 110px;
}

.faq-list {
	display: grid;
	gap: 10px;
}

.qa {
	border-radius: 18px;
	background: rgb(var(--surface));
	box-shadow:
		inset 0 1px 0 rgb(var(--hi)),
		0 0 0 1px rgb(var(--line));
	overflow: hidden;
}

.qa summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 22px;
	font-size: 16.5px;
	font-weight: 600;
	letter-spacing: -0.015em;
	cursor: pointer;
}

.qa summary::-webkit-details-marker {
	display: none;
}

.qa summary .plus {
	position: relative;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 999px;
	background: rgb(var(--ink) / 0.06);
	transition:
		transform 420ms var(--spring),
		background-color 200ms;
}

.qa summary .plus::before,
.qa summary .plus::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 10px;
	height: 1.6px;
	border-radius: 2px;
	background: rgb(var(--ink-2));
	transform: translate(-50%, -50%);
}

.qa summary .plus::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.qa[open] summary .plus {
	transform: rotate(45deg);
	background: rgb(var(--accent) / 0.14);
}

.qa[open] summary .plus::before,
.qa[open] summary .plus::after {
	background: rgb(var(--accent));
}

.qa .ans {
	padding: 0 22px 22px;
	margin-top: -4px;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgb(var(--ink-2));
	max-width: 62ch;
}

.qa[open] .ans {
	animation: swap-in 520ms var(--out-expo) both;
}

@media (max-width: 900px) {
	.faq-grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}
	.faq-head {
		position: static;
	}
}

/* Final CTA */

.final {
	padding: 140px 0 120px;
	text-align: center;
	overflow: hidden;
}

.final::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 40% 45% at 50% 38%, rgb(var(--accent) / 0.1), transparent 70%);
}

.final-dial {
	position: relative;
	width: 260px;
	height: 260px;
	margin: 0 auto 44px;
}

.final-dial svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.final-dial .core-wrap {
	inset: 38px;
}

.final-dial img {
	width: 92px;
	height: 92px;
}

.final .hero-ctas {
	justify-content: center;
}

.final-meta {
	margin-top: 22px;
	font-size: 13.5px;
	color: rgb(var(--ink-3));
}

/* Footer: a sign-off, a live readout of this visit, and a pixel wordmark
   that heats up under the pointer like the app icon. */

.foot {
	position: relative;
	padding: 88px 0 40px;
	box-shadow: 0 -1px 0 rgb(var(--line) / 0.8);
	overflow: hidden;
}

.foot-top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 56px;
	align-items: start;
}

.foot-sign .brand {
	font-size: 16px;
}

.foot-sign .brand img {
	width: 34px;
	height: 34px;
}

.foot-quote {
	margin: 22px 0 0;
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 600;
	letter-spacing: -0.035em;
	line-height: 1.15;
	max-width: 22ch;
}

.foot-visit {
	margin: 14px 0 0;
	font-size: 14.5px;
	color: rgb(var(--ink-3));
	max-width: 46ch;
}

.foot-visit b {
	color: rgb(var(--accent));
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.foot-cols {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 56px;
}

.foot-cols h4 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 600;
	color: rgb(var(--ink));
}

.foot-cols a,
.foot-key {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	font-size: 14px;
	color: rgb(var(--ink-2));
	transition: color 200ms;
}

.foot-cols a:hover {
	color: rgb(var(--accent));
}

.foot-key .kbd {
	background: rgb(var(--ink) / 0.07);
	color: rgb(var(--ink-2));
}

.pixel-word {
	position: relative;
	margin: 64px 0 28px;
	width: 100%;
	aspect-ratio: 6.2;
}

.pixel-word canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.foot-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	font-size: 13px;
	color: rgb(var(--ink-3));
}

.foot-bottom a {
	color: rgb(var(--ink-2));
}

.foot-bottom a:hover {
	color: rgb(var(--accent));
}

.foot-right {
	display: flex;
	align-items: center;
	gap: 14px;
}

@media (max-width: 900px) {
	.foot-top {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.foot-cols {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 24px;
	}
	.pixel-word {
		aspect-ratio: 4.4;
	}
}

/* Toast: the buddy talks, now and then. */
.toast {
	--accent: 112 230 170;
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: min(380px, calc(100vw - 40px));
	padding: 10px 16px 10px 10px;
	border-radius: 16px;
	background: rgb(16 17 19 / 0.92);
	color: #ececee;
	font-size: 13.5px;
	line-height: 1.4;
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	box-shadow:
		inset 0 1px 0 rgb(255 255 255 / 0.08),
		0 0 0 1px rgb(255 255 255 / 0.06),
		0 24px 40px -18px rgb(0 0 0 / 0.6);
	opacity: 0;
	transform: translateY(16px) scale(0.96);
	pointer-events: none;
	transition:
		opacity 400ms var(--out),
		transform 600ms var(--spring);
}

.toast.show {
	opacity: 1;
	transform: none;
}

.toast-face {
	--warn: 242 188 92;
	--ink-3: 132 136 142;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	overflow: hidden;
	background: radial-gradient(circle at 50% 40%, rgb(var(--accent) / 0.2), transparent 70%), #0b0c0d;
}

.toast-face .buddy {
	flex-shrink: 0;
	transform: scale(0.36);
}

/* 3D stages, with the 2D versions as fallbacks. */
.mood-canvas,
.final-canvas {
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 72%, transparent 100%);
}

.mood-canvas {
	display: none;
	width: min(620px, 94vw);
	aspect-ratio: 1.12;
	margin: -20px auto -30px;
	opacity: 0;
	transition: opacity 1200ms var(--out);
}

.mood-canvas.ready {
	opacity: 1;
}

.has-3d .mood-canvas {
	display: block;
}

.has-3d .mood-dial {
	display: none;
}

.final-canvas {
	display: none;
	width: min(520px, 92vw);
	aspect-ratio: 1.15;
	margin: -60px auto -10px;
	opacity: 0;
	transition: opacity 1200ms var(--out);
}

.final-canvas.ready {
	opacity: 1;
}

.has-3d .final-canvas {
	display: block;
}

.has-3d .final-dial {
	display: none;
}

.final .lede {
	margin: 12px auto 0;
}

/* Bento collapse */

@media (max-width: 900px) {
	.bento {
		grid-template-columns: 1fr 1fr;
	}
	.tile.wide {
		grid-column: span 2;
	}
}

@media (max-width: 640px) {
	.section {
		padding: 88px 0;
	}
	.bento {
		grid-template-columns: 1fr;
	}
	.tile.wide {
		grid-column: auto;
	}
	.tile {
		padding: 22px;
		min-height: 0;
	}
	.switcher {
		gap: 7px;
		padding: 10px;
	}
	.switcher .app {
		width: 40px;
		height: 40px;
		border-radius: 11px;
	}
	.switcher .app i {
		border-radius: 11px;
	}
	.timeline-card {
		padding: 20px;
	}
	.hero-ctas .btn {
		flex: 1 1 auto;
	}
}

/* ── Keyframes (shared with the app) ────────────────────────────────────── */

@keyframes breathe {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(1.025);
	}
}

@keyframes ripple {
	from {
		transform: scale(0.92);
		opacity: 0.55;
	}
	to {
		transform: scale(1.55);
		opacity: 0;
	}
}

@keyframes pulse-dot {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgb(var(--accent) / 0.55);
	}
	60% {
		box-shadow: 0 0 0 6px rgb(var(--accent) / 0);
	}
}

@keyframes swap-in {
	from {
		opacity: 0;
		transform: translateY(10px) scale(0.97);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: blur(0);
	}
}

@keyframes pop-in {
	from {
		opacity: 0;
		transform: scale(0.4);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes grow-y {
	from {
		transform: scaleY(0);
		opacity: 0;
	}
	to {
		transform: none;
		opacity: 1;
	}
}

@keyframes lap-tick {
	0% {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

.lap-tick {
	animation: lap-tick 620ms var(--out) both;
	animation-delay: calc(var(--i) * 8ms);
}

@keyframes lap-flare {
	from {
		opacity: 0.9;
		transform: scale(0.5);
	}
	to {
		opacity: 0;
		transform: scale(4.2);
	}
}

.lap-flare {
	transform-box: fill-box;
	transform-origin: center;
	animation: lap-flare 760ms var(--out) both;
	animation-delay: var(--d, 0ms);
}

@keyframes lap-spark {
	0% {
		opacity: 0;
		transform: translate(0, 0) rotate(0deg) scale(0.3);
	}
	20% {
		opacity: 1;
		transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) * 0.5)) rotate(calc(var(--rot) * 0.4)) scale(1.15);
	}
	100% {
		opacity: 0;
		transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(0.35);
	}
}

.lap-spark {
	transform-box: fill-box;
	transform-origin: center;
	animation: lap-spark 900ms var(--out-expo) both;
	animation-delay: var(--d, 0ms);
}

@keyframes lap-pop {
	0% {
		transform: none;
	}
	22% {
		transform: scale(1.16, 0.84);
		color: rgb(var(--accent));
	}
	48% {
		transform: scale(0.93, 1.08);
	}
	70% {
		transform: scale(1.03, 0.98);
	}
	100% {
		transform: none;
		color: rgb(var(--accent));
	}
}

@keyframes buddy-scan {
	0%,
	100% {
		translate: -4px 0;
	}
	50% {
		translate: 4px 0;
	}
}

@keyframes buddy-z {
	0% {
		opacity: 0;
		transform: translate(0, 4px) scale(0.6);
	}
	25% {
		opacity: 0.9;
	}
	100% {
		opacity: 0;
		transform: translate(12px, -18px) scale(1.15);
	}
}

@keyframes wiggle {
	0%,
	100% {
		transform: rotate(0);
	}
	25% {
		transform: rotate(-14deg) translateX(-1px);
	}
	60% {
		transform: rotate(10deg) translateX(1px);
	}
}

@keyframes nudge {
	0%,
	30% {
		transform: translate(0, 0);
	}
	42% {
		transform: translate(14px, 9px);
	}
	70% {
		transform: translate(14px, 9px);
	}
	82%,
	100% {
		transform: translate(0, 0);
	}
}

@keyframes ghost {
	0%,
	32% {
		opacity: 0;
	}
	36% {
		opacity: 0.35;
	}
	60%,
	100% {
		opacity: 0;
	}
}

@keyframes scroll-line {
	0%,
	25% {
		transform: translateY(0);
	}
	40%,
	60% {
		transform: translateY(-18px);
	}
	75%,
	100% {
		transform: translateY(0);
	}
}

@keyframes arrow-flash {
	0%,
	22% {
		color: rgb(var(--ink-3));
	}
	30%,
	42% {
		color: rgb(var(--accent));
	}
	50%,
	100% {
		color: rgb(var(--ink-3));
	}
}

@keyframes key-press {
	0%,
	40% {
		transform: none;
		box-shadow:
			0 0 0 1px rgb(var(--line)),
			0 5px 0 rgb(var(--line)),
			0 6px 0 rgb(var(--ink) / 0.1),
			0 22px 30px -18px rgb(var(--shadow) / 0.45);
	}
	46%,
	54% {
		transform: translateY(5px);
		box-shadow:
			0 0 0 1px rgb(var(--accent) / 0.8),
			0 0 0 rgb(var(--line)),
			0 0 0 rgb(var(--line)),
			0 10px 26px -12px rgb(var(--accent) / 0.7);
	}
	64%,
	100% {
		transform: none;
	}
}

@keyframes key-ring {
	0%,
	46% {
		opacity: 0;
		transform: scale(1);
	}
	50% {
		opacity: 0.9;
		transform: translateY(5px) scale(1);
	}
	90%,
	100% {
		opacity: 0;
		transform: translateY(5px) scale(1.18, 1.5);
	}
}

/* Bento loops only run while their tile is on screen. */
.tile:not(.live) * {
	animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 1ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 1ms !important;
	}
	.reveal {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

/* Odometer window (the app's Rolling): taller than the digit and faded at
   both ends, so rolling digits melt in and out instead of being sliced. */
.roll {
	display: inline-flex;
}

.roll-window {
	--roll-pad: 0.3em;
	--roll-h: calc(1em + 2 * var(--roll-pad));
	position: relative;
	display: inline-block;
	height: var(--roll-h);
	margin-block: calc(-1 * var(--roll-pad));
	line-height: var(--roll-h);
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.4) 11%, #000 25%, #000 75%, rgb(0 0 0 / 0.4) 89%, transparent);
	mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / 0.4) 11%, #000 25%, #000 75%, rgb(0 0 0 / 0.4) 89%, transparent);
}

.roll-window .ghost {
	visibility: hidden;
}

.roll-strip {
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	flex-direction: column;
}

.roll-cell {
	display: block;
	height: var(--roll-h);
}

.roll-sep {
	display: inline-block;
	line-height: 1;
}

/* Template tray glyph is black; flip it on dark surfaces. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tray-img {
		filter: invert(1);
	}
}

:root[data-theme="dark"] .tray-img {
	filter: invert(1);
}

/* ── Display type ───────────────────────────────────────────────────────── */
/* Headlines get their own family; body and mono stay separate roles. The
   window replica keeps Geist, because that's the real app's typeface. */

:root {
	--display: "Clash Display", "Satoshi", ui-sans-serif, system-ui, sans-serif;
	--display-weight: 600;
}

/* Clash is already tight and wide, so it wants less negative tracking
   than the Geist-tuned values above. */
.hero h1 {
	letter-spacing: -0.02em;
}

.h2,
.foot-quote {
	letter-spacing: -0.015em;
}

.mood-caption b,
.tile h3,
.fact h3,
.step h3,
.key-desc b,
.brand-name {
	letter-spacing: 0;
}

.hero h1,
.h2,
.foot-quote,
.mood-caption b,
.tile h3,
.fact h3,
.step h3,
.key-desc b,
.brand-name {
	font-family: var(--display);
	font-weight: var(--display-weight);
}

.mac,
.brand-face,
.toast {
	--sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
	font-family: var(--sans);
}