/*
 * The Levo page. A product page with its own design, kept apart from the site's
 * text layout on purpose: everything here lives in levo/.
 * Light by default; html.dark (set in the head) switches it.
 */

:root {
	--bg: #F7F7F7;
	--ink: 0 0 0;
	--text: #1D1D1F;
	--muted: #6B6B74;
	--card: rgba(0, 0, 0, 0.025);
	--rim: rgba(0, 0, 0, 0.08);
	--btn: #1D1D1F;
	--btn-text: #FFFFFF;
	--glow-a: rgba(110, 160, 255, 0.35);
	--glow-b: rgba(255, 170, 120, 0.3);
	--lit: #2C6BEA; /* Levo's blue: the icon's rim and macOS's blue */
	--round: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
	color-scheme: light;
}
html.dark {
	--bg: #070707;
	--ink: 255 255 255;
	--text: #F0F0F0;
	--muted: #8E8E96;
	--card: rgba(255, 255, 255, 0.03);
	--rim: rgba(255, 255, 255, 0.08);
	--btn: #F0F0F0;
	--btn-text: #070707;
	--glow-a: rgba(40, 96, 220, 0.38);
	--glow-b: rgba(40, 120, 200, 0.3);
	--lit: #6F9CFF;
	color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--round);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
::selection { background: rgba(0, 178, 255, 0.3); }
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid #00B2FF; outline-offset: 2px; border-radius: 8px; }
h1, h2 { margin: 0; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; text-wrap: balance; }
p { margin: 0; }

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 22px;
	border-radius: 13px;
	background: var(--btn);
	color: var(--btn-text);
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	transition: transform .15s, background-color .15s;
}
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(0.97); }
.btn-quiet { background: rgb(var(--ink) / 0.07); color: var(--text); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.06); }
.btn-sm { height: 34px; padding: 0 14px; border-radius: 10px; font-size: 14px; }
.ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }


