/*
 * Levo demo: the fake desktop, the dock, the lock screen and the popover. The
 * popover follows the app's round 5 design (Raycast greys as foreground alpha,
 * one accent, SF Rounded). Light by default; html.dark switches every token.
 * The menubar menus are styled in menus.css.
 */

.lv-scene {
	--fg: 0 0 0;
	--sel: 0 0 0;
	--accent: #138AF2;
	--red: #B12424;
	--red-fill: rgba(177, 36, 36, 0.12);
	--orange: #C75D07;
	--yellow-text: #8A5A00;
	--yellow-fill: rgba(248, 163, 0, 0.16);
	--green: #006B4F;
	--green-fill: rgba(0, 138, 102, 0.12);
	--lv-ready: #008A66;
	--lv-free: rgb(0 0 0 / 0.1);
	--pop-bg: linear-gradient(180deg, #F8F8F8 0%, #F0F0F0 70%);
	--pop-rim: rgba(0, 0, 0, 0.1);
	--panel: #FFFFFF;
	--bar-bg: rgba(0, 0, 0, 0.03);
	--mb-ink: #000;
	--mb-bg: rgba(255, 255, 255, 0.32);
	--glass: rgba(255, 255, 255, 0.58);
	--glass-rim: rgba(255, 255, 255, 0.7);
	--shadow: 0 1px 1px -1px rgba(0,0,0,.05), 0 4px 2px -3px rgba(0,0,0,.05), 0 8px 4px -6px rgba(0,0,0,.05), 0 12px 40px -12px rgba(0,0,0,.12), 0 24px 64px -24px rgba(0,0,0,.22);
	--rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--ease-out: cubic-bezier(.2, .85, .25, 1);
	--spring: cubic-bezier(.34, 1.56, .64, 1);

	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh;
	min-height: 700px;
	overflow: hidden;
	color: rgb(var(--fg));
	font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	user-select: none;
	text-align: left;
	isolation: isolate;
	touch-action: manipulation;
}
html.dark .lv-scene {
	--fg: 255 255 255;
	--sel: 255 255 255;
	--accent: #4FA3F8;
	--red: #FF6363;
	--red-fill: rgba(255, 99, 99, 0.15);
	--orange: #FF9217;
	--yellow-text: #FFC531;
	--yellow-fill: rgba(255, 197, 49, 0.15);
	--green: #59D499;
	--green-fill: rgba(89, 212, 153, 0.15);
	--lv-ready: #59D499;
	--lv-free: rgb(255 255 255 / 0.1);
	--pop-bg: linear-gradient(180deg, #232323 0%, #1B1B1B 70%);
	--pop-rim: rgba(255, 255, 255, 0.12);
	--panel: #2A2A2A;
	--bar-bg: rgba(255, 255, 255, 0.05);
	--mb-ink: #fff;
	--mb-bg: rgba(0, 0, 0, 0.22);
	--glass: rgba(34, 34, 38, 0.52);
	--glass-rim: rgba(255, 255, 255, 0.1);
	--shadow: 0 0 0 1px rgba(255,255,255,.1), 0 1px 1px -1px rgba(0,0,0,.2), 0 12px 40px -12px rgba(0,0,0,.5), 0 24px 64px -24px rgba(0,0,0,.6);
}

.lv-scene button { font: inherit; color: inherit; margin: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.lv-scene button:focus { outline: none; }
.lv-scene button:focus-visible { outline: 2px solid rgb(var(--fg) / 0.3); outline-offset: 1px; }
.lv-sym { display: block; flex-shrink: 0; overflow: visible; }
.lv-sec { color: rgb(var(--fg) / 0.6); }
.lv-num { font-variant-numeric: tabular-nums; }
.lv-flex { flex: 1; min-width: 4px; }

/* ------------------------------------------------------------ Desktop */

.lv-wall {
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(60% 55% at 78% 18%, rgba(255, 196, 160, 0.9) 0%, rgba(255, 196, 160, 0) 70%),
		radial-gradient(55% 60% at 12% 88%, rgba(150, 190, 255, 0.95) 0%, rgba(150, 190, 255, 0) 70%),
		radial-gradient(45% 45% at 48% 60%, rgba(182, 212, 255, 0.85) 0%, rgba(182, 212, 255, 0) 70%),
		radial-gradient(40% 40% at 95% 85%, rgba(160, 228, 220, 0.8) 0%, rgba(160, 228, 220, 0) 70%),
		linear-gradient(160deg, #EEF1F8, #F6EEEA);
	transition: filter .6s var(--ease-out), transform .6s var(--ease-out);
}
html.dark .lv-wall {
	background:
		radial-gradient(60% 55% at 78% 18%, rgba(36, 84, 196, 0.75) 0%, rgba(36, 84, 196, 0) 70%),
		radial-gradient(55% 60% at 12% 88%, rgba(28, 98, 160, 0.8) 0%, rgba(28, 98, 160, 0) 70%),
		radial-gradient(45% 45% at 50% 62%, rgba(22, 62, 130, 0.5) 0%, rgba(22, 62, 130, 0) 70%),
		radial-gradient(40% 40% at 95% 88%, rgba(20, 120, 120, 0.55) 0%, rgba(20, 120, 120, 0) 70%),
		linear-gradient(160deg, #0A0E1A, #0B1220);
}

.lv-menubar {
	position: relative;
	z-index: 8;
	height: 30px;
	padding: 0 8px 0 10px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: var(--mb-ink);
	background: var(--mb-bg);
	-webkit-backdrop-filter: blur(30px) saturate(1.6);
	backdrop-filter: blur(30px) saturate(1.6);
	font-size: 13.5px;
	white-space: nowrap;
	transition: transform .4s var(--ease-out) .1s, opacity .4s;
}
.lv-mb-left, .lv-mb-right { display: flex; align-items: center; gap: 0; transition: opacity .3s; }
.lv-mb-btn {
	height: 22px;
	padding: 0 9px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13.5px !important;
}
.lv-mb-app { font-weight: 700 !important; }
.lv-mb-apple { padding: 0 11px; }
.lv-mb-apple .lv-sym { margin-top: -2px; }
.lv-mb-levo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 22px;
	padding: 0 8px;
	margin-right: 2px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	touch-action: none;
	transition: background-color .15s, opacity .25s, transform .25s;
}
.lv-mb-levo:hover, .lv-mb-levo.is-open { background: rgb(var(--fg) / 0.12); }
html.dark .lv-mb-levo:hover, html.dark .lv-mb-levo.is-open { background: rgba(255, 255, 255, 0.2); }
.lv-mb-levo.is-gone { opacity: 0; transform: scale(.3); pointer-events: none; }
.lv-mb-levo.is-back { animation: lv-popin .5s var(--spring); }
.lv-mb-levo.is-dragging { transition: none; position: relative; z-index: 50; background: rgb(var(--fg) / 0.12); }
.lv-mb-levo.is-out { opacity: .45; }
.lv-mb-levo.is-snap { transition: transform .5s cubic-bezier(.2, 1.5, .4, 1); }
.lv-mark { display: block; flex-shrink: 0; }
/* 17 pt wide, as the app's menubar mark since round 14. */
.lv-mb-mark { width: 17px; height: 10.87px; overflow: visible; }
.lv-mb-mark path { fill: none; stroke: currentColor; stroke-width: 1.5px; transition: fill .3s; }
.lv-mb-levo[data-state="ready"] .lv-mb-mark path,
.lv-mb-levo[data-state="alert"] .lv-mb-mark path { fill: currentColor; stroke: none; }
.lv-mb-num { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 13px; font-family: var(--rounded); }
.lv-mb-num:empty { display: none; }
.lv-mb-item { padding: 0 7px; }
.lv-mb-btn[hidden] { display: none; }
.lv-mb-pct { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.lv-mb-pct:empty { display: none; }
.lv-batt { display: flex; align-items: center; }
.lv-mb-clock { gap: 7px; padding-left: 8px; font-variant-numeric: tabular-nums; }

.lv-widgets { position: absolute; z-index: 1; left: 24px; top: 52px; display: grid; grid-template-columns: 164px 164px; gap: 16px; transition: opacity .5s, transform .5s var(--ease-out); }
.lv-widget {
	height: 164px;
	box-sizing: border-box;
	padding: 16px;
	border-radius: 24px;
	background: var(--glass);
	box-shadow: inset 0 0 0 0.5px var(--glass-rim), 0 10px 30px -12px rgba(0, 0, 0, 0.25);
	-webkit-backdrop-filter: blur(40px) saturate(1.8);
	backdrop-filter: blur(40px) saturate(1.8);
	display: flex;
	flex-direction: column;
}
.lv-w-city { font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-w-time { margin-top: 4px; font-size: 38px; font-weight: 600; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; font-family: var(--rounded); white-space: nowrap; }
.lv-w-date { margin-top: auto; font-size: 12.5px; color: rgb(var(--fg) / 0.6); line-height: 1.3; }
.lv-w-ring { position: relative; width: 64px; height: 64px; }
.lv-w-ring > svg { width: 64px; height: 64px; transform: rotate(-90deg); display: block; }
.lv-ring-bg, .lv-ring-fg { fill: none; stroke-width: 6; }
.lv-ring-bg { stroke: rgb(var(--fg) / 0.1); }
.lv-ring-fg { stroke: #30D158; stroke-linecap: round; stroke-dasharray: 169.6; transition: stroke-dashoffset .6s; }
.lv-w-ringglyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgb(var(--fg) / 0.75); }
.lv-w-dev { margin-top: auto; font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.6); }
.lv-w-level { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; font-family: var(--rounded); }
.lv-w-level:empty { display: none; }

/* Desktop icons, a slightly messy Mac. */
.lv-icons { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lv-ic {
	position: absolute;
	width: 92px;
	padding: 0;
	border: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	pointer-events: auto;
	transition: transform .5s var(--ease-out), opacity .4s;
}
.lv-ic-name {
	max-width: 92px;
	padding: 1px 4px;
	border-radius: 4px;
	font-size: 11.5px;
	line-height: 1.2;
	text-align: center;
	color: #1d1d1f;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.9);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	word-break: break-word;
}
html.dark .lv-ic-name { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }
.lv-ic.is-sel .lv-ic-name { background: var(--accent); color: #fff; text-shadow: none; }
.lv-ic.is-sel > span:first-child { filter: brightness(.82); }
.lv-ic.is-gone { opacity: 0; transform: translate(var(--tx, 260px), var(--ty, 240px)) scale(.15); pointer-events: none; transition: transform .6s cubic-bezier(.5, 0, .75, 0), opacity .5s .1s; }
.lv-ic-shot { margin: 9px 0 7px; width: 68px; height: 42.5px; box-sizing: border-box; padding: 1.5px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 2px 5px rgba(0, 0, 0, 0.25); }
.lv-ic-shot i { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 1px; background: radial-gradient(70% 90% at 82% 18%, #FFC4A0 0%, rgba(255, 196, 160, 0) 70%), radial-gradient(70% 90% at 12% 92%, #96BEFF 0%, rgba(150, 190, 255, 0) 70%), linear-gradient(160deg, #E9EDF7, #F4EAE6); }
.lv-ic-shot i::before { content: ""; position: absolute; left: 22%; top: 20%; width: 56%; height: 62%; border-radius: 2.5px; background: linear-gradient(#F4F4F5 0 22%, #FFFFFF 22%); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 0 0.3px rgba(0, 0, 0, 0.2); }
.lv-ic-shot i::after { content: ""; position: absolute; left: calc(22% + 3px); top: calc(20% + 2.2px); width: 2.2px; height: 2.2px; border-radius: 50%; background: #FF5F57; box-shadow: 3.2px 0 0 #FEBC2E, 6.4px 0 0 #28C840; }

/* The dock: the company's own apps, Levo, a Finder-like and a Trash-like tile. */
.lv-dock {
	position: absolute;
	z-index: 4;
	/* Centred by margins, not a transform, so its labels stay on whole pixels. */
	left: 0;
	right: 0;
	width: max-content;
	margin: 0 auto;
	bottom: 8px;
	height: 66px;
	padding: 0 7px;
	display: flex;
	align-items: flex-end;
	gap: 2px;
	transition: transform .45s var(--ease-out), opacity .35s;
}
.lv-dock-shelf {
	position: absolute;
	inset: 0;
	border-radius: 22px;
	background: var(--glass);
	box-shadow: inset 0 0 0 0.5px var(--glass-rim), inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px -10px rgba(0, 0, 0, 0.3);
	-webkit-backdrop-filter: blur(30px) saturate(1.8);
	backdrop-filter: blur(30px) saturate(1.8);
}
.lv-dock-sep { position: relative; width: 1px; height: 46px; margin: 0 6px 10px; background: rgb(var(--fg) / 0.18); }
.lv-dk {
	--u: 0.8125; /* the icon dance's lengths are px at 64: these are 52 */
	position: relative;
	padding: 0 0 7px;
	border: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	align-items: center;
	touch-action: none;
}
.lv-dk-lift { display: block; }
.lv-dk-art {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	transition: filter .1s;
}
.lv-dk:active .lv-dk-art { filter: brightness(.75); }
.lv-dk-art img { width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.lv-dk-label {
	position: absolute;
	bottom: calc(100% + 6px);
	left: -120px;
	right: -120px;
	width: max-content;
	margin: 0 auto;
	transform: scale(.9);
	transform-origin: 50% 100%;
	padding: 4px 10px;
	border-radius: 7px;
	background: rgba(30, 30, 32, 0.78);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: #fff;
	font-size: 12.5px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
html:not(.dark) .lv-dk-label { background: rgba(246, 246, 246, 0.9); color: #1d1d1f; box-shadow: 0 0 0 0.5px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.12); }
.lv-dk:hover .lv-dk-label { opacity: 1; transform: none; }
.lv-dk.is-dragging .lv-dk-label { opacity: 0; }
.lv-dk-dot { position: absolute; bottom: 1px; width: 4px; height: 4px; border-radius: 50%; background: rgb(var(--fg) / 0.7); opacity: 0; transition: opacity .3s; }
.lv-dk.is-running .lv-dk-dot { opacity: 1; }
.lv-dk.is-bounce .lv-dk-lift { animation: lv-bounce 1.4s cubic-bezier(.3, .6, .4, 1); }
.lv-dk.is-bump .lv-dk-lift { animation: lv-bump .45s var(--spring); }
.lv-dk.is-dragging { transition: none; z-index: 20; }
.lv-dk.is-dragging .lv-dk-art { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.lv-dk.is-snap { transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.lv-dk.is-target .lv-dk-art { transform: scale(1.12); filter: brightness(1.1); }
	position: absolute;
	inset: 4% 6% 0;
	border-radius: 10% 10% 22% 22% / 6% 6% 12% 12%;
	background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.55) 0 2px, rgba(255, 255, 255, 0.12) 2px 7px), linear-gradient(180deg, rgba(220, 228, 240, 0.75), rgba(170, 182, 200, 0.75));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 -6px 10px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.18);
	z-index: 1;
}

.lv-quip { position: absolute; z-index: 45; transform: translateX(-50%); padding: 5px 10px; border-radius: 8px; background: var(--panel); box-shadow: var(--shadow); font-family: var(--rounded); font-size: 12.5px; font-weight: 500; white-space: nowrap; pointer-events: none; animation: lv-in .3s var(--ease-out); }
.lv-quip[hidden] { display: none; }

/* The notification, from the top right. */
.lv-note {
	position: absolute;
	z-index: 9;
	top: 40px;
	right: 12px;
	width: 352px;
	box-sizing: border-box;
	padding: 12px 14px 12px 12px;
	display: flex;
	align-items: center;
	gap: 11px;
	border: 0;
	border-radius: 22px;
	text-align: left;
	background: var(--glass);
	box-shadow: inset 0 0 0 0.5px var(--glass-rim), 0 18px 40px -14px rgba(0, 0, 0, 0.35);
	-webkit-backdrop-filter: blur(40px) saturate(1.8);
	backdrop-filter: blur(40px) saturate(1.8);
	transform: translateX(calc(100% + 24px));
	opacity: 0;
	visibility: hidden;
	transition: transform .55s var(--ease-out), opacity .3s, visibility 0s .55s;
}
.lv-note.is-in { transform: none; opacity: 1; visibility: visible; transition: transform .55s var(--ease-out), opacity .3s, visibility 0s; }
.lv-note:hover { background: rgba(255, 255, 255, 0.72); }
html.dark .lv-note:hover { background: rgba(48, 48, 52, 0.62); }
.lv-note-icon { width: 38px; height: 38px; flex-shrink: 0; display: block; }
.lv-note-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 13px; }
.lv-note-top { display: flex; align-items: baseline; gap: 8px; }
.lv-note-top b { font-weight: 600; flex: 1; }
.lv-note-when { font-size: 12px; color: rgb(var(--fg) / 0.55); }

/* The lock screen: the visitor's own date and time. A click, a key or a moment unlocks it. */
.lv-lock {
	position: absolute;
	inset: 0;
	z-index: 7;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 92px;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.12);
	background: rgba(20, 20, 40, 0.12);
	-webkit-backdrop-filter: blur(22px) saturate(1.4);
	backdrop-filter: blur(22px) saturate(1.4);
	cursor: pointer;
	transition: opacity .45s ease, transform .6s var(--ease-out), visibility 0s .6s;
}
html:not(.dark) .lv-lock { color: #fff; background: rgba(60, 70, 110, 0.18); }
.lv-lock-date { font-family: var(--rounded); font-size: 22px; font-weight: 600; opacity: .9; }
.lv-lock-time { font-family: var(--rounded); font-size: 124px; font-weight: 700; letter-spacing: -2px; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.lv-lock-who { margin-top: auto; margin-bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.lv-lock-who > span:last-child { background: linear-gradient(90deg, rgba(255,255,255,.55) 0%, #fff 50%, rgba(255,255,255,.55) 100%); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lv-shine 2.4s linear infinite; }
.lv-lock-avatar { width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); display: flex; align-items: center; justify-content: center; }
.lv-scene:not(.is-locked) .lv-lock { opacity: 0; visibility: hidden; transform: scale(1.06); pointer-events: none; }
.is-locked .lv-wall { filter: saturate(1.1); }
.is-locked .lv-mb-left, .is-locked .lv-mb-levo, .is-locked .lv-mb-clock { opacity: 0; pointer-events: none; }
.is-locked .lv-dock { transform: translateY(110px); opacity: 0; }
.is-locked .lv-widgets, .is-locked .lv-icons { opacity: 0; transform: translateY(10px); }
.lv-icons { transition: opacity .5s .15s, transform .5s var(--ease-out) .15s; }
.is-unlocking .lv-widgets { transition-delay: .1s; }

/* ------------------------------------------------------------ Popover */

.lv-popwrap { position: absolute; z-index: 5; top: 36px; left: 800px; width: 360px; }
/* Closed, the popover's empty box lets clicks through to windows under it. */
.lv-popwrap { pointer-events: none; }
.is-open .lv-popwrap { pointer-events: auto; }
.lv-pop {
	position: relative;
	width: 360px;
	max-height: calc(100svh - 136px);
	display: flex;
	flex-direction: column;
	border-radius: 18px;
	background: var(--pop-bg);
	box-shadow: inset 0 0 0 1px var(--pop-rim), 0 28px 70px -18px rgba(0, 0, 0, 0.45), 0 8px 24px -10px rgba(0, 0, 0, 0.25);
	overflow: hidden;
	outline: none;
	font-family: var(--rounded);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px) scale(0.985);
	transform-origin: 50% 0;
	transition: opacity .2s, transform .25s var(--ease-out), visibility 0s .25s;
}
.is-open .lv-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .2s, transform .3s var(--ease-out), visibility 0s; }
.lv-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.lv-scroll::-webkit-scrollbar { display: none; }

.lv-disk { padding: 14px 16px 14px; }
.lv-dhead { display: flex; align-items: center; gap: 8px; }
.lv-dhead b { font-weight: 500; }
.lv-hero { display: flex; align-items: baseline; gap: 6px; margin-top: 8px; }
.lv-free { font-size: 24px; font-weight: 600; letter-spacing: -0.3px; }
.lv-can { font-size: 13px; font-weight: 600; color: var(--lv-ready); white-space: nowrap; }

.lv-dbar { position: relative; margin-top: 12px; }
.lv-ticks { display: flex; gap: 2px; }
.lv-tick {
	flex: 1;
	height: 18px;
	border-radius: 1px;
	background-color: var(--lv-free);
	transition: background-color .45s, opacity .15s;
}
.lv-tick[data-seg="free"] { background-color: var(--lv-free) !important; }
.lv-tick.is-dim { opacity: .4; }
.lv-tip {
	position: absolute;
	bottom: calc(100% + 6px);
	padding: 5px 8px;
	border-radius: 8px;
	background: var(--panel);
	box-shadow: var(--shadow);
	font-size: 12px;
	white-space: nowrap;
	pointer-events: none;
	z-index: 3;
}
.lv-tip b { font-weight: 600; margin-right: 4px; }

.lv-sep { height: 1px; background: rgb(var(--fg) / 0.1); flex-shrink: 0; }
.lv-sep-in { margin: 8px 16px 2px; }

.lv-gauges { display: flex; padding: 12px 8px 10px; }
.lv-gauge { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lv-gauge + .lv-gauge { border-left: 1px solid rgb(var(--fg) / 0.1); }
.lv-dial { position: relative; width: 58px; height: 58px; }
.lv-dial svg { display: block; width: 58px; height: 58px; }
.lv-dial line { stroke: rgb(var(--fg) / 0.1); stroke-width: 2; stroke-linecap: round; transition: stroke .45s; }

.lv-dial-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.lv-dial-num small { font-size: 10px; color: rgb(var(--fg) / 0.6); margin-left: 1px; font-weight: 600; }
.lv-dial-spin { position: absolute; right: 2px; bottom: 2px; }
.lv-dial-spin[hidden] { display: none; }
.lv-g-label { margin-top: 2px; height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: transparent; font-size: 12px !important; font-weight: 500 !important; color: rgb(var(--fg) / 0.85) !important; white-space: nowrap; }
.lv-g-label::before { content: attr(data-label); }
.lv-g-label:hover, .lv-g-label:focus-visible { color: rgb(var(--fg)) !important; background: rgb(var(--fg) / 0.08); }
.lv-g-label:hover::before, .lv-g-label:focus-visible::before { content: attr(data-hover); }
.lv-freed { display: flex; align-items: center; gap: 6px; padding: 0 16px 10px; font-size: 12px; animation: lv-in .25s var(--ease-out); }
.lv-freed[hidden] { display: none; }
.lv-freed > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-good { color: var(--green); }
.lv-warn { color: var(--yellow-text); }
.lv-x { width: 18px; height: 18px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: rgb(var(--fg) / 0.6) !important; display: inline-flex; align-items: center; justify-content: center; }
.lv-x:hover { background: rgb(var(--fg) / 0.08); }

.lv-sh { display: flex; align-items: center; justify-content: space-between; height: 24px; margin: 10px 16px 4px; font-size: 12px; font-weight: 500; color: rgb(var(--fg) / 0.6); }
.lv-sh-r { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 400; }
.lv-sh-note { display: inline-flex; align-items: center; gap: 6px; }
.lv-dd {
	height: 22px;
	padding: 0 6px 0 8px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	font-size: 12px !important;
	font-weight: 500 !important;
	color: rgb(var(--fg)) !important;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.lv-dd:hover { background: rgb(var(--fg) / 0.08); }
.lv-seg { display: inline-flex; height: 24px; padding: 2px; box-sizing: border-box; border-radius: 8px; background: rgb(var(--fg) / 0.05); }
.lv-seg button { height: 20px; padding: 0 9px; border: 0; border-radius: 6px; background: transparent; font-size: 12px !important; font-weight: 500 !important; color: rgb(var(--fg) / 0.6) !important; }
.lv-seg button.is-on { background: rgb(var(--fg) / 0.1); color: rgb(var(--fg)) !important; }
html:not(.dark) .lv-seg button.is-on { background: #fff; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.1); }

.lv-row {
	height: 38px;
	margin: 0 8px;
	padding: 0 8px;
	box-sizing: border-box;
	border-radius: 10px;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	transition: background-color .12s, height .35s, opacity .3s, transform .35s;
}
.lv-grow { height: 44px; }
.lv-row:hover { background: rgb(var(--sel) / 0.05); }
.lv-row.is-sel { background: rgb(var(--sel) / 0.1); }
.lv-row.is-going { height: 0; opacity: 0; transform: translateX(14px); }
.lv-row.is-new { animation: lv-grow .5s var(--ease-out) backwards; }
.lv-gtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lv-title { font-size: 13px; flex-shrink: 0; }
.lv-gtext .lv-title { overflow: hidden; text-overflow: ellipsis; }
.lv-subt { font-size: 11px; color: rgb(var(--fg) / 0.6); overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.lv-size { font-size: 13px; color: rgb(var(--fg) / 0.8); text-align: right; min-width: 46px; flex-shrink: 0; }
.lv-pval { min-width: 46px; }
.lv-note-red { color: var(--red); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lv-chev { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: rgb(var(--fg) / 0.6); flex-shrink: 0; margin-left: -2px; transition: transform .18s var(--ease-out); }
.lv-grow.is-open .lv-chev { transform: rotate(90deg); }
.lv-chev-gap { width: 14px; flex-shrink: 0; }
.lv-more { height: 32px; padding-left: 58px; color: rgb(var(--fg) / 0.6); }

.lv-cb {
	width: 14px;
	height: 14px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.2);
	color: rgb(var(--fg) / 0.8) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.lv-cb:hover { box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.4); }
.lv-cb .lv-sym { animation: lv-check .22s var(--spring); }
.lv-tile {
	width: 20px;
	height: 20px;
	border-radius: 5px;
	background: linear-gradient(180deg, var(--t1), var(--t2));
	box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.lv-tile-lg { width: 28px; height: 28px; border-radius: 7px; }
.lv-tag {
	height: 20px;
	padding: 0 6px;
	border: 0;
	border-radius: 6px;
	background: rgb(var(--fg) / 0.1);
	color: rgb(var(--fg));
	display: inline-flex;
	align-items: center;
	font-size: 12px !important;
	font-weight: 500 !important;
	white-space: nowrap;
	flex-shrink: 0;
}
.lv-tag-yellow { background: var(--yellow-fill); color: var(--yellow-text) !important; }
.lv-tag-red { background: var(--red-fill); color: var(--red) !important; }
button.lv-tag-red:hover { background: rgba(255, 99, 99, 0.26); }
.lv-info { width: 18px; height: 18px; padding: 0; margin: 0 -4px 0 -2px; border: 0; border-radius: 5px; background: transparent; color: rgb(var(--fg) / 0.45) !important; display: none; align-items: center; justify-content: center; flex-shrink: 0; }
.lv-grow:hover .lv-info, .lv-info.is-on { display: inline-flex; }
.lv-info:hover { color: rgb(var(--fg) / 0.85) !important; background: rgb(var(--fg) / 0.08); }
.lv-info.is-on { color: var(--accent) !important; }

.lv-items { padding: 2px 0 4px; transition: opacity .25s; }
.lv-irow { height: 28px; padding-left: 36px; }
.lv-iname { font-size: 13px; color: rgb(var(--fg) / 0.85); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lv-irow .lv-size { font-size: 12px; color: rgb(var(--fg) / 0.6); }
.lv-detail { margin: 4px 16px 8px; padding: 2px 12px; border-radius: 12px; background: rgb(var(--fg) / 0.03); box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.08); font-size: 12.5px; transition: opacity .25s; }
.lv-drow { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; white-space: nowrap; }
.lv-drow + .lv-drow { border-top: 1px solid rgb(var(--fg) / 0.06); }
.lv-drow > span:first-child { color: rgb(var(--fg) / 0.6); }
.lv-drow > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.is-going.lv-items, .is-going.lv-detail { opacity: 0; }
.lv-empty { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 38px; padding: 0 16px 0 24px; color: rgb(var(--fg) / 0.6); }
.lv-link { padding: 3px 8px; border: 0; border-radius: 6px; background: rgb(var(--fg) / 0.08); color: rgb(var(--fg)) !important; font-size: 12px !important; font-weight: 500 !important; }
.lv-link:hover { background: rgb(var(--fg) / 0.14); }

/* Action bar */
.lv-actions { position: relative; z-index: 2; height: 40px; padding: 0 10px 0 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid rgb(var(--fg) / 0.1); background: var(--bar-bg); }
.lv-act-left { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; overflow: hidden; font-size: 12px; color: rgb(var(--fg) / 0.6); }
.lv-checked { white-space: nowrap; }
.lv-act-right { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.lv-primary, .lv-kbtn { height: 28px; padding: 0 6px; border: 0; border-radius: 7px; background: transparent; display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap; }
.lv-primary:hover:not(:disabled), .lv-kbtn:hover { background: rgb(var(--fg) / 0.06); }
.lv-primary:disabled { cursor: default; color: rgb(var(--fg) / 0.45) !important; }
.lv-primary:disabled .lv-cap { opacity: .6; }
.lv-caps { display: inline-flex; gap: 2px; flex-shrink: 0; }
.lv-cap { min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box; border-radius: 6px; background: rgb(var(--fg) / 0.1); color: rgb(var(--fg)); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; line-height: 1; font-family: -apple-system, system-ui, sans-serif; }
.lv-cap-sm { min-width: 18px; height: 18px; border-radius: 5px; font-size: 11px; color: rgb(var(--fg) / 0.75); }

.lv-toast { display: inline-flex; align-items: center; gap: 7px; min-width: 0; animation: lv-in .3s var(--ease-out); }
.lv-toast b { font-weight: 600; color: rgb(var(--fg)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lv-toast-sym { color: var(--green); }
.lv-toast-info .lv-toast-sym { color: rgb(var(--fg) / 0.5); }
.lv-toast-btn { height: 22px; padding: 0 8px; border: 0; border-radius: 6px; background: rgb(var(--fg) / 0.1); font-size: 12px !important; font-weight: 500 !important; }
.lv-toast-btn:hover { background: rgb(var(--fg) / 0.16); }
.lv-spin { display: inline-block; width: 9px; height: 9px; border-radius: 50%; border: 2px solid rgb(var(--fg) / 0.15); border-top-color: rgb(var(--fg) / 0.8); animation: lv-spin .8s linear infinite; flex-shrink: 0; }

/* The \2318K panel */
.lv-panel {
	position: absolute;
	z-index: 10;
	right: 8px;
	bottom: 46px;
	width: 292px;
	max-height: calc(100% - 70px);
	display: flex;
	flex-direction: column;
	border-radius: 12px;
	background: var(--panel);
	box-shadow: var(--shadow);
	overflow: hidden;
	animation: lv-up .18s var(--ease-out);
}
.lv-panel[hidden], .lv-menu[hidden], .lv-sheet[hidden] { display: none; }
.lv-ph { display: flex; align-items: center; gap: 6px; padding: 10px 14px 6px; font-size: 12px; font-weight: 500; color: rgb(var(--fg) / 0.6); }
.lv-back { width: 18px; height: 18px; padding: 0; margin-left: -4px; border: 0; border-radius: 5px; background: rgb(var(--fg) / 0.08); display: inline-flex; align-items: center; justify-content: center; }
.lv-pitems { padding: 0 6px; overflow-y: auto; scrollbar-width: none; }
.lv-pitem { width: 100%; height: 34px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; gap: 10px; text-align: left; font-size: 13px; white-space: nowrap; }
.lv-pitem:hover { background: rgb(var(--fg) / 0.05); }
.lv-pitem.is-sel { background: rgb(var(--fg) / 0.1); }
.lv-pitem.is-red { color: var(--red) !important; }
.lv-pi-icon { width: 18px; height: 16px; display: flex; align-items: center; justify-content: center; color: rgb(var(--fg) / 0.8); }
.lv-pitem.is-red .lv-pi-icon { color: var(--red); }
.lv-psep { height: 1px; margin: 4px -6px; background: rgb(var(--fg) / 0.1); }
.lv-pnone { padding: 8px 10px 10px; color: rgb(var(--fg) / 0.6); }
.lv-psearch { margin-top: 6px; border-top: 1px solid rgb(var(--fg) / 0.1); }
.lv-psearch input { width: 100%; height: 40px; box-sizing: border-box; padding: 0 14px; border: 0; outline: 0; background: transparent; color: rgb(var(--fg)); font: inherit; font-size: 13px; -webkit-user-select: text; user-select: text; }
.lv-psearch input::placeholder { color: rgb(var(--fg) / 0.5); }

.lv-menu { position: absolute; z-index: 10; right: 16px; width: 150px; padding: 5px; border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); animation: lv-in .15s; }
.lv-mitem { width: 100%; height: 24px; padding: 0 8px 0 4px; border: 0; border-radius: 6px; background: transparent; display: flex; align-items: center; gap: 4px; font-size: 13px; text-align: left; }
.lv-mitem:hover { background: var(--accent); color: #fff !important; }
.lv-mcheck { width: 16px; display: inline-flex; justify-content: center; }
.lv-mitem[disabled] { opacity: .4; cursor: default; }
.lv-mitem[disabled]:hover { background: transparent; color: inherit !important; }
.lv-msub { position: relative; }
.lv-menu-side { display: none; top: -5px; right: calc(100% + 2px); }
.lv-msub:hover > .lv-menu-side, .lv-msub.is-open > .lv-menu-side { display: block; }
.lv-msub:hover > .lv-mitem, .lv-msub.is-open > .lv-mitem { background: var(--accent); color: #fff !important; }
.lv-msep { height: 1px; margin: 4px 6px; background: rgb(var(--fg) / 0.1); }

/* Confirm, inside the popover */
.lv-sheet { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.16); animation: lv-fade .2s; }
html.dark .lv-sheet { background: rgba(0, 0, 0, 0.4); }
.lv-sheet-card { width: 272px; padding: 20px 18px 16px; box-sizing: border-box; border-radius: 16px; background: var(--panel); box-shadow: var(--shadow); text-align: center; animation: lv-pop .26s var(--ease-out); }
.lv-sheet-card img { display: block; width: 44px; height: 44px; margin: 0 auto; }
.lv-sheet-card b { display: block; margin: 10px 0 4px; font-size: 14px; font-weight: 600; }
.lv-sheet-card p { margin: 0 0 16px; font-size: 12.5px; line-height: 1.4; color: rgb(var(--fg) / 0.6); }
.lv-sheet-btns { display: flex; gap: 8px; }
.lv-btn { flex: 1; height: 30px; border: 0; border-radius: 8px; background: rgb(var(--fg) / 0.1); font-size: 13px !important; font-weight: 500 !important; }
.lv-btn:hover { background: rgb(var(--fg) / 0.15); }
.lv-btn-primary { background: var(--accent); color: #fff !important; }
.lv-btn-primary:hover { background: var(--accent); filter: brightness(1.08); }

@keyframes lv-in { from { opacity: 0; transform: translateY(2px); } }
@keyframes lv-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes lv-fade { from { opacity: 0; } }
@keyframes lv-pop { from { opacity: 0; transform: scale(.94); } }
@keyframes lv-spin { to { transform: rotate(360deg); } }
@keyframes lv-popin { 0% { opacity: 0; transform: scale(.3); } 60% { opacity: 1; transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes lv-check { from { transform: scale(.4); opacity: 0; } }
@keyframes lv-grow { from { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes lv-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes lv-bounce {
	0%, 100% { transform: none; }
	18% { transform: translateY(-26px); }
	36% { transform: none; }
	54% { transform: translateY(-16px); }
	72% { transform: none; }
}
@keyframes lv-bump { 0% { transform: none; } 40% { transform: scale(1.12) translateY(-4px); } 100% { transform: none; } }

/* ------------------------------------------------------------ The Levo window */

.lv-lwin {
	position: absolute;
	z-index: 3;
	left: 420px;
	top: 160px;
	width: 400px;
	border-radius: 22px;
	background: var(--panel);
	box-shadow: inset 0 0 0 0.5px rgb(var(--fg) / 0.12), 0 30px 80px -24px rgba(0, 0, 0, 0.45), 0 10px 24px -12px rgba(0, 0, 0, 0.25);
	font-family: var(--rounded);
}
html.dark .lv-lwin { background: #262628; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 30px 80px -24px rgba(0, 0, 0, 0.7), 0 10px 24px -12px rgba(0, 0, 0, 0.5); }
.lv-lwin-bar { position: relative; height: 44px; display: flex; align-items: center; justify-content: center; cursor: default; touch-action: none; }
.lv-lwin-bar b { font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.85); }
.lv-lights { position: absolute; left: 18px; top: 16px; display: flex; gap: 8px; }
.lv-lwin-body { height: 196px; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; }
.lv-lwin-app, .lv-lwin-apps { width: 112px; padding: 0; border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; touch-action: none; }
/* A real DMG window: both icons at one size (96 pt), macOS's own renders with their own margins. */
.lv-lwin-ic { display: block; width: 96px; height: 96px; }
.lv-lwin-ic img { width: 96px; height: 96px; -webkit-user-drag: none; }
.lv-lwin-app img { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.18)); }
.lv-lwin-app.is-dragging { cursor: grabbing; opacity: .45; }
/* The drag image: above everything, under the pointer, a little translucent, as Finder's. */
.lv-drag-ghost { position: fixed; left: 0; top: 0; z-index: 10000; pointer-events: none; opacity: .8; transform-origin: 0 0; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .25)); will-change: transform; }
.lv-drag-ghost.is-back, .lv-drag-ghost.is-in { transition: transform .25s cubic-bezier(.2, .8, .3, 1), opacity .25s; }
.lv-drag-ghost.is-in { opacity: 0; }
.lv-lwin-app.is-snap { transition: transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.lv-lwin-arrow { width: 64px; height: 20px; flex-shrink: 0; overflow: visible; }
.lv-lwin-arrow path { fill: none; stroke: rgb(var(--fg) / 0.28); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 9; }
.lv-lwin-arrow path + path { stroke-dasharray: none; }
/* macOS's own Applications folder (img/desk/applications.webp). */
.lv-lwin-folder { display: block; transition: transform .2s var(--spring); }
.lv-lwin-apps.is-target .lv-lwin-folder { transform: scale(1.1); filter: brightness(1.08); }
.lv-lwin-foot { height: 60px; padding: 0 14px 0 22px; display: flex; align-items: center; gap: 8px; border-top: 1px solid rgb(var(--fg) / 0.08); }
/* The price card in small (levo.js draws it): the price rolling in, the next price's chip, and the
   spots as a segmented bar, in the scene's own accent. */
.lv-lwin-price { --lit: var(--accent); display: inline-flex; flex-direction: column; align-items: stretch; gap: 7px; width: 176px; line-height: 1; }
.lv-lwin-price .pp-row { display: flex; align-items: center; gap: 8px; }
.lv-lwin-price b { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; font-variant-numeric: tabular-nums; }
.lv-lwin-price .spots i { height: 5px; }
.lv-lbtn { height: 32px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; font-size: 13px; font-weight: 600; color: rgb(var(--fg)); background: rgb(var(--fg) / 0.08); text-decoration: none; transition: transform .15s, background-color .15s; }
.lv-lbtn:hover { background: rgb(var(--fg) / 0.13); }
.lv-lbtn:active { transform: scale(.97); }
.lv-lbtn-primary { background: var(--accent); color: #fff; }
.lv-lbtn-soon, .lv-lbtn-soon:hover { color: rgb(var(--fg) / 0.6); background: rgb(var(--fg) / 0.06); cursor: default; }
.lv-lbtn-soon:active { transform: none; }
.lv-lbtn-primary:hover { background: var(--accent); filter: brightness(1.08); }
.lv-hint { position: absolute; z-index: 2; margin: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 7px; white-space: nowrap; font-family: var(--rounded); font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.45); pointer-events: none; transition: opacity .3s; }
html:not(.dark) .lv-hint { color: rgba(0, 0, 0, 0.45); }
.lv-hint-arrow { animation: lv-nudge 4s ease-in-out 3s infinite; }
@keyframes lv-nudge { 0%, 60%, 100% { transform: none; } 20%, 35% { transform: translate(-4px, -4px); } }

/* Desktop icons placed by layout(); files that come and go. */
.lv-ic.is-hidden { opacity: 0; transform: scale(.4); pointer-events: none; }
.lv-ic.is-born { animation: lv-popin .6s var(--spring); }
.lv-ic.is-unzipping > span:first-child { animation: lv-unzip .9s ease-in-out; }
@keyframes lv-unzip { 0% { transform: none; } 20% { transform: scale(.92); } 45% { transform: scale(1.08) rotate(-3deg); } 70% { transform: scale(.96) rotate(2deg); } 100% { transform: none; } }
.no-widgets .lv-widgets { display: none; }

/* The first screen arrives: wallpaper, menubar, widgets and icons, dock, then the Levo window. */
.is-intro .lv-wall { animation: lv-fade .7s ease both; }
.is-intro .lv-menubar { animation: lv-drop .45s var(--ease-out) .15s both; }
.is-intro .lv-widgets { animation: lv-rise .5s ease .35s both; }
.is-intro .lv-icons { animation: lv-rise .5s ease .45s both; }
.is-intro .lv-dock { animation: lv-dock .45s var(--ease-out) .55s both; }
.is-intro .lv-lwin { animation: lv-win .6s var(--spring) .75s both; }
.is-intro .lv-hint { animation: lv-fade .5s ease 1.3s both; }
@keyframes lv-drop { from { transform: translateY(-100%); } }
@keyframes lv-rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes lv-dock { from { opacity: 0; transform: translateY(110px); } to { transform: none; } }
@keyframes lv-win { from { opacity: 0; transform: translateY(24px) scale(.95); } }

/* ------------------------------------------------------------ The app's own sizes (Popover/*.swift, Raycast.swift, text scale 1; 1 pt = 1 px) */

.lv-pop { font-size: 13px; --ctl: 14px; }
.lv-disk { padding: 14px 16px; }
.lv-dhead { gap: 8px; font-size: 13px; }
.lv-dhead b { font-weight: 500; }
.lv-dhead .lv-sec { display: flex; }
.lv-hero { margin-top: 8px; gap: 6px; }
.lv-free { font-size: 24px; font-weight: 600; letter-spacing: -0.3px; }
.lv-hero > .lv-sec { font-size: 13px; }
.lv-can { font-size: 13px; font-weight: 400; color: var(--lv-ready); }
.lv-can b { font-size: 15px; font-weight: 600; }
.lv-dbar { margin-top: 12px; }
.lv-tick { height: 18px; border-radius: 1.5px; }
.lv-tick[data-seg="free"] { background-color: rgb(var(--fg) / 0.14) !important; }
.lv-gauges { padding: 10px 8px; }
.lv-gauge { gap: 2px; padding: 4px 0; }
.lv-dial, .lv-dial svg { width: 64px; height: 64px; }
.lv-dial line { stroke-width: 2.29; }
.lv-dial-num { font-size: 17.9px; gap: 1px; }
.lv-dial-num small { font-size: 12.2px; font-weight: 400; margin-left: 1px; }
.lv-g-label { margin-top: 0; height: 22px; padding: 0 6px; font-size: 12px !important; font-weight: 500 !important; border-radius: 7px; }
.lv-g-label:hover, .lv-g-label:focus-visible { background: rgb(var(--fg) / 0.06); }
.lv-scroll { padding: 0 8px 8px; }
.lv-sh { height: auto; margin: 0; padding: 12px 8px 6px; font-size: 12px; font-weight: 500; }
.lv-sh-r { font-size: 12px; gap: 8px; }
.lv-sh-note { font-size: 12px; }
.lv-dd { height: 20px; padding: 0 6px; gap: 4px; font-size: 12px !important; font-weight: 400 !important; color: rgb(var(--fg) / 0.6) !important; border-radius: 6px; }
.lv-dd:hover { background: rgb(var(--fg) / 0.06); color: rgb(var(--fg)) !important; }
.lv-dd .lv-sym { width: 8px; height: auto; }
.lv-row { height: auto; min-height: 38px; margin: 0; padding: 0 8px; gap: 8px; border-radius: var(--ctl); }
.lv-grow { padding-top: 3px; padding-bottom: 3px; }
.lv-title { font-size: 13px; }
.lv-subt { font-size: 11px; }
.lv-gtext { gap: 1px; line-height: 1.2; }
.lv-size { font-size: 12px; color: rgb(var(--fg) / 0.8); min-width: 44px; }
.lv-irow { min-height: 28px; padding-left: 33px; }
.lv-iname { font-size: 13px; color: rgb(var(--fg)); }
.lv-irow .lv-size { font-size: 12px; color: rgb(var(--fg) / 0.6); }
.lv-chev { width: 16px; height: 16px; margin: 0 -3px 0 -2px; color: rgb(var(--fg) / 0.6); }
.lv-chev-gap { width: 16px; }
.lv-more { min-height: 0; height: auto; padding: 4px 0 4px 52px; font-size: 12px; color: rgb(var(--fg) / 0.6); }
.lv-more:hover { background: transparent; color: rgb(var(--fg)); }
.lv-sep-in { margin: 8px 8px 0; }

.lv-row:hover { background: rgb(var(--sel) / 0.04); }
.lv-row.is-sel { background: rgb(var(--sel) / 0.1); }

/* Checkboxes: a faint fill when empty; a filled rounded square with a white tick, or a dash when mixed. */
.lv-cb { width: 14px; height: 14px; border-radius: 4px; box-shadow: none; background: rgb(var(--fg) / 0.1); color: #fff !important; }
.lv-cb:hover { box-shadow: none; background: rgb(var(--fg) / 0.16); }
.lv-cb[aria-checked="true"], .lv-cb[aria-checked="mixed"] { background: var(--accent); }
.lv-cb[aria-checked="true"]:hover, .lv-cb[aria-checked="mixed"]:hover { background: var(--accent); filter: brightness(1.06); }
.lv-cb .lv-sym { width: 8.5px; height: auto; }

.lv-tile { width: 20px; height: 20px; border-radius: 5px; box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.15); }
.lv-tile .lv-sym { width: 12px; height: auto; max-height: 12px; }
.lv-tile-sm { width: 16px; height: 16px; border-radius: 4px; }
.lv-tile-sm .lv-sym { width: 9.6px; max-height: 9.6px; }
.lv-picon { width: 20px; height: 20px; display: block; flex-shrink: 0; }
.lv-picon img { width: 20px; height: 20px; display: block; }
.lv-info { width: 16px; height: 16px; margin: 0 -2px 0 0; color: rgb(var(--fg) / 0.6) !important; }
.lv-info .lv-sym { width: 12px; height: auto; }
.lv-grow:hover .lv-info, .lv-prow:hover .lv-info { display: inline-flex; }
.lv-prow.is-dim { cursor: default; }
.lv-prow.is-dim > :not(.lv-info) { opacity: .5; }
.lv-prow.is-dim:hover { background: rgb(var(--sel) / 0.05); }
.lv-seg { height: 24px; padding: 0; gap: 2px; border-radius: 0; background: transparent; }
.lv-seg button { height: 24px; padding: 0 10px; border-radius: var(--ctl); font-size: 12px !important; }
.lv-seg button:not(.is-on):hover { background: rgb(var(--fg) / 0.05); }
.lv-actions { height: 40px; padding: 0 10px; gap: 8px; }
.lv-checked { font-size: 12px; }
.lv-primary { height: 28px; padding: 0 6px; gap: 6px; font-size: 12px !important; font-weight: 600 !important; }
.lv-primary:disabled { color: rgb(var(--fg) / 0.4) !important; }
.lv-kbtn .lv-sym { width: 14px; height: auto; }
.lv-cap-sm { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; font-size: 10px; font-weight: 500; background: rgb(var(--fg) / 0.1); color: rgb(var(--fg)); }
.lv-cap-ring { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.2); min-width: 28px; }

/* The ⌘K panel (ActionPanel.swift): 300 wide, title 12/500, items 13 at 32, search 13 at 40. */
.lv-panel { width: 300px; border-radius: 12px; padding-top: 0; }
.lv-ph { height: 28px; padding: 6px 16px 0; font-size: 12px; }
.lv-pitems { padding: 6px 8px 6px; }
.lv-pitem { height: 32px; padding: 0 8px; gap: 8px; font-size: 13px; border-radius: 8px; }
.lv-pi-icon { width: 16px; height: 16px; }
.lv-pi-icon .lv-sym { width: 14px; height: auto; max-height: 14px; }
.lv-psep { margin: 4px -8px; }
.lv-psearch { margin-top: 0; border-top-width: 0.5px; }
.lv-psearch input { height: 40px; padding: 0 16px; font-size: 13px; }

/* The ⓘ bubble */
.lv-bubble { position: absolute; z-index: 25; width: 260px; box-sizing: border-box; padding: 12px; border-radius: 12px; background: var(--panel); box-shadow: var(--shadow); font-size: 12px; line-height: 1.35; pointer-events: none; animation: lv-in .16s var(--ease-out); }
html.dark .lv-bubble { background: #333335; }
.lv-bubble[hidden] { display: none; }
.lv-bubble b { display: block; font-size: 13px; font-weight: 600; margin-bottom: 0; }
.lv-bubble p { margin: 6px 0 0; color: rgb(var(--fg) / 0.8); }
.lv-bubble::before { content: ""; position: absolute; top: -6px; left: calc(var(--ax, 40px) - 6px); width: 12px; height: 12px; background: inherit; transform: rotate(45deg); border-radius: 2px; }

/* Clean up: the confirm takes over the popover */
.lv-confirm { inset: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; background: var(--pop-bg) !important; animation: lv-fade .18s; }
.lv-gate { flex: 1; padding: 30px 26px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lv-gate img { display: block; }
.lv-gate > b { margin-top: 14px; font-size: 19px; font-weight: 700; }
.lv-gate p { margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: rgb(var(--fg) / 0.6); }
.lv-gate-box { margin-top: 20px; padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; text-align: left; border-radius: 12px; box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.12); font-size: 14px; font-weight: 500; cursor: pointer; }
.lv-gate-box .lv-cb { margin-top: 2px; }
.lv-chead { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 6px; }
.lv-chead > b { font-size: 15px; font-weight: 600; }
.lv-chead > span { display: flex; gap: 12px; font-size: 12px; }
.lv-chead > span b { font-weight: 500; margin-left: 4px; }
.lv-clist { flex: 1; overflow-y: auto; padding: 8px; }
.lv-crow { height: 30px; padding: 0 8px; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.lv-crow .lv-size { font-size: 13px; color: rgb(var(--fg) / 0.8); }
.lv-cname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.lv-cbar { margin-top: auto; justify-content: flex-end; }
.lv-cancel { font-weight: 500 !important; color: rgb(var(--fg) / 0.7) !important; }

/* Widgets: the clock (date over time), and a battery or a calendar */
.lv-w-date { margin-top: 0; font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.6); }
.lv-w-time { margin-top: 6px; }
.lv-w-city { margin-top: auto; font-size: 12.5px; font-weight: 500; }
.lv-widget[hidden] { display: none; }
.lv-ring-fg.is-low { stroke: #FF453A; }
.lv-w-cal { padding: 14px 14px 12px; }
.lv-cal-m { font-size: 12px; font-weight: 700; color: #FF453A; text-transform: uppercase; letter-spacing: .02em; }
.lv-cal-g { margin-top: 6px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px 0; font-size: 9.5px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.lv-cal-g i { font-style: normal; height: 15px; line-height: 15px; }
.lv-cal-wd { color: rgb(var(--fg) / 0.45); }
.lv-cal-g .is-today { background: #FF453A; color: #fff; border-radius: 50%; width: 15px; margin: 0 auto; }

/* The Levo window: its lights work */
.lv-lights button { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); cursor: default; }
.lv-lights button:nth-child(2) { background: #FEBC2E; }
.lv-lights button:nth-child(3) { background: #28C840; }
.lv-lwin[hidden] { display: none; }
.lv-lwin.is-closing { animation: lv-wclose .2s ease-in forwards; }
.lv-lwin.is-minimising { animation: lv-wmin .42s cubic-bezier(.5, 0, .75, 0) forwards; }
.lv-lwin.is-opening { animation: lv-win .45s var(--spring) both; }
@keyframes lv-wclose { to { opacity: 0; transform: scale(.96); } }
@keyframes lv-wmin { to { opacity: 0; transform: translateY(60vh) scale(.1); } }

/* Round 6: the dock in both appearances, the desktop's disk image, dragging, the window's lights. */
.lv-dk-d { display: none !important; }
html.dark .lv-dk-l { display: none !important; }
html.dark .lv-dk-d { display: block !important; }
.lv-ic { touch-action: none; cursor: default; }
.lv-ic.is-dragging { transition: none; z-index: 6; }
.lv-ic.is-dragging > span:first-child { filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3)); }
.lv-ic.is-snapping { transition: left .32s var(--spring), top .32s var(--spring); }
.lv-ic-vol { display: flex; align-items: center; justify-content: center; height: 64px; margin: 2px 0; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.18)); }
.lv-ic-vol img { display: block; width: 64px; height: 64px; }
.lv-lights button { display: inline-flex; align-items: center; justify-content: center; color: rgba(0, 0, 0, 0.55); }
.lv-lights button .lv-sym { opacity: 0; width: 7px; height: auto; }
.lv-lights:hover button .lv-sym { opacity: 1; }
.lv-w-clock { padding: 16px; }
.lv-w-city { margin-top: 0; font-size: 13px; font-weight: 600; color: rgb(var(--fg) / 0.6); }
.lv-w-date { margin-top: 2px; font-size: 13px; font-weight: 500; color: rgb(var(--fg) / 0.6); }
.lv-w-time { margin-top: auto; display: block; max-width: 100%; overflow: hidden; letter-spacing: -0.5px; line-height: 1.1; }

/* ------------------------------------------------------------ Compact (phones) */

.lv-scene[data-mode="compact"] { width: auto; height: auto; min-height: 0; padding: 16px 16px 8px; overflow: visible; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lv-scene[data-mode="compact"] .lv-wall,
.lv-scene[data-mode="compact"] .lv-menubar,
.lv-scene[data-mode="compact"] .lv-note,
.lv-scene[data-mode="compact"] .lv-hint,
.lv-scene[data-mode="compact"] .lv-lock,
.lv-scene[data-mode="compact"] .lv-lights,
.lv-scene[data-mode="compact"] .lv-lwin-arrow,
.lv-scene[data-mode="compact"] .lv-lwin-apps,
.lv-scene[data-mode="compact"] .lv-lwin-bar { display: none; }
.lv-scene[data-mode="compact"] .lv-lwin { position: relative; left: auto !important; top: auto !important; width: 100%; max-width: 400px; order: 0; animation: lv-rise .5s ease both; }
.lv-scene[data-mode="compact"] .lv-lwin-body { height: auto; padding: 22px 16px 10px; }
.lv-scene[data-mode="compact"] .lv-lwin-ic, .lv-scene[data-mode="compact"] .lv-lwin-ic img { width: 88px; height: 88px; }
.lv-scene[data-mode="compact"] .lv-lwin-app span { font-size: 17px; font-weight: 700; }
.lv-scene[data-mode="compact"] .lv-popwrap { order: 1; width: 100%; max-width: 400px; animation: lv-rise .5s ease .15s both; }
.lv-scene[data-mode="compact"] .lv-pop { width: 100%; }
.lv-scene[data-mode="compact"] .lv-mb-menu,
.lv-scene[data-mode="compact"] .lv-mb-day,
.lv-scene[data-mode="compact"] .lv-mb-pct,
.lv-scene[data-mode="compact"] .lv-widgets,
.lv-scene[data-mode="compact"] .lv-icons,
.lv-scene[data-mode="compact"] .lv-dock { display: none; }
.lv-scene[data-mode="compact"] .lv-menubar { padding: 0 4px; }
.lv-scene[data-mode="compact"] .lv-mb-btn { padding: 0 6px; }
.lv-scene[data-mode="compact"] .lv-popwrap { position: relative; top: auto; left: auto; margin: 0 auto; }
.lv-scene[data-mode="compact"] .lv-pop { max-height: none; }
.lv-scene[data-mode="compact"] .lv-note { left: 10px; right: 10px; width: auto; transform: translateY(-120%); }
.lv-scene[data-mode="compact"] .lv-note.is-in { transform: none; }
.lv-scene[data-mode="compact"] .lv-lock { padding-top: 70px; }
.lv-scene[data-mode="compact"] .lv-lock-time { font-size: 92px; }
.lv-scene[data-mode="compact"] .lv-lock-who { margin-bottom: 0; position: absolute; top: 330px; }

/* Less motion: fades only. */
@media (prefers-reduced-motion: reduce) {
	.lv-scene *, .lv-scene *::before, .lv-scene *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-delay: 0ms !important; }
	.lv-scene .lv-pop, .lv-scene .lv-note, .lv-scene .lv-lock, .lv-scene .lv-dock, .lv-scene .lv-ic, .lv-scene .lv-row, .lv-scene .lv-mb-levo, .lv-scene .lv-widgets, .lv-scene .lv-icons { transform: none !important; transition-property: opacity, visibility, background-color !important; transition-duration: .2s !important; }
	.lv-scene .lv-dk-art { transition: none !important; }
}

/* ------------------------------------------------------------ Summary (round 10, SummarySection.swift) */

.lv-sum { padding: 14px 8px 10px; cursor: default; }
.lv-sline { margin: 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 5px; font-size: 13px; line-height: 17px; }
.lv-sline + .lv-sline { margin-top: 10px; }
.lv-w { color: rgb(var(--fg) / 0.7); }
.lv-p { margin-left: -4px; }
.lv-gl { display: inline-flex; align-items: center; }
.lv-chip {
	position: relative;
	height: 17px;
	padding: 0;
	margin: 0;
	border: 0;
	background: transparent;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: rgb(var(--fg)) !important;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	isolation: isolate;
}
/* The hover background reaches past the word (24 tall, 6 each side) without moving it. */
.lv-chip::before { content: ""; position: absolute; z-index: -1; left: -6px; right: -6px; top: -3.5px; bottom: -3.5px; border-radius: 14px; background: transparent; transition: background-color .12s; }
.lv-chip:hover::before { background: rgb(var(--fg) / 0.065); }
.lv-chip:active::before { background: rgb(var(--fg) / 0.12); }
.lv-chip[data-lit]::before { background: rgb(var(--fg) / 0.1); }
.lv-chip[disabled] { cursor: default; opacity: .85; }
.lv-tile-chip { width: 15px; height: 15px; border-radius: 3.75px; }
.lv-tile-chip .lv-sym { width: 9px; height: auto; max-height: 9px; }
.lv-chiprows { margin-top: 10px; }
.lv-breakdown[hidden] { display: none; }
.lv-breakdown { animation: lv-in .3s var(--ease-out); }

/* ------------------------------------------------------------ The bottom sheet (PopoverSheet.swift): \2318K and every confirm */

.lv-pop { transition: opacity .2s, transform .25s var(--ease-out), visibility 0s .25s, min-height .35s var(--ease-out); }
.is-open .lv-pop { transition: opacity .2s, transform .3s var(--ease-out), visibility 0s, min-height .35s var(--ease-out); }
.lv-scrim { position: absolute; inset: 0; z-index: 9; background: rgba(0, 0, 0, 0.12); opacity: 0; transition: opacity .3s; }
html.dark .lv-scrim { background: rgba(0, 0, 0, 0.35); }
.lv-scrim.is-in { opacity: 1; }
.lv-scrim[hidden] { display: none; }
.lv-bsheet, .lv-panel.lv-bsheet, .lv-sheet.lv-bsheet {
	position: absolute;
	z-index: 10;
	left: 0; right: 0; bottom: 0; top: auto;
	width: auto;
	max-height: none;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	border-radius: 18px 18px 0 0;
	background: var(--pop-bg) !important;
	box-shadow: 0 0 0 1px rgb(var(--fg) / 0.1), 0 -4px 16px rgba(0, 0, 0, 0.12);
	overflow: hidden;
	animation: none;
	transform: translateY(100%);
	transition: transform .35s cubic-bezier(.2, .85, .25, 1);
	inset: auto 0 0 0;
}
html.dark .lv-bsheet { box-shadow: 0 0 0 1px rgb(var(--fg) / 0.1), 0 -4px 16px rgba(0, 0, 0, 0.35); }
.lv-bsheet.is-in { transform: none; }
.lv-bsheet[hidden] { display: none; }
.lv-panel .lv-ph { height: 28px; padding: 6px 16px 0; }
.lv-ph-gap { height: 6px; }
.lv-panel .lv-pitems { padding: 0 8px; max-height: none; }
.lv-panel .lv-pitem { height: 32px; padding: 0 8px; gap: 8px; border-radius: 14px; }
.lv-panel .lv-pitem:hover { background: transparent; }
.lv-panel .lv-pitem.is-sel { background: rgb(var(--fg) / 0.1); }
.lv-panel .lv-pitem[disabled] { opacity: .4; cursor: default; }
.lv-pdetail { color: rgb(var(--fg) / 0.6); font-variant-numeric: tabular-nums; }
.lv-panel .lv-psep { margin: 4px 0; }
.lv-panel .lv-psearch { margin-top: 6px; border-top: 0.5px solid rgb(var(--fg) / 0.1); }
.lv-confirm .lv-chead { padding: 16px 16px 12px; }
.lv-confirm .lv-chead > b { font-size: 15px; font-weight: 600; }
.lv-confirm .lv-clist { flex: none; max-height: 360px; }
.lv-confirm .lv-gate { flex: none; }
.lv-cbar { border-top: 1px solid rgb(var(--fg) / 0.1); }
.lv-toast { font-size: 12px; color: rgb(var(--fg) / 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-flex; align-items: center; gap: 8px; }

@media (prefers-reduced-motion: reduce) {
	.lv-bsheet { transform: none !important; transition: opacity .2s !important; opacity: 0; }
	.lv-bsheet.is-in { opacity: 1; }
}

.lv-gl .lv-p { margin-left: 1px; }

/* ------------------------------------------------------------ The ghost cursor */

.lv-ghost { position: absolute; z-index: 70; left: 0; top: 0; width: 24px; height: 24px; margin: -3px 0 0 -5px; pointer-events: none; opacity: 0; transition: opacity .35s; will-change: transform; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.35)); }
.lv-ghost svg { display: block; transform-origin: 5px 3px; transition: transform .12s ease-out; }
.lv-ghost.is-in { opacity: 1; }
.lv-ghost.is-out { opacity: 0; transition: opacity .45s; }
.lv-ghost.is-down svg { transform: scale(.88); }
.lv-ghost.is-click svg { animation: lv-gclick .26s ease-out; }
.lv-ghost-ring { position: absolute; left: 5px; top: 3px; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgb(var(--fg) / 0.18); opacity: 0; transform: scale(.3); }
.lv-ghost.is-click .lv-ghost-ring { animation: lv-gring .45s ease-out; }
@keyframes lv-gclick { 40% { transform: scale(.84); } }
@keyframes lv-gring { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(1.3); } }

/* ------------------------------------------------------------ The Mac in a frame (desktop) */

/* Ruled by the viewport's height (round 8): about 90 % of it, less the navbar and the gap above, so
   the whole screen fits a short laptop window; 16:10, capped at 1440 px wide. Laid out at its final
   pixel size (no transform), so its text renders as crisply as the page's. */
.lv-scene[data-mode="desk"] {
	--lv-h: min(90svh, calc(100svh - 64px - 104px - 16px));
	width: min(100%, 1440px, calc(var(--lv-h) * 1.6));
	height: auto;
	aspect-ratio: 16 / 10;
	min-height: 0;
	margin: 0 auto;
	border-radius: 28px;
	box-shadow: 0 0 0 1px rgb(var(--fg) / 0.1), 0 40px 100px -40px rgba(0, 0, 0, 0.45), 0 14px 30px -18px rgba(0, 0, 0, 0.25);
	font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* "Working…" is the gauge's word, as text only. */
.lv-g-label.is-working::before, .lv-g-label.is-working:hover::before { content: "Working\2026"; }
.lv-dial-spin { display: none !important; }

/* Checkboxes as the app's RCCheckbox (round 10): a 1 pt ring at 20 %, a faint fill
   and a bold tick (or a dash) at 80 % when on. */
.lv-cb, .lv-cb:hover { background: transparent; box-shadow: inset 0 0 0 1px rgb(var(--fg) / 0.2); color: rgb(var(--fg) / 0.8) !important; }
.lv-cb[aria-checked="true"], .lv-cb[aria-checked="mixed"], .lv-cb[aria-checked="true"]:hover, .lv-cb[aria-checked="mixed"]:hover { background: rgb(var(--fg) / 0.06); filter: none; }

/* A chip sits 2 pt wider than its word on each side, as SentenceButtonStyle leaves it. */
.lv-chip { margin: 0 2px; }

/* ------------------------------------------------------------ Downloads: the stack, the flight, the fan */

.lv-dk-stack { transition: opacity .3s, max-width .4s var(--ease-out), padding .4s var(--ease-out); max-width: 80px; }
.lv-dk-stack.is-hidden { display: none; }
.lv-dk-stack.is-arriving { animation: lv-dk-grow .45s var(--ease-out); }
@keyframes lv-dk-grow { from { max-width: 0; opacity: 0; transform: scale(.4); } }
.lv-dk-stack .lv-dk-art { position: relative; }
.lv-dl-bar { position: absolute; left: 14%; right: 14%; bottom: 12%; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5); overflow: hidden; }
.lv-dl-bar[hidden] { display: none; }
.lv-dl-bar b { display: block; height: 100%; width: 0; border-radius: 3px; background: #fff; }
.lv-dl-fly { position: absolute; left: 0; top: 0; z-index: 66; width: 64px; height: 64px; pointer-events: none; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3)); will-change: transform; }
.lv-fan { position: absolute; z-index: 40; width: 0; height: 0; }
.lv-fan-item, .lv-fan-open {
	position: absolute; right: auto; left: 0; top: 0;
	display: flex; align-items: center; gap: 10px;
	padding: 0; border: 0; background: transparent; cursor: default;
	transform: translate(calc(-100% + 26px + var(--x)), var(--y)) rotate(var(--r, 0deg));
	transform-origin: 100% 50%;
	animation: lv-fan-in .32s cubic-bezier(.2, .9, .3, 1.1) both;
	animation-delay: calc(var(--i, 0) * 28ms);
	white-space: nowrap;
}
.lv-fan-item img { width: 52px; height: 52px; display: block; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25)); }
.lv-fan-name { max-width: 220px; overflow: hidden; text-overflow: ellipsis; padding: 3px 9px; border-radius: 8px; font-size: 12.5px; font-weight: 500; color: #fff; background: rgba(30, 30, 32, 0.78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lv-fan-item:hover .lv-fan-name { background: var(--accent); }
.lv-fan-open { transform: translate(calc(-100% + 40px + var(--x)), var(--y)); padding: 4px 12px; border-radius: 10px; font-size: 12.5px; font-weight: 600; color: #fff; background: rgba(30, 30, 32, 0.78); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.lv-fan-open:hover { background: var(--accent); }
.lv-fan.is-out { opacity: 0; transition: opacity .18s; }
@keyframes lv-fan-in { from { opacity: 0; transform: translate(calc(-100% + 26px), 0) scale(.4); } }
@media (prefers-reduced-motion: reduce) {
	.lv-fan-item, .lv-fan-open, .lv-dk-stack.is-arriving { animation: none; }
}

/* Round 13: the Mac's name first, over a divider; "Auto mode" in plain orange at its end while it's on. */
.lv-namerow { padding: 12px 16px 10px; }

/* "Checked just now" analyses on a click, with no other look (round 12). */
.lv-scene .lv-checked { padding: 0; border: 0; background: none; font: inherit; font-size: 12px; color: inherit; cursor: pointer; }

/* ------------------------------------------------------------ Round 15 */

/* A word just clicked shows no hover look until the pointer leaves it. */
.lv-chip.is-quiet:hover:not([data-lit])::before { background: transparent; }

/* The name row's end (round 16): empty while Auto mode is off; while it's on, "Auto mode" as a
   Liquid Glass capsule, translucent with a light rim, tinted orange, its limit and scope on hover. */
.lv-scene .lv-topclean, .lv-kit .lv-topclean {
	--tint: var(--accent);
	position: relative;
	flex-shrink: 0;
	height: 22px;
	margin: -2px -6px -2px 0;
	padding: 0 10px;
	border: 0;
	border-radius: 11px;
	display: inline-flex;
	align-items: center;
	background: color-mix(in srgb, var(--tint) 80%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(1.6);
	backdrop-filter: blur(12px) saturate(1.6);
	box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.5), inset 0 0 0 0.5px rgba(255, 255, 255, 0.22), 0 1px 3px color-mix(in srgb, var(--tint) 35%, transparent);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.lv-scene .lv-topclean.is-auto, .lv-kit .lv-topclean.is-auto { --tint: #FF9500; }
.lv-scene .lv-topclean[hidden] { display: none; }
/* "Auto mode" as the app draws it: a soft orange tint, orange text and a subtle rim (no solid fill). */
.lv-scene .lv-topclean.is-auto, .lv-kit .lv-topclean.is-auto {
	background: color-mix(in srgb, var(--tint) 16%, transparent);
	box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tint) 38%, transparent), inset 0 0.5px 0 rgba(255, 255, 255, 0.35);
	color: #9E4700;
	font-weight: 500;
}
html.dark .lv-scene .lv-topclean.is-auto, html.dark .lv-kit .lv-topclean.is-auto { color: #FF9217; box-shadow: inset 0 0 0 0.5px color-mix(in srgb, var(--tint) 40%, transparent), inset 0 0.5px 0 rgba(255, 255, 255, 0.12); }
html.dark .lv-scene .lv-topclean.is-auto, html.dark .lv-kit .lv-topclean.is-auto { --tint: #FF9F0A; }
.lv-scene .lv-topclean:hover:not(:disabled) { filter: brightness(1.06); }
.lv-scene .lv-topclean:active:not(:disabled) { filter: brightness(.94); }
.lv-scene .lv-topclean:disabled { opacity: .4; cursor: default; }
.lv-topclean::after {
	content: attr(data-tipkeys);
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	padding: 4px 8px;
	border-radius: 7px;
	background: var(--panel);
	box-shadow: var(--shadow);
	color: rgb(var(--fg));
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .12s;
	z-index: 4;
}
.lv-topclean:hover:not(:disabled)::after { opacity: 1; transition-delay: .5s; }

/* The action bar's keycap buttons, quieter: secondary text, no strong fill. */
.lv-actions:not(.lv-cbar) .lv-primary { color: rgb(var(--fg) / 0.6) !important; font-weight: 500 !important; }
.lv-actions:not(.lv-cbar) .lv-primary:hover:not(:disabled) { color: rgb(var(--fg) / 0.85) !important; }

/* The disk tip glides between sections; inside one it holds still. */
.lv-tip.is-moving { transition: left .18s var(--ease-out); }

/* A small screen: a smaller installer window, and only the files that matter on the desktop. */
.lv-scene.is-small .lv-lwin { width: 352px; }
.lv-scene.is-small .lv-lwin-body { height: 170px; gap: 12px; padding: 0 18px; }
.lv-scene.is-small .lv-lwin-app, .lv-scene.is-small .lv-lwin-apps { width: 100px; }
.lv-scene.is-small .lv-lwin-ic, .lv-scene.is-small .lv-lwin-ic img { width: 80px; height: 80px; }
.lv-scene.is-small .lv-lwin-arrow { width: 44px; }
.lv-scene.is-small .lv-ic.is-roomy, .lv-scene.is-tiny .lv-ic.is-roomy-tiny { display: none; }

/* ------------------------------------------------------------ The kit: the popover's tokens outside the scene
 * The tiles below the Mac (bento.js) are built from the popover's own components, so they wear
 * the same tokens. Generated from the .lv-scene blocks above; keep them in step. */
.lv-kit {
	--fg: 0 0 0;
	--sel: 0 0 0;
	--accent: #138AF2;
	--red: #B12424;
	--red-fill: rgba(177, 36, 36, 0.12);
	--orange: #C75D07;
	--yellow-text: #8A5A00;
	--yellow-fill: rgba(248, 163, 0, 0.16);
	--green: #006B4F;
	--green-fill: rgba(0, 138, 102, 0.12);
	--lv-ready: #008A66;
	--lv-free: rgb(0 0 0 / 0.1);
	--pop-bg: linear-gradient(180deg, #F8F8F8 0%, #F0F0F0 70%);
	--pop-rim: rgba(0, 0, 0, 0.1);
	--panel: #FFFFFF;
	--bar-bg: rgba(0, 0, 0, 0.03);
	--mb-ink: #000;
	--mb-bg: rgba(255, 255, 255, 0.32);
	--glass: rgba(255, 255, 255, 0.58);
	--glass-rim: rgba(255, 255, 255, 0.7);
	--shadow: 0 1px 1px -1px rgba(0,0,0,.05), 0 4px 2px -3px rgba(0,0,0,.05), 0 8px 4px -6px rgba(0,0,0,.05), 0 12px 40px -12px rgba(0,0,0,.12), 0 24px 64px -24px rgba(0,0,0,.22);
	--rounded: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	--ease-out: cubic-bezier(.2, .85, .25, 1);
	--spring: cubic-bezier(.34, 1.56, .64, 1);
	color: rgb(var(--fg));
	font-family: -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
	font-size: 13px;
	line-height: 1.25;
	-webkit-font-smoothing: antialiased;
	-webkit-user-select: none;
	user-select: none;
	text-align: left;
}
html.dark .lv-kit {
	--fg: 255 255 255;
	--sel: 255 255 255;
	--accent: #4FA3F8;
	--red: #FF6363;
	--red-fill: rgba(255, 99, 99, 0.15);
	--orange: #FF9217;
	--yellow-text: #FFC531;
	--yellow-fill: rgba(255, 197, 49, 0.15);
	--green: #59D499;
	--green-fill: rgba(89, 212, 153, 0.15);
	--lv-ready: #59D499;
	--lv-free: rgb(255 255 255 / 0.1);
	--pop-bg: linear-gradient(180deg, #232323 0%, #1B1B1B 70%);
	--pop-rim: rgba(255, 255, 255, 0.12);
	--panel: #2A2A2A;
	--bar-bg: rgba(255, 255, 255, 0.05);
	--mb-ink: #fff;
	--mb-bg: rgba(0, 0, 0, 0.22);
	--glass: rgba(34, 34, 38, 0.52);
	--glass-rim: rgba(255, 255, 255, 0.1);
	--shadow: 0 0 0 1px rgba(255,255,255,.1), 0 1px 1px -1px rgba(0,0,0,.2), 0 12px 40px -12px rgba(0,0,0,.5), 0 24px 64px -24px rgba(0,0,0,.6);
}
.lv-kit button { font: inherit; color: inherit; margin: 0; cursor: default; -webkit-tap-highlight-color: transparent; }
.lv-kit .lv-pop { position: relative; opacity: 1; visibility: visible; transform: none; transition: none; max-height: none; }

/* The installer is a normal desktop window (menus.js); its contents fill it as it resizes. */
.lv-lwin-w .lvm-wbody { display: flex; flex-direction: column; overflow: hidden; }
.lv-lwin-in { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.lv-lwin-w .lv-lwin-body, .lv-scene.is-small .lv-lwin-w .lv-lwin-body { flex: 1; height: auto; min-height: 0; }
.lv-lwin-w .lv-lwin-foot { flex: none; }
.is-intro .lv-lwin-w { animation: lv-win .6s var(--spring) .75s both; }