/* styles/10-mootionblue.css — lifted from mootionblue template, retokenised.
   Sources: styles/landing.css 193-248,305-375 (hero shell), styles/studio.css 33-51,271-334,360-366 (studio float/wrap/shell/pointer/inspector/main).
   Dropped: .mbl-sky imagery, .mbl-nav/.mbl-brand/.mbl-nav-btn, waitlist/coin/badge, Raycast-only classes.
   Adaptations: mbl colour literals -> Wav tokens; hovers wrapped in fine-pointer media per plan §3.4. */

/* lifted: landing.css 193-248 */
.mbl-hero {
	--panel-under: 168px;
	flex-direction: column;
	align-items: center;
	width: 100%;
	padding: 16px 16px 0;
	display: flex;
	position: relative;
}
.mbl-hero-panel {
	top: 16px;
	bottom: var(--panel-under);
	border-radius: var(--r-xl);
	isolation: isolate;
	background: var(--dusk-1);
	position: absolute;
	left: 16px;
	right: 16px;
	overflow: clip;
}
.mbl-hero-panel:after {
	content: "";
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--sheet-edge);
	pointer-events: none;
	position: absolute;
	inset: 0;
}
.mbl-hero-ground {
	transform-origin: 50% 0;
	will-change: transform;
	position: absolute;
	inset: -64px 0 0;
	transform: scale(1.06);
}
.mbl-ground-canvas,
.ow-ground-poster {
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
.mbl-ground-canvas {
	z-index: 1;
}
.mbl-hero-tone {
	background: linear-gradient(in oklab 180deg, rgb(7 7 9 / .5) 0%, rgb(7 7 9 / .22) 40%, rgb(7 7 9 / 0) 72%);
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* lifted: landing.css 305-337 (.mbl-hero-head, .mbl-hero-copy, .mbl-h1, .mbl-hero-sub); sub colour retokenised */
.mbl-hero-head {
	z-index: 1;
	width: min(1200px, 100%);
	position: relative;
}
.mbl-hero-copy {
	will-change: transform, opacity;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 96px 0 72px;
	display: flex;
}
.mbl-h1 {
	letter-spacing: -.04em;
	text-align: center;
	text-wrap: balance;
	font-size: var(--h1);
	font-weight: 500;
	line-height: 1.05;
}
.mbl-h1-chunk {
	display: inline-block;
}
.mbl-hero-sub {
	text-align: center;
	color: var(--foreground-muted);
	text-wrap: pretty;
	width: min(620px, 100%);
	font-size: var(--hero-sub);
	line-height: 1.47;
}

/* lifted: landing.css 366-382 (dot matrix canvas over the hero panel) */
.mbl-hero>.mbl-hero-dots {
	border-radius: var(--r-xl);
	width: calc(100% - 32px);
	height: calc(100% - 16px);
	inset: 16px 16px 0;
	position: absolute;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(#000 calc(100% - 80px), #0000 100%);
	mask-image: linear-gradient(#000 calc(100% - 80px), #0000 100%);
}
@media (max-width: 700px) {
	.mbl-hero>.mbl-hero-dots {
		width: calc(100% - 16px);
		height: calc(100% - 8px);
		inset: 8px 8px 0;
	}
}

/* lifted: studio.css 33-51 */
.mbl-studio-float {
	z-index: 1;
	will-change: transform;
	justify-content: center;
	width: 100%;
	padding-bottom: 40px;
	display: flex;
	position: relative;
}
.mbl-studio-wrap {
	width: min(1240px, 100%);
}
@media (max-width: 700px) {
	.mbl-studio-float {
		padding-bottom: 0;
	}
	.mbl-studio-wrap {
		width: 100%;
		max-width: 358px;
	}
}

/* lifted: studio.css 271-334 (.mbh-studio shell, :after edge, .mbh-film-pointer) */
.mbh-studio {
	border-radius: var(--r-xl);
	background: var(--bg);
	width: 100%;
	height: 660px;
	font-family: var(--font-sans);
	color: var(--ink);
	padding: 12px;
	font-size: 12px;
	display: flex;
	position: relative;
	overflow: clip;
	box-shadow: var(--shell-shadow);
}
.mbh-studio:after {
	content: "";
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--sheet-edge);
	pointer-events: none;
	z-index: 5;
	position: absolute;
	inset: 0;
}
.mbh-film-pointer {
	z-index: 6;
	pointer-events: none;
	opacity: 0;
	transform-origin: 12.5% 11.6936%;
	filter: drop-shadow(0 2px 3.5px #0000004d);
	will-change: transform, opacity;
	width: 50px;
	height: 53px;
	position: absolute;
	top: 0;
	left: 0;
}
.mbh-studio[data-interacting="1"] .mbh-film-pointer {
	visibility: hidden;
}

/* lifted: studio.css 336-366 (inspector column + main column) */
.mbh-inspector {
	overscroll-behavior: contain;
	scrollbar-width: none;
	border-radius: var(--r-lg);
	background: var(--board);
	width: 300px;
	min-height: 0;
	box-shadow: var(--card-shadow);
	flex: none;
	padding: 4px;
	overflow: clip auto;
}
.mbh-inspector::-webkit-scrollbar {
	display: none;
}
.mbh-main {
	flex-direction: column;
	flex: 1;
	gap: 12px;
	min-width: 0;
	display: flex;
}

/* lifted: mootionblue/styles/studio.css 2371-3230 (.mbs*), adapted:
   lab()/oklch literals -> tokens, video/headline/tagline/size/keys/prop-lane
   selectors removed, scene crossfade + clip labels added. */
.mbs {
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: var(--section-y) 0;
	display: flex;
}
.mbs-track {
	flex-direction: column;
	align-items: center;
	width: 100%;
	display: flex;
}
.mbs-track:after {
	content: "";
	height: var(--pin-len, 1600px);
	flex: none;
}
.mbs-pin {
	flex-direction: column;
	align-items: center;
	gap: 20px;
	width: min(var(--col), 100% - 32px);
	display: flex;
	position: sticky;
	top: 10vh;
}
.mbs-editor {
	--lw: 160px;
	--row-h: 32px;
	--ruler-h: 36px;
	--sec-h: 30px;
	--x0: 12px;
	--xr: 16px;
	border-radius: var(--r-xl);
	background: var(--bg);
	width: 100%;
	font-family: var(--font-sans);
	flex-direction: column;
	gap: 12px;
	padding: 12px;
	display: flex;
	position: relative;
	overflow: clip;
	box-shadow: 0 40px 90px -40px rgb(0 0 0 / .85);
}
.mbs-editor:after {
	content: "";
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--sheet-edge);
	pointer-events: none;
	z-index: 5;
	position: absolute;
	inset: 0;
}
.mbs-preview {
	border-radius: var(--r-lg);
	background: var(--viewport);
	flex: none;
	justify-content: center;
	align-items: center;
	height: clamp(230px, 90vh - 450px, 460px);
	display: flex;
}
.mbs-viewport {
	aspect-ratio: 16/10;
	border-radius: var(--r-2xs);
	background: var(--surface-recessed);
	width: 100%;
	max-width: calc(100% - 32px);
	position: relative;
	overflow: clip;
	box-shadow: 0 0 0 1px var(--edge), 0 24px 60px -30px rgb(0 0 0 / .8);
}
.mbs-scene {
	opacity: 0;
	transition: opacity .4s var(--ease-out);
	position: absolute;
	inset: 0;
}
.mbs-scene.is-on {
	opacity: 1;
}
.mbs-scene img {
	object-fit: cover;
	object-position: left center;
	width: 100%;
	height: 100%;
}
.mbs-chip {
	border-radius: var(--r-lg);
	background: var(--home-card);
	width: max-content;
	max-width: calc(100% - 32px);
	box-shadow: inset 0 0 0 1px var(--sheet-edge), 0 16px 36px -18px rgb(0 0 0 / .75);
	font: 400 15px/22px var(--font-sans);
	color: var(--ink);
	white-space: pre;
	margin: 0 auto;
	padding: 10px 16px;
	position: absolute;
	top: 40%;
	left: 0;
	right: 0;
}
.mbs-timeline {
	border-radius: var(--r-lg);
	background: var(--surface);
	box-shadow: var(--card-shadow);
	flex: none;
	position: relative;
	overflow: clip;
}
.mbs-transport {
	height: 44px;
	box-shadow: inset 0 -1px 0 var(--line);
	align-items: center;
	gap: 12px;
	padding: 0 12px;
	display: flex;
	position: relative;
}
.mbs-play {
	border: 0;
	border-radius: var(--r-md);
	background: var(--surface-2);
	width: 30px;
	height: 30px;
	color: var(--ink);
	cursor: pointer;
	transition: background-color .15s var(--ease), scale .15s var(--ease-out);
	flex: none;
	place-items: center;
	display: grid;
	position: relative;
}
@media (hover: hover) and (pointer: fine) {
	.mbs-play:hover {
		background: var(--surface-3);
	}
}
.mbs-play:active {
	scale: .96;
}
.mbs-play svg {
	overflow: visible;
}
.mbs-play-icon, .mbs-pause-icon {
	transform-box: fill-box;
	transform-origin: 50%;
	transition: opacity .3s cubic-bezier(.2,0,0,1), transform .3s cubic-bezier(.2,0,0,1), filter .3s cubic-bezier(.2,0,0,1);
}
.mbs-pause-icon {
	opacity: 0;
	filter: blur(4px);
	transform: scale(.25);
}
.mbs[data-playing="1"] .mbs-pause-icon {
	opacity: 1;
	filter: blur(0);
	transform: scale(1);
}
.mbs[data-playing="1"] .mbs-play-icon {
	opacity: 0;
	filter: blur(4px);
	transform: scale(.25);
}
.mbs-play:focus-visible {
	outline: 2px solid var(--viz-1);
	outline-offset: 2px;
}
.mbs-time {
	font: 12px/14px var(--font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	gap: 6px;
	display: flex;
}
.mbs-total {
	color: var(--icon-3);
}
.mbs-hint {
	color: var(--icon-3);
	margin-left: auto;
	font-size: 12px;
	line-height: 14px;
}
.mbs-tl {
	display: flex;
}
.mbs-labels {
	width: var(--lw);
	background: var(--tl-col);
	box-shadow: inset -1px 0 0 var(--line-2);
	user-select: none;
	flex: none;
	position: relative;
}
.mbs-colhead {
	height: var(--ruler-h);
	box-shadow: inset 0 -1px 0 var(--line), inset -1px 0 0 var(--line-2);
	color: var(--ink-3);
	align-items: center;
	padding: 0 4px 0 10px;
	display: flex;
}
.mbs-colhead b {
	font: 500 11px/13px var(--font-sans);
}
.mbs-seclabel {
	height: var(--sec-h);
	box-shadow: inset 0 -1px 0 var(--line), inset -1px 0 0 var(--line-2);
	color: var(--ink-3);
	align-items: center;
	padding: 0 10px;
	font-size: 12px;
	display: flex;
}
.mbs-lprow {
	height: var(--row-h);
	box-shadow: inset 0 -1px 0 var(--line);
	align-items: center;
	display: flex;
}
.mbs-lp {
	align-items: center;
	height: 100%;
	flex: 1;
	display: flex;
	position: relative;
	overflow: clip;
}
.mbs-lp-label {
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	display: flex;
}
.mbs-lp-name {
	color: var(--ink);
	white-space: nowrap;
	font-size: 12px;
	font-weight: 500;
}
.mbs-lane {
	background: var(--tl-lane);
	cursor: pointer;
	touch-action: pan-y;
	user-select: none;
	flex: 1;
	min-width: 0;
	position: relative;
}
.mbs-lane:focus-visible {
	outline: 2px solid var(--viz-1);
	outline-offset: -2px;
}
.mbs-ruler {
	height: var(--ruler-h);
	background: var(--surface);
	box-shadow: inset 0 -1px 0 var(--line);
	position: relative;
}
.mbs-tick {
	height: 100%;
	top: 0;
	left: calc(var(--x0) + (100% - var(--x0) - var(--xr)) * var(--a));
	border-left: 1px solid var(--line-2);
	position: absolute;
	translate: -.5px;
}
.mbs-tick.minor {
	border-left-color: var(--ink-4);
	height: 5px;
	top: auto;
	bottom: 0;
}
.mbs-tick small {
	font: 10px/12px var(--font-mono);
	color: var(--ink-3);
	white-space: nowrap;
	position: absolute;
	top: 5px;
	left: 6px;
}
.mbs-sections {
	height: var(--sec-h);
	background: var(--surface);
	box-shadow: inset 0 -1px 0 var(--line);
	position: relative;
}
.mbs-pill {
	height: 22px;
	top: 4px;
	left: calc(var(--x0) + (100% - var(--x0) - var(--xr)) * var(--a) + 1px);
	width: calc((100% - var(--x0) - var(--xr)) * (var(--b) - var(--a)) - 2px);
	border-radius: var(--r-xs);
	white-space: nowrap;
	color: var(--sc-d);
	background: color-mix(in srgb, var(--sc-d) 14%, transparent);
	transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
	align-items: center;
	padding: 0 8px;
	font-size: 12px;
	font-weight: 500;
	line-height: 14px;
	display: flex;
	position: absolute;
	overflow: clip;
	box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0);
}
.mbs-pill.is-on {
	background: color-mix(in srgb, var(--sc-d) 22%, transparent);
	box-shadow: inset 0 0 0 1px var(--sc-d);
}
.mbs-row {
	height: var(--row-h);
	position: relative;
}
.mbs-clip {
	height: calc(var(--row-h) - 8px);
	top: 4px;
	left: calc(var(--x0) + (100% - var(--x0) - var(--xr)) * var(--a));
	width: calc((100% - var(--x0) - var(--xr)) * (var(--b) - var(--a)) - 1px);
	border-radius: var(--r-xs);
	color: var(--clip-ink);
	background: var(--c1);
	box-shadow: inset 0 0 0 1px var(--edge-2);
	align-items: center;
	display: flex;
	position: absolute;
	overflow: clip;
}
.mbs-clip-caption {
	z-index: 2;
	white-space: nowrap;
	min-width: 0;
	font: 600 11px/13px var(--font-sans);
	letter-spacing: .005em;
	flex: 1;
	align-items: center;
	gap: 5px;
	padding: 0 12px 0 10px;
	display: flex;
	position: relative;
	overflow: hidden;
}
.mbs-clip-caption>span {
	text-overflow: ellipsis;
	overflow: hidden;
}
.mbs-playhead {
	z-index: 4;
	pointer-events: none;
	will-change: transform;
	width: 0;
	color: var(--playhead-live);
	position: absolute;
	top: 4px;
	bottom: 0;
	left: 0;
}
.mbs-playhead:before {
	content: "";
	background: var(--playhead-live);
	width: 2px;
	position: absolute;
	top: 8px;
	bottom: 0;
	left: -1px;
}
.mbs-playhead svg {
	filter: drop-shadow(0 2px 4px rgb(0 0 0 / .4));
	transform-origin: 50% 100%;
	transition: transform .15s var(--ease-out);
	display: block;
	position: absolute;
	top: -2px;
	left: -9px;
}
.mbs[data-drag="1"] .mbs-playhead svg {
	transform: scale(1.12);
}
.mbs-captions {
	width: 100%;
	padding: 0 28px 0 calc(12px + var(--lw, 160px) + 12px);
	gap: 4px;
	display: flex;
}
.mbs-caption {
	flex-direction: column;
	gap: 4px;
	padding-right: 16px;
	flex: 1;
	display: flex;
}
.mbs-caption h3 {
	color: var(--ink-3);
	transition: color .3s var(--ease);
	font-size: 16px;
	font-weight: 500;
	line-height: 22px;
}
.mbs-caption p {
	color: var(--ink-3);
	transition: color .3s var(--ease);
	font-size: 14px;
	line-height: 20px;
}
.mbs-caption.is-on h3 {
	color: var(--ink);
}
.mbs-caption.is-on p {
	color: var(--icon-2);
}
@media (max-width: 1100px) {
	.mbs-editor {
		--lw: 120px;
	}
	.mbs-captions {
		padding-left: calc(12px + 120px + 12px);
	}
}
@media (max-width: 700px) {
	.mbs {
		gap: 14px;
		padding: var(--section-y) 0 64px;
	}
	.mbs-pin {
		gap: 14px;
		width: calc(100% - 32px);
		top: 56px;
	}
	.mbs-editor {
		--lw: 0px;
		--row-h: 28px;
		--ruler-h: 26px;
		--sec-h: 26px;
		--x0: 10px;
		--xr: 14px;
		gap: 8px;
		padding: 8px;
		box-shadow: 0 30px 70px -36px rgb(0 0 0 / .85);
	}
	.mbs-preview {
		background: 0 0;
		height: auto;
	}
	.mbs-viewport {
		border-radius: var(--r-lg);
		width: 100%;
		max-width: none;
		aspect-ratio: 16/9;
	}
	.mbs-chip {
		padding: 6px 10px;
		font-size: 12px;
		line-height: 16px;
	}
	.mbs-labels, .mbs-hint {
		display: none;
	}
	.mbs-tick small {
		font-size: 9px;
		top: 6px;
		left: 4px;
	}
	.mbs-captions {
		padding: 0 4px;
		flex-direction: column;
		gap: 8px;
	}
	.mbs-caption {
		display: none;
	}
	.mbs-caption.is-on {
		display: flex;
	}
}
@media (prefers-reduced-motion: reduce) {
	.mbs-track:after {
		height: 0;
	}
	.mbs-pin {
		position: relative;
		top: 0;
	}
}

/* lifted: mootionblue/styles/studio.css 1866–2077 — .mbt tile shelf
   (mask, stage perspective, rows, bob/dev/lift, faces, sheen, bob keyframes).
   Face backgrounds retokenised to Wav surfaces; video/focus rules kept
   inert (shelf is decorative). */
.mbt {
	--s: 1;
	width: 100%;
	max-width: 1312px;
	height: calc(430px * var(--s));
	mask-image: linear-gradient(90deg, #0000 0, #000 96px calc(100% - 96px), #0000 100%);
	position: relative;
	overflow: hidden;
}
.mbt-stage {
	width: 1312px;
	height: 430px;
	transform: scale(var(--s));
	transform-origin: 50% 0;
	perspective: 1100px;
	perspective-origin: 50% -10%;
	margin-left: -656px;
	position: absolute;
	top: 0;
	left: 50%;
	overflow: hidden;
	mask-image: linear-gradient(90deg, #0000 0%, #000 12% 88%, #0000 100%), linear-gradient(#000 0% 62%, rgb(0 0 0 / .45) 92%, #0000 100%);
	mask-composite: intersect;
}
.mbt-shelf {
	transform-style: preserve-3d;
	position: absolute;
	top: 18px;
	left: 50%;
	transform: translate(-50%) rotateX(46deg);
}
.mbt-row {
	transform-style: preserve-3d;
	justify-content: center;
	gap: 26px;
	margin-bottom: 34px;
	display: flex;
}
.mbt-row.r2 { margin-left: -120px; }
.mbt-row.r3 { margin-left: 60px; }
.mbt-bob, .mbt-dev, .mbt-lift {
	width: 112px;
	height: 100px;
	transform-style: preserve-3d;
	flex: none;
	position: relative;
}
.mbt-lift { border-radius: 24px; }
.mbt-stage, .mbt-shelf, .mbt-row, .mbt-bob, .mbt-dev { pointer-events: none; }
.mbt-lift:before {
	content: "";
	border-radius: 28px;
	position: absolute;
	inset: -8px -8px -20px;
}
.mbt-t {
	width: 112px;
	height: 100px;
	transform-style: preserve-3d;
	border-radius: 24px;
	position: relative;
	box-shadow: inset 0 1px rgb(255 255 255 / .08);
}
.mbt-face {
	transition: filter .3s var(--ease);
	background: var(--surface-2);
	border-radius: 24px;
	position: absolute;
	inset: 0;
	overflow: hidden;
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), inset 0 2px rgb(255 255 255 / .28);
}
.mbt-face picture, .mbt-face img, .mbt-face video {
	object-fit: cover;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
.mbt-lift.is-hot .mbt-face { filter: brightness(1.12); }
.mbt-face:after {
	content: "";
	pointer-events: none;
	background: linear-gradient(160deg, rgb(255 255 255 / .32) 0%, rgb(255 255 255 / .06) 38%, #0000 55%, rgb(0 0 0 / .18) 100%);
	position: absolute;
	inset: 0;
}
.mbt-icon { display: grid; place-items: center; }
.mbt-side {
	background: var(--edge-face, var(--tile-face, var(--surface-3)));
	filter: brightness(.8);
	border-radius: 24px;
	position: absolute;
	inset: 0;
	transform: translateZ(-14px);
}
.mbt-side2 {
	background: var(--edge-face, var(--tile-face, var(--surface-3)));
	border-radius: 24px;
	position: absolute;
	inset: 0;
	transform: translateZ(-7px);
}
.mbt-sh {
	border-radius: 24px;
	position: absolute;
	inset: 6px;
	transform: translateZ(-15px);
	box-shadow: 0 0 30px 6px rgb(0 0 0 / .65);
}
.mbt-row.r2 .mbt-t { opacity: .95; }
.mbt-row.r3 .mbt-t { opacity: .9; filter: saturate(.92); }
.mbt-sheen {
	pointer-events: none;
	z-index: 1;
	border-radius: 24px;
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.mbt-sheen:before {
	content: "";
	background: linear-gradient(100deg, #0000, rgb(255 255 255 / .28), #0000);
	width: 45%;
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: 0;
	transform: translate(-120%) skew(-12deg);
}
.mbt[data-state="developing"] .mbt-sheen:before {
	animation: mbt-sheen .76s var(--ease-out) var(--sd, 0s) both;
}
@keyframes mbt-sheen {
	to { transform: translate(320%) skew(-12deg); }
}
.mbt[data-state="pending"] .mbt-t > * { opacity: 0; }
.mbt[data-state="idle"] .mbt-bob {
	animation: mbt-bob 6s ease-in-out calc(var(--col) * -.6s) infinite;
}
.mbt[data-offscreen="1"] .mbt-bob { animation-play-state: paused; }
@keyframes mbt-bob {
	0%, to { transform: translateY(-3px); }
	50% { transform: translateY(3px); }
}

/* lifted: mootionblue/styles/landing.css 322–366 — .mbl-badge glass badge.
   Bloom recoloured from amber to --accent-glow-2. */
.mbl-badge {
	border-radius: var(--r-pill, 999px);
	height: 30px;
	align-items: center;
	gap: 8px;
	padding: 0 12px 0 8px;
	font-size: 14px;
	font-weight: 500;
	line-height: 18px;
	display: inline-flex;
}
.mbl-badge.mbl-badge-credit {
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	color: var(--foreground);
	letter-spacing: -.006em;
	background: radial-gradient(32px 26px at 16px, var(--accent-glow-2), transparent), linear-gradient(rgb(255 255 255 / .11), rgb(255 255 255 / .04));
	border-radius: 16px;
	height: 32px;
	padding: 0 14px 0 4px;
	box-shadow: inset 0 1px rgb(255 255 255 / .18), inset 0 0 0 1px rgb(255 255 255 / .11), 0 1px 2px rgb(0 3 28 / .3), 0 8px 20px -10px rgb(0 3 28 / .6);
}

/* lifted: mootionblue/styles/landing.css 390–506 — .mbl-closing shell,
   ground/dots/grain layers, h2/sub and the film-grain keyframes.
   Ground poster gradient replaced with Wav dusk tokens; waitlist,
   coin and page variants dropped. */
.mbl-closing {
	border-radius: var(--r-xl);
	isolation: isolate;
	background: var(--home-card, var(--surface-1));
	width: min(1200px, 100% - 32px);
	clip-path: inset(0 round var(--r-xl));
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 112px;
	padding: 112px 24px 120px;
	display: flex;
	position: relative;
	overflow: clip;
	margin-left: auto;
	margin-right: auto;
}
.mbl-closing:after {
	content: "";
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px var(--sheet-edge);
	pointer-events: none;
	z-index: 3;
	position: absolute;
	inset: 0;
}
.mbl-closing > * { z-index: 2; position: relative; }
.mbl-closing > .mbl-closing-ground {
	z-index: 0;
	will-change: transform;
	position: absolute;
	inset: 0 0 -48px;
}
.mbl-closing > .mbl-closing-ground .mbl-ground {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.mbl-closing .ow-ground-poster {
	position: absolute;
	inset: 0;
}
.mbl-closing .mbl-ground-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.mbl-closing > .mbl-closing-dots {
	z-index: 1;
	pointer-events: none;
	width: 100%;
	height: 100%;
	position: absolute;
	inset: 0;
}
.mbl-closing > .mbl-closing-grain {
	z-index: 1;
	pointer-events: none;
	opacity: .4;
	mix-blend-mode: overlay;
	will-change: transform;
	background-image: url("../assets/art/grain.svg");
	background-size: 180px 180px;
	animation: .333s step-end infinite mbl-film-grain;
	position: absolute;
	inset: -180px;
}
@keyframes mbl-film-grain {
	0% { transform: translate(0); }
	12.5% { transform: translate(-97px, 41px); }
	25% { transform: translate(53px, -128px); }
	37.5% { transform: translate(-29px, 113px); }
	50% { transform: translate(131px, 67px); }
	62.5% { transform: translate(-151px, -43px); }
	75% { transform: translate(17px, 149px); }
	87.5% { transform: translate(89px, -91px); }
}
.mbl-closing-h2 {
	letter-spacing: -.035em;
	text-align: center;
	text-wrap: balance;
	font-size: 52px;
	font-weight: 500;
	line-height: 58px;
}
.mbl-closing-sub {
	color: var(--foreground-muted);
	text-align: center;
	text-wrap: balance;
	padding-bottom: 4px;
	font-size: 17px;
	line-height: 26px;
	max-width: 52ch;
}