/* The hand-drawn circle, drawn each time it comes into view. */
.circled { position: relative; white-space: nowrap; }
.circled svg { position: absolute; left: -22px; top: -12px; width: calc(100% + 44px); height: calc(100% + 26px); overflow: visible; pointer-events: none; }
.circled path { fill: none; stroke: var(--lit); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 500; stroke-dashoffset: 500; }
.circled.drawn path { animation: draw .8s ease-in .5s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* The first screen is the Mac. */
.first { position: relative; }
.demo { display: block; }

/* Sections below: shown, not explained. */
.sect { max-width: 1080px; margin: 0 auto; padding: 120px 20px 0; text-align: center; }
.sect h2 { font-size: clamp(40px, 6vw, 64px); }

/* Agents: the CLIs as chips. A click copies the install prompt. */
.chips { list-style: none; margin: 44px auto 0; padding: 0; max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
	height: 44px;
	padding: 0 18px;
	border: 0;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--rim);
	color: var(--text);
	font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
	font-size: 15px;
	cursor: pointer;
	transition: transform .15s, background-color .15s, box-shadow .15s;
}
.chip:hover { background: rgb(var(--ink) / 0.06); box-shadow: inset 0 0 0 1px rgb(var(--ink) / 0.14); }
.chip:active { transform: scale(.97); }
.chip-p { color: #E8833A; font-size: 13px; transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
li:nth-child(3n+2) .chip-p { color: #4FA3F8; }
li:nth-child(3n) .chip-p { color: #3FB0C8; }
.chip:hover .chip-p { transform: translateX(3px); }
.chip-any { background: transparent; box-shadow: none; outline: 1px dashed rgb(var(--ink) / 0.25); outline-offset: -1px; color: var(--muted); }
.toast {
	margin: 26px auto 0;
	width: max-content;
	max-width: calc(100vw - 40px);
	padding: 10px 16px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
	font-size: 15px;
	color: var(--text);
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--rim), 0 16px 40px -20px rgba(0, 0, 0, 0.35);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .25s, transform .3s cubic-bezier(.2, .85, .25, 1);
}
.toast.in { opacity: 1; transform: none; }
.toast b { font-weight: 600; }
.toast-ok { color: #2DB872; flex-shrink: 0; }
.toast-warn { color: #F2AE12; flex-shrink: 0; }

/* Price and Download */
.get { padding-bottom: 20px; }
.get-icon { --u: 2; display: block; margin: 0 auto 22px; width: 128px; height: 128px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.25)); }
.get-icon img { display: block; width: 100%; height: 100%; }

/* The icon dance (the Left app's, as on the omggg home): on hover, once, a crouch, a tilted jump,
   a landing, a small hop and a bouncy settle. Two layers inside the icon: .dance moves and turns
   about the centre, .dance-sq squashes against the floor (its bottom centre). Lengths are px at a
   64 px icon, times --u (the icon's size over 64). levo.js plays it ([data-dance] hosts). */
.dance, .dance-sq { display: block; width: 100%; height: 100%; }
.dance { transform-origin: 50% 50%; }
.dance-sq { transform-origin: 50% 100%; }
.is-dancing .dance { animation: dance .94s both; }
.is-dancing .dance-sq { animation: dance-sq .94s both; }
@keyframes dance {
	0% { transform: translateY(0) rotate(0deg); animation-timing-function: ease-in-out; }
	12.77% { transform: translateY(calc(6px * var(--u, 1))) rotate(0deg); animation-timing-function: ease-in-out; }
	38.3% { transform: translateY(calc(-26px * var(--u, 1))) rotate(-9deg); animation-timing-function: ease-in-out; }
	61.7% { transform: translateY(0) rotate(0deg); animation-timing-function: ease-in-out; }
	78.72% { transform: translateY(calc(-10px * var(--u, 1))) rotate(7deg); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
	100% { transform: translateY(0) rotate(0deg); }
}
@keyframes dance-sq {
	0% { transform: scale(1, 1); animation-timing-function: ease-in-out; }
	12.77% { transform: scale(1.12, 0.82); animation-timing-function: ease-in-out; }
	38.3% { transform: scale(0.94, 1.1); animation-timing-function: ease-in-out; }
	61.7% { transform: scale(1.08, 0.9); animation-timing-function: ease-in-out; }
	78.72% { transform: scale(0.98, 1.04); animation-timing-function: cubic-bezier(.34, 1.56, .64, 1); }
	100% { transform: scale(1, 1); }
}
@media (prefers-reduced-motion: reduce) { .is-dancing .dance, .is-dancing .dance-sq { animation: none; } }
.get .ctas { margin-top: 34px; }
.price { margin-top: 26px; display: inline-flex; align-items: baseline; gap: 34px; }
.price b { font-size: 48px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.price > span:last-child { font-size: 17px; font-weight: 600; color: var(--muted); }

/* Under the price, plain lines from the live feed (levo.js): the early price struck out once its
   spots are gone, how many of this price's spots are claimed, the next price in the accent; then
   the licence. Each line waits, hidden, until the feed has its numbers. */
.tiers { margin: 18px auto 0; max-width: 320px; text-align: center; }
.tiers p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.tiers-early s { text-decoration-thickness: 1.5px; }
.tiers-spots b { font-weight: 600; color: var(--text); }
.tiers-next b { font-weight: 600; color: var(--lit); }
.tiers .tiers-line { margin-top: 12px; font-size: 14px; }

.foot { max-width: 1080px; margin: 110px auto 0; padding: 26px 20px 44px; display: flex; gap: 22px; justify-content: center; border-top: 1px solid var(--rim); font-size: 14px; color: var(--muted); }
.foot a:hover { color: var(--text); }

/* Arrival */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .25, 1); }
.js .rv.in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ Settings (settings.css draws the window) */

.sect[hidden] { display: none !important; }

.settings { max-width: 920px; margin: 0 auto; text-align: left; }

/* ------------------------------------------------------------ Narrow screens */

@media (max-width: 760px) {
	.sect { padding-top: 80px; }
}
@media (max-width: 560px) {
	.ctas .btn { flex: 1; min-width: 0; }
	.get .ctas { max-width: 360px; margin-left: auto; margin-right: auto; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.circled.drawn path { animation: none; stroke-dashoffset: 0; }
	.js .rv { opacity: 1; transform: none; transition: opacity .3s; }
	.btn:hover, .btn:active { transform: none; }
	.lv-sym { animation: none !important; }
}

/* Between pages, the same crossfade as the rest of the site. */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}
}

/* ------------------------------------------------------------ Below the bento (desktop)
 * Agents and the price continue the bento's grid as two full-width tiles, in its
 * tile surface (bento.css: --bt-tile). Markup and behaviour are levo.js's; the
 * phone page (mobile.css) shows its own. */

@media (min-width: 761px) {
	#agents.sect,
	#get.sect {
		position: relative;
		width: calc(100% - 40px);
		max-width: 1100px;
		margin: 16px auto 0;
		border-radius: 26px;
		background: var(--bt-tile);
		box-shadow: inset 0 0 0 1px var(--bt-tile-rim);
	}
	#agents.sect { padding: 22px 24px 76px; text-align: left; }
	#agents h2 { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 20px; }
	#agents .chips { max-width: 880px; margin: 40px auto 0; }
	#agents .toast { position: absolute; left: 50%; bottom: 18px; margin: 0; transform: translate(-50%, 6px); }
	#agents .toast.in { transform: translate(-50%, 0); }

	#get.sect {
		overflow: hidden;
		padding: 80px 24px 72px;
		background:
			radial-gradient(55% 70% at 50% 0%, var(--glow-a) 0%, transparent 70%),
			radial-gradient(45% 60% at 85% 100%, var(--glow-b) 0%, transparent 70%),
			var(--bt-tile);
	}
	#get h2 { font-size: clamp(40px, 5vw, 56px); }
	.foot { margin-top: 64px; }
}

