.lyor-laptop {
	--lyor-laptop-width: 100%;
	--lyor-laptop-screen-scale-x: 100%;
	--lyor-laptop-screen-overscan: 12px;
	--lyor-laptop-screen-offset-x: calc(var(--lyor-laptop-screen-overscan) * -0.5);
	--lyor-laptop-screen-user-x: 0px;
	--lyor-laptop-screen-user-y: 0px;
	--lyor-laptop-gap: 18px;
	--lyor-laptop-panel-bg: #181513;
	--lyor-laptop-text: #f3eee7;
	--lyor-laptop-muted: rgba(243, 238, 231, 0.66);
	--lyor-laptop-accent: #caa16a;
	--lyor-laptop-frame: #0f0d0c;
	display: grid;
	gap: var(--lyor-laptop-gap);
	width: min(100%, var(--lyor-laptop-width));
	margin: 0 auto;
	padding: clamp(16px, 2vw, 30px);
	border-radius: 28px;
	background:
		radial-gradient(circle at top left, rgba(255, 255, 255, 0.06), transparent 34%),
		linear-gradient(180deg, color-mix(in srgb, var(--lyor-laptop-panel-bg) 96%, #ffffff 4%), color-mix(in srgb, var(--lyor-laptop-panel-bg) 88%, transparent 12%));
	color: var(--lyor-laptop-text);
	overflow: clip;
}

.lyor-laptop.is-editorial {
	background:
		radial-gradient(circle at top left, rgba(255, 255, 255, 0.08), transparent 30%),
		linear-gradient(180deg, #12100f, #1b1714);
	--lyor-laptop-panel-bg: #12100f;
	--lyor-laptop-text: #f4efe7;
	--lyor-laptop-muted: rgba(244, 239, 231, 0.68);
	--lyor-laptop-frame: #0b0b0d;
}

.lyor-laptop.is-ivory {
	background:
		linear-gradient(180deg, #fcf8f1, #efe8dd);
	--lyor-laptop-panel-bg: #fcf8f1;
	--lyor-laptop-text: #191714;
	--lyor-laptop-muted: rgba(25, 23, 20, 0.6);
	--lyor-laptop-accent: #c98d47;
}

.lyor-laptop.is-glass {
	background:
		linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.12));
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(255,255,255,0.18);
}

.lyor-laptop.is-playful {
	background:
		radial-gradient(circle at top left, rgba(255, 214, 155, 0.75), transparent 35%),
		radial-gradient(circle at bottom right, rgba(255, 173, 173, 0.4), transparent 30%),
		linear-gradient(180deg, #fff9f2, #ffeede);
	--lyor-laptop-text: #2d1d11;
	--lyor-laptop-muted: rgba(45, 29, 17, 0.62);
	--lyor-laptop-accent: #ff9f6e;
	--lyor-laptop-frame: #291b16;
}

.lyor-laptop.is-transparent {
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.lyor-laptop__copy {
	display: grid;
	gap: 8px;
	max-width: 780px;
}

.lyor-laptop__title {
	margin: 0;
	font-size: clamp(28px, 4vw, 46px);
	line-height: 1.02;
	letter-spacing: -0.04em;
	color: var(--lyor-laptop-text);
	text-wrap: balance;
}

.lyor-laptop__description {
	margin: 0;
	max-width: 58ch;
	font-size: clamp(14px, 1.5vw, 18px);
	line-height: 1.62;
	color: var(--lyor-laptop-muted);
}

.lyor-laptop__device-wrap {
	position: relative;
	width: min(100%, var(--lyor-laptop-width));
	margin: 0 auto;
}

.lyor-laptop__device-shell {
	position: relative;
	width: 100%;
	aspect-ratio: 656 / 411.8;
}

.lyor-laptop__screen-clip {
	position: absolute;
	top: 0;
	right: 11%;
	bottom: 4.55%;
	left: 11%;
	border-radius: 0;
	overflow: hidden;
	background: #000;
	box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
	z-index: 1;
}

.lyor-laptop.is-shadowless .lyor-laptop__screen-clip {
	box-shadow: none;
}

.lyor-laptop__screen-link,
.lyor-laptop__screen-media {
	display: block;
	width: 100%;
	height: 100%;
}

.lyor-laptop__screen-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.lyor-laptop[data-lyor-laptop-fit="contain"] .lyor-laptop__screen-media {
	display: flex;
	justify-content: center;
	align-items: center;
}

.lyor-laptop__screen-image {
	display: block;
	width: calc(var(--lyor-laptop-screen-scale-x) + var(--lyor-laptop-screen-overscan));
	max-width: none;
	min-width: calc(100% + var(--lyor-laptop-screen-overscan));
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
	transform: translate3d(calc(var(--lyor-laptop-screen-offset-x) + var(--lyor-laptop-screen-user-x)), var(--lyor-laptop-screen-user-y), 0);
	will-change: transform;
	backface-visibility: hidden;
}

.lyor-laptop[data-lyor-laptop-fit="contain"] .lyor-laptop__screen-image {
	position: static;
	width: auto;
	max-width: 100%;
	min-width: 0;
	height: auto;
	max-height: 100%;
	transform: none;
}

.lyor-laptop[data-lyor-laptop-fit="original"] .lyor-laptop__screen-image {
	position: static;
	width: auto;
	max-width: none;
	min-width: 0;
	height: auto;
	transform: none;
}

.lyor-laptop__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 2;
	pointer-events: none;
	filter:
		drop-shadow(0 18px 38px rgba(0, 0, 0, 0.18))
		drop-shadow(0 6px 14px rgba(0, 0, 0, 0.10));
}

.lyor-laptop.is-shadowless .lyor-laptop__frame {
	filter: none;
}

.lyor-laptop__dock {
	width: 84%;
	height: 18px;
	margin: -8px auto 0;
	border-radius: 999px;
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--lyor-laptop-frame) 24%, #ffffff 76%), color-mix(in srgb, var(--lyor-laptop-frame) 54%, #d5d5d7 46%));
	box-shadow:
		0 8px 18px rgba(0,0,0,0.06),
		inset 0 1px 0 rgba(255,255,255,0.55);
}

.lyor-laptop.is-shadowless .lyor-laptop__dock {
	box-shadow: none;
}

.lyor-laptop__placeholder {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	padding: 22px;
	font-size: 14px;
	color: rgba(255,255,255,0.72);
	text-align: center;
	background:
		linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
}

.lyor-laptop.is-playful .lyor-laptop__dock {
	background: linear-gradient(180deg, #fff7ef, #ffd7c0);
}

.lyor-laptop.is-editorial .lyor-laptop__dock {
	background: linear-gradient(180deg, #cacaca, #7f7f86);
}

.lyor-laptop.is-glass .lyor-laptop__dock {
	background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.3));
}

@media (max-width: 1024px) {
	.lyor-laptop {
		padding: 18px;
		border-radius: 24px;
	}

	.lyor-laptop.is-transparent {
		padding: 0;
		border-radius: 0;
	}
}

@media (max-width: 767px) {
	.lyor-laptop {
		padding: 14px;
		border-radius: 20px;
	}

	.lyor-laptop.is-transparent {
		padding: 0;
		border-radius: 0;
	}

	.lyor-laptop__dock {
		width: 74%;
		height: 12px;
		margin-top: -4px;
	}
}