.yt{
	--yt-ink-soft:#4a4a4a;
	--yt-red:#FF0000;
	margin:0 auto;
	padding-block:var(--space-6) var(--space-16);
	font-family:var(--font-family);
	font-size:var(--font-size-base);
	line-height:var(--line-height-normal);
	color:var(--color-text);
	text-align:left;
}

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

:where(.yt) :where(h1,h2,h3,p,ul,ol){
	margin:0;
	padding:0;
}

:where(.yt) :where(ul,ol){
	list-style:none;
}

.yt-top{
	margin-bottom:var(--space-8);
}

.yt-top__logo{
	display:block;
	width:auto;
	height:32px;
	margin-bottom:var(--space-4);
}

.yt .yt-top__title{
	max-width:46rem;
	margin-bottom:var(--space-3);
	font-size:clamp(1.625rem,1.1rem + 1.8vw,2.5rem);
	font-weight:var(--font-weight-bold);
	line-height:1.1;
	letter-spacing:-.025em;
	color:var(--color-text);
}

.yt-top__lead{
	max-width:46rem;
	font-size:var(--font-size-lg);
	line-height:var(--line-height-relaxed);
	color:var(--yt-ink-soft);
}

.yt-steps{
	display:grid;
	grid-template-columns:repeat(4,minmax(0,1fr));
	gap:var(--space-4);
	margin-bottom:var(--space-5);
}

.yt-step{
	display:flex;
	flex-direction:column;
	gap:var(--space-3);
	padding:var(--space-5);
	background:var(--color-surface);
	border:1px solid var(--color-border);
	border-radius:var(--radius-xl);
	box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
}

.yt-step__head{
	display:flex;
	align-items:center;
	gap:var(--space-3);
}

.yt-step__num{
	display:flex;
	flex:none;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:var(--radius-full);
	background:color-mix(in srgb,var(--yt-red) 10%,#fff);
	font-size:var(--font-size-sm);
	font-weight:var(--font-weight-bold);
	color:var(--color-primary);
}

.yt .yt-step__title{
	font-size:var(--font-size-lg);
	font-weight:var(--font-weight-bold);
	line-height:var(--line-height-tight);
	color:var(--color-text);
}

.yt-step__text{
	line-height:var(--line-height-relaxed);
	color:var(--yt-ink-soft);
}

.yt-code{
	display:inline-block;
	max-width:100%;
	margin-top:var(--space-1);
	padding:1px var(--space-2);
	border-radius:var(--radius-sm);
	background:var(--color-bg-light-gray);
	border:1px solid var(--color-border-light);
	font-size:var(--font-size-sm);
	color:var(--color-text);
	overflow-wrap:anywhere;
}

.yt-step__shot{
	position:relative;
	display:block;
	margin-top:auto;
	overflow:hidden;
	aspect-ratio:16/9;
	border:1px solid var(--color-border);
	border-radius:var(--radius-md);
	background:var(--color-bg-light-gray);
	cursor:zoom-in;
}

.yt-step__shot img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	object-position:center;
}

.yt-step__zoom{
	position:absolute;
	right:var(--space-2);
	top:var(--space-2);
	display:flex;
	align-items:center;
	justify-content:center;
	width:32px;
	height:32px;
	border-radius:var(--radius-full);
	background:rgba(0,0,0,.55);
	color:#fff;
	transition:background var(--transition-fast),transform var(--transition-fast);
}

.yt-step__zoom svg{
	width:18px;
	height:18px;
}

.yt-step__shot:hover .yt-step__zoom{
	background:rgba(0,0,0,.75);
	transform:scale(1.08);
}

.yt-cta{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--space-5);
	margin-bottom:var(--space-10);
	padding:var(--space-5) var(--space-6);
	background:color-mix(in srgb,var(--color-secondary) 6%,#fff);
	border:1px solid color-mix(in srgb,var(--color-secondary) 20%,#fff);
	border-radius:var(--radius-xl);
}

.yt-cta__text{
	font-weight:var(--font-weight-semibold);
}

.yt-cta__actions{
	display:flex;
	flex:none;
	flex-wrap:wrap;
	gap:var(--space-3);
}

.yt-cta__actions .btn{
	min-height:44px;
	font-size:var(--font-size-base);
	font-weight:var(--font-weight-semibold);
}

.yt-cta__actions svg{
	width:18px;
	height:18px;
}

.yt .yt-ads__title{
	margin-bottom:var(--space-4);
	font-size:var(--font-size-2xl);
	font-weight:var(--font-weight-bold);
	line-height:1.2;
	letter-spacing:-.01em;
	color:var(--color-text);
}

.yt-ads .adc-rail{
	--adc-min:190px;
}

@media (max-width:1100px){
	.yt-steps{
		grid-template-columns:repeat(2,minmax(0,1fr));
	}
}

@media (max-width:840px){
	.yt-cta{
		flex-direction:column;
		align-items:flex-start;
	}
}

@media (max-width:720px){
	.yt{
		padding-inline:var(--space-3);
	}

	.yt-steps{
		grid-template-columns:minmax(0,1fr);
	}

	.yt-step{
		padding:var(--space-4);
	}

	.yt-cta{
		padding:var(--space-4);
	}

	.yt .yt-ads__title{
		font-size:var(--font-size-xl);
	}
}

@media (max-width:420px){
	.yt-cta__actions,
	.yt-cta__actions .btn{
		width:100%;
	}
}