/* ------------------------------------------------------------ The navbar */

.nav { position: sticky; top: 0; z-index: 80; height: 64px; transition: background-color .25s, box-shadow .25s, -webkit-backdrop-filter .25s, backdrop-filter .25s; }
.nav.is-scrolled {
	background: color-mix(in srgb, var(--bg) 72%, transparent);
	-webkit-backdrop-filter: blur(20px) saturate(1.6);
	backdrop-filter: blur(20px) saturate(1.6);
	box-shadow: 0 1px 0 var(--rim);
}
.nav-in { max-width: 1440px; height: 100%; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; gap: 28px; }
.nav-id { display: inline-flex; align-items: center; gap: 14px; }
/* "omggg", home, in the home's own look (home.js's paint(), at navbar size): the rounded heavy
   face, dark and lit from behind, a thin blue rim above-left and an orange one below-right, a
   sheen over its top; in the dark, a light face with brighter rims. */
.nav-omggg { position: relative; isolation: isolate; display: inline-block; font-family: var(--round); font-size: 19px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; padding: 2px 1px 3px; }
.nav-omggg span { color: transparent; -webkit-background-clip: text; background-clip: text;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #26262A, #050506); }
html.dark .nav-omggg span { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #E6E6EA, #9A9AA3); }
/* The rims: the word again behind its face, half a pixel up-left in blue and down-right in orange. */
.nav-omggg::before, .nav-omggg::after { content: "omggg"; position: absolute; inset: 0; z-index: -1; padding: inherit; filter: blur(0.25px); }
.nav-omggg::before { color: rgba(70, 90, 255, 0.6); translate: -0.55px -0.55px; }
.nav-omggg::after { color: rgba(255, 140, 30, 0.6); translate: 0.55px 0.55px; }
html.dark .nav-omggg::before { color: rgba(84, 98, 255, 0.85); }
html.dark .nav-omggg::after { color: rgba(255, 150, 40, 0.8); }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.nav-brand img { display: block; border-radius: 6px; }
.nav-links { display: flex; gap: 24px; margin-left: auto; font-size: 15px; font-weight: 500; color: var(--muted); }
.nav-links a { transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-dl { margin-left: 4px; }

/* The framed Mac sits under the navbar with page margins. */
.first { padding: 4px 24px 0; }
.first .demo { max-width: 1440px; margin: 0 auto; }
/* Until demo.js builds the Mac, its place is kept at the size it will have (demo.css's desk frame:
   16:10, ruled by the viewport's height, capped at 1440 px wide), so nothing below it jumps. The
   desk starts where the demo is 760 px wide (the page's 24 px sides: an 808 px window). */
@media (min-width: 808px) {
	.first .demo:empty { height: min(calc((100vw - 48px) / 1.6), 900px, 90svh, calc(100svh - 184px)); }
}
#agents, #get { scroll-margin-top: 80px; }

@media (max-width: 760px) {
	.nav { height: 56px; }
	.nav-in { padding: 0 16px; }
	.nav-id { gap: 11px; }
	.nav-omggg { font-size: 17px; }
	.nav-links { display: none; }
	.nav-dl { margin-left: auto; }
	.m-bar { display: none !important; }
}
/* The narrowest phones: "omggg" and Levo's icon, so the bar stays one line. */
@media (max-width: 379px) {
	.nav-brand span { display: none; }
}

/* ------------------------------------------------------------ Agents: steps, chips, the copied prompt */

.chip.is-on { box-shadow: inset 0 0 0 1.5px rgb(var(--ink) / 0.35); background: rgb(var(--ink) / 0.06); }
.ag-prompt { max-width: 640px; margin: 22px auto 0; padding: 0; text-align: left; border-radius: 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rim); overflow: hidden; }
.ag-prompt[hidden] { display: none; }
.ag-prompt.in { animation: ag-rise .35s cubic-bezier(.22, 1, .36, 1); }
.ag-prompt figcaption { padding: 10px 16px; font-size: 13px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--rim); }
.ag-prompt pre { margin: 0; padding: 14px 16px 16px; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; color: var(--text); }
@keyframes ag-rise { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .ag-prompt.in { animation: none; } }

/* Clear space between the navbar and the framed Mac. */
.first { padding-top: 104px; }

/* "Just click here": a small "just" over the right half of "click", then "click here", in
   handwriting, turned a little anticlockwise, and an arrow from the end of "here" that runs right
   and curves down to Levo in the simulator's menubar (levo.js draws the arrow
   from the text's measured end and places its tip over the icon). It's tucked behind the Mac's
   window (the demo sits above it) and slides up from behind its top edge with one springy
   overshoot, then stays still; it fades once the visitor has clicked Levo. Less motion: it's
   simply there. */
.first .demo { position: relative; z-index: 1; }
.cue { position: absolute; z-index: 0; top: 0; left: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
/* It waits out the wallpaper's own first transition (0.6 s), unseen, then rises. */
.cue.is-placed { opacity: 1; transition-duration: 0s; animation: cue-pop .75s cubic-bezier(.34, 1.56, .64, 1) .7s both, cue-show 1ms linear .7s both; }
.cue.is-done { opacity: 0; transition-duration: .4s; }
.cue-t { position: absolute; left: 0; top: 0; display: block; font-family: "Bradley Hand", "Marker Felt", "Segoe Print", "Comic Sans MS", cursive; font-weight: 700; letter-spacing: .01em; color: var(--text); white-space: nowrap; transform: rotate(-6deg); transform-origin: 0 calc(100% - 12px); }
.cue-just { display: block; padding-left: 1.75em; font-size: 15px; line-height: 15px; }
.cue-main { display: block; font-size: 22px; line-height: 24px; }
.cue-svg { position: absolute; left: 0; top: 0; display: block; overflow: visible; }
.cue-svg path { fill: none; stroke: var(--text); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* From just under the window's top edge (levo.js sets --cue-rise to the cue's full height). */
@keyframes cue-pop { from { translate: 0 var(--cue-rise, 110px); } to { translate: 0 0; } }
@keyframes cue-show { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cue.is-placed { animation: none; } }
@media (max-width: 760px) { .cue { display: none; } }

/* The page scrolls without a visible scrollbar; scroll areas inside the simulator keep theirs. */
html { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }