

.devm-sl-page{overflow:hidden}
.devm-sl-guide{padding:2.4rem;border-top:3px solid var(--c-fg,#1E293B);background:var(--c-surface-2,#F1F5F9)}
.devm-sl-guide__eyebrow{color:var(--c-accent-deep,#1D4ED8);font-size:var(--fs-xs,.75rem);font-weight:800;letter-spacing:.14em}
.devm-sl-guide h2{margin-top:.65rem;font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.04em;text-wrap:balance}
.devm-sl-guide>p:not(.devm-sl-guide__eyebrow){max-width:780px;margin-top:1rem;color:var(--c-fg-2,#475569);font-size:var(--fs-sm,.875rem);line-height:1.8;word-break:keep-all}
.devm-sl-guide__codes{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin-top:1.7rem;background:var(--c-line,#E2E8F0)}
.devm-sl-guide__codes>div{min-width:0;padding:1.1rem 1.2rem;background:var(--c-surface,#fff)}
.devm-sl-guide__codes b{display:block;margin-bottom:.5rem;color:var(--c-fg,#1E293B);font-size:var(--fs-sm,.875rem)}
.devm-sl-guide__codes code{display:block;overflow-x:auto;padding:.65rem .75rem;background:var(--c-fg,#1E293B);color:var(--c-surface,#fff);font-size:var(--fs-xs,.75rem);line-height:1.6;white-space:nowrap}
.devm-sl-guide__codes small{display:block;margin-top:.5rem;color:var(--c-fg-3,#64748B);font-size:var(--fs-xs,.75rem);line-height:1.6}
.devm-sl-guide__codes small code{display:inline;padding:0;background:transparent;color:inherit}
.devm-sl-guide__nav{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.25rem}
.devm-sl-guide__nav a{display:inline-flex;align-items:center;min-height:38px;padding:.45rem .85rem;border:1px solid var(--c-line,#E2E8F0);background:var(--c-surface,#fff);color:var(--c-fg-2,#475569);font-size:var(--fs-xs,.75rem);font-weight:800}
.devm-sl-guide__nav a:hover,.devm-sl-guide__nav a:focus-visible{border-color:var(--c-accent,#2563EB);color:var(--c-accent-deep,#1D4ED8)}
.devm-sl-guide__nav a:focus-visible{outline:2px solid var(--c-accent,#2563EB);outline-offset:2px}

.devm-sl-grp{scroll-margin-top:9.5rem}
.devm-sl-grp:first-of-type{margin-top:var(--sp-7,4rem)}
.devm-sl-grp+.devm-sl-grp{margin-top:var(--sp-7,4rem)}
.devm-sl-grp__hd{padding-bottom:1rem;border-bottom:2px solid var(--c-fg,#1E293B)}
.devm-sl-grp__hd h2{font-size:var(--fs-h3,1.5rem);letter-spacing:-.03em}
.devm-sl-grp__hd p{margin-top:.5rem;color:var(--c-fg-3,#64748B);font-size:var(--fs-sm,.875rem);word-break:keep-all}
.devm-sl-grp__hd em{
	display:inline-block;margin-top:.6rem;padding:.2rem .55rem;
	background:var(--c-surface-2,#F1F5F9);color:var(--c-fg-2,#475569);
	font-size:var(--fs-xs,.75rem);font-style:normal;font-weight:700;
}

.devm-sl{padding:2.5rem 0;border-bottom:1px solid var(--c-line,#E2E8F0)}
.devm-sl__hd{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem}
.devm-sl__hd h3{font-size:1.15rem;letter-spacing:-.03em}
.devm-sl__hd code{
	padding:.15rem .45rem;background:var(--c-surface-2,#F1F5F9);
	color:var(--c-fg-3,#64748B);font-size:var(--fs-xs,.75rem);
}
.devm-sl__width{display:flex;margin-left:auto;border:1px solid var(--c-line,#E2E8F0)}
.devm-sl__width button{min-height:34px;padding:.35rem .75rem;border:0;background:var(--c-surface,#fff);color:var(--c-fg-3,#64748B);font-size:var(--fs-xs,.75rem);font-weight:800;cursor:pointer}
.devm-sl__width button+button{border-left:1px solid var(--c-line,#E2E8F0)}
.devm-sl__width button[aria-pressed="true"]{background:var(--c-fg,#1E293B);color:var(--c-surface,#fff)}
.devm-sl__width button:focus-visible{position:relative;z-index:1;outline:2px solid var(--c-accent,#2563EB);outline-offset:2px}
.devm-sl__desc{margin-top:.4rem;color:var(--c-fg-3,#64748B);font-size:var(--fs-sm,.875rem);word-break:keep-all}
.devm-sl__use{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem .8rem;align-items:center;margin-top:1rem;padding:.8rem 1rem;border-left:3px solid var(--c-accent,#2563EB);background:var(--c-surface-2,#F1F5F9)}
.devm-sl__use b{color:var(--c-fg,#1E293B);font-size:var(--fs-xs,.75rem)}
.devm-sl__use code{min-width:0;overflow-x:auto;color:var(--c-accent-deep,#1D4ED8);font-size:var(--fs-xs,.75rem);white-space:nowrap}
.devm-sl__use small{grid-column:2;color:var(--c-fg-3,#64748B);font-size:.7rem}
.devm-sl__demo{margin-top:1.5rem;padding:1.5rem;background:var(--c-surface,#fff);box-shadow:var(--sh-1,0 1px 2px rgba(15,23,42,.06))}
.devm-sl--full .devm-sl__demo{position:relative;left:50%;width:100vw;margin-left:-50vw;padding:2rem 1.25rem;background:var(--c-surface-2,#F1F5F9);box-shadow:none}
.devm-sl__none{
	padding:2.5rem 1rem;background:var(--c-surface-2,#F1F5F9);
	color:var(--c-fg-3,#64748B);font-size:var(--fs-sm,.875rem);text-align:center;
}

@media (max-width:767px){
	.devm-sl-guide{padding:1.5rem 1.1rem}
	.devm-sl-guide__codes{grid-template-columns:1fr}
	.devm-sl-guide__nav{display:grid;grid-template-columns:1fr 1fr}
	.devm-sl-guide__nav a{justify-content:center}
	.devm-sl{padding:2rem 0}
	.devm-sl__hd{align-items:flex-start}
	.devm-sl__width{flex:1 0 100%;margin-left:0}
	.devm-sl__width button{flex:1}
	.devm-sl__use{display:block}
	.devm-sl__use code,.devm-sl__use small{display:block;margin-top:.45rem}
	.devm-sl__demo{padding:1rem}
	.devm-sl--full .devm-sl__demo{padding:1.5rem 1rem}
}
