.viewport-content {
	margin-inline-start: auto;
	margin-inline-end: auto;
	width: 980px;
}
@media (min-width: 1441px) {
	.viewport-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 980px;
	}
}
@media (max-width: 1068px) {
	.viewport-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 692px;
	}
}
@media (max-width: 734px) {
	.viewport-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 87.5%;
	}
}
@media (max-width: 480px) {
	.viewport-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 87.5%;
	}
}
.responsive-content {
	width: 87.5%;
}
.responsive-content, .responsive-content-max-width {
	margin-inline-start: auto;
	margin-inline-end: auto;
	max-width: 1680px;
}
.responsive-content-width {
	margin-inline-start: auto;
	margin-inline-end: auto;
	width: 87.5%;
}
.globalnav-placeholder {
	position: absolute;
}
.section-hero {
	--colornav-background-color: rgb(232, 232, 237, 70%);
	--colornav-label-color: rgb(29, 29, 31);
	--colornav-border-radius: 32px;
	--colornav-border-current: rgb(29, 29, 31);
	--sk-focus-color: #0071e3;
	--sk-focus-offset: 1px;
	--gradient-feather-width: 72px;
	--max-width: calc(2560px + var(--gradient-feather-width) * 2);
	--finish-dual-tone-purple: linear-gradient(
		135deg,
		var(--sk-wp-purple-logo) 50%,
		var(--sk-wp-purple-bg-1) 0
	);
	--finish-dual-tone-pink: linear-gradient(
		135deg,
		var(--sk-wp-pink-logo, "sa_store") 50%,
		var(--sk-wp-pink-bg-1, "sa_store") 0
	);
	--finish-dual-tone-red: linear-gradient(
		135deg,
		var(--sk-wp-red-logo, "sa_store") 50%,
		var(--sk-wp-yellow-bg-1, "sa_store") 0
	);
	--finish-dual-tone-green: linear-gradient(
		135deg,
		var(--sk-wp-green-logo, "sa_store") 50%,
		var(--sk-wp-green-bg-1, "sa_store") 0
	);
	--finish-dual-tone-blue: linear-gradient(
		135deg,
		var(--sk-wp-blue-logo, "sa_store") 50%,
		var(--sk-wp-blue-bg-1, "sa_store") 0
	);
	--hero-min-height: 720px;
	--hero-min-content-height: 800px;
	--hero-content-top-min: 150px;
	--colornav-border-width: 3.5px;
	--colornav-item-size: 59px;
	--colornav-swatch-size: 44px;
	--intro-logo-scale-start: 2.8;
	--intro-logo-max-visible-px: 355px;
	--intro-logo-min-scale: 0.5;
	--intro-logo-max-scale: 1;
	--gallery-gutter: 20px;
	--gallery-offset-x: 200px;
	--gallery-logo-offset-y: 0;
	--gallery-logo-min-padding: 90px;
	--gallery-margin-top: 50px;
	--gallery-tile-width: 980px;
	--gallery-tile-height-min: 338px;
	--gallery-tile-height-max: 636px;
	--color-ui-height: 222px;
	height: 100vh;
	height: 100dvh;
	min-height: calc(
		var(--gallery-tile-height-min) + var(--r-globalnav-height) +
			var(--color-ui-height) + var(--gallery-margin-top)
	);
	min-height: max(
		var(--gallery-tile-height-min) + var(--r-globalnav-height) +
			var(--color-ui-height) + var(--gallery-margin-top),
		var(--hero-min-height)
	);
	max-width: var(--max-width);
	overflow: hidden;
	position: relative;
	margin: 0 auto;
	transition: opacity 0.5s 0.25s;
}
@media (min-width: 1441px) {
	.section-hero {
		--intro-logo-scale-start: 2.74;
		--intro-logo-max-visible-px: 400px;
		--intro-logo-max-scale: 1.8;
		--gallery-offset-x: 300px;
		--gallery-tile-width: 1330px;
		--gallery-tile-height-min: 338px;
		--gallery-tile-height-max: 772px;
	}
}
@media (max-width: 1068px) {
	.section-hero {
		--hero-min-content-height: 800px;
		--colornav-item-size: 57px;
		--intro-logo-scale-start: 4.4;
		--intro-logo-max-visible-px: 520px;
		--gallery-offset-x: 200px;
		--gallery-tile-width: 643px;
		--gallery-tile-height-min: 670px;
		--gallery-tile-height-max: 858px;
	}
}
@media (max-width: 734px) {
	.section-hero {
		--hero-min-height: 400px;
		--hero-min-content-height: 700px;
		--hero-content-top-min: 100px;
		--colornav-border-width: 3px;
		--colornav-item-size: 48px;
		--colornav-swatch-size: 36px;
		--intro-logo-scale-start: 4;
		--intro-logo-max-visible-px: 287px;
		--intro-logo-min-scale: 0.4;
		--intro-logo-max-scale: 1.5;
		--gallery-offset-x: 250px;
		--gallery-logo-offset-y: 10px;
		--gallery-logo-min-padding: 30px;
		--gallery-margin-top: 20px;
		--gallery-tile-width: 245px;
		--gallery-tile-height-min: 400px;
		--gallery-tile-height-max: 531px;
		--color-ui-height: 157px;
	}
}
@media (max-height: 650px) and (min-width: 1069px) and (max-width: 1440px) {
	.section-hero {
		--gallery-tile-width: 800px;
	}
}
@media (max-height: 650px) and (min-width: 1441px) {
	.section-hero {
		--gallery-tile-width: 900px;
	}
}
html.reduced-motion .section-hero {
	transition: none;
}
.section-hero .section-content {
	margin-inline-start: auto;
	margin-inline-end: auto;
	width: 980px;
}
@media (min-width: 1441px) {
	.section-hero .section-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 980px;
	}
}
@media (max-width: 1068px) {
	.section-hero .section-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 692px;
	}
}
@media (max-width: 734px) {
	.section-hero .section-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 87.5%;
	}
}
@media (max-width: 480px) {
	.section-hero .section-content {
		margin-inline-start: auto;
		margin-inline-end: auto;
		width: 87.5%;
	}
}
.section-hero .tool-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	padding-top: calc(var(--r-globalnav-height) + var(--gallery-margin-top));
	box-sizing: border-box;
	height: 100%;
	min-height: calc(
		var(--gallery-tile-height-min) + var(--r-globalnav-height) +
			var(--color-ui-height) + var(--gallery-margin-top)
	);
	max-height: 100vh;
	max-height: 100dvh;
}
.section-hero .hero-content {
	position: absolute;
	top: max(17vh, var(--hero-content-top-min));
	top: max(17dvh, var(--hero-content-top-min));
	left: 0;
	right: 0;
	z-index: 1;
	pointer-events: none;
	padding-bottom: 40px;
}
.section-hero .canvas-container {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: opacity 0.5s;
	pointer-events: none;
}
html.reduced-motion .section-hero .canvas-container {
	transition: none;
}
.section-hero.ui-lock {
	pointer-events: none;
}
.section-hero:after, .section-hero:before {
	position: absolute;
	width: var(--gradient-feather-width);
	top: 0;
	bottom: 0;
	z-index: 1;
	pointer-events: none;
}
@media (min-width: 2704px) {
	.section-hero:after, .section-hero:before {
		content: "";
	}
}
.section-hero:after {
	right: -2px;
	background: linear-gradient(
		90deg,
		rgba(255, 255, 255, 0),
		rgb(255, 255, 255)
	);
}
.section-hero:before {
	left: -2px;
	background: linear-gradient(
		270deg,
		rgba(255, 255, 255, 0),
		rgb(255, 255, 255)
	);
}
.section-hero.state-init {
	opacity: 0;
}
.section-hero.state-intro .hero-content {
	pointer-events: auto;
}
.section-hero.state-intro .color-ui {
	pointer-events: none;
}
.section-hero.state-intro .gallery-item.current {
	z-index: 1;
}
.section-hero.state-intro .gallery-item.current .gallery-item-content {
	position: relative;
	will-change: transform, width, height;
}
.section-hero.state-intro .gallery-item.current .wallpaper-generator {
	border-radius: unset;
}
.section-hero.state-intro .gallery-item.current .wallpaper-generator-intro {
	display: block;
}
.section-hero.state-tool-custom .canvas-container {
	opacity: 1;
}
.section-hero.state-tool-custom .gallery-item.next .gallery-item-scale-reference {
	opacity: 0;
	transform: translate(var(--gallery-offset-x));
}
.section-hero.state-tool-custom .gallery-item.next .gallery-item-scale-reference:dir(rtl) {
	transform: translate(calc(var(--gallery-offset-x) * -1));
}
.section-hero.state-tool-custom .gallery-item.prev .gallery-item-scale-reference {
	opacity: 0;
	transform: translate(calc(var(--gallery-offset-x) * -1));
}
.section-hero.state-tool-custom .gallery-item.prev .gallery-item-scale-reference:dir(rtl) {
	transform: translate(var(--gallery-offset-x));
}
.section-hero .hero-eyebrow {
	display: inline-flex;
	margin-bottom: 14px;
}
@media (max-width: 1068px) {
	.section-hero .hero-eyebrow {
		margin-bottom: 11px;
	}
}
@media (max-width: 734px) {
	.section-hero .hero-eyebrow {
		margin-bottom: 12px;
	}
}
.section-hero .hero-headline {
	margin-top: 0;
	margin-inline-start: -3px;
	margin-bottom: 17px;
}
@media (max-width: 1068px) {
	.section-hero .hero-headline {
		margin-bottom: 19px;
	}
}
@media (max-width: 734px) {
	.section-hero .hero-headline {
		margin-inline-start: -2px;
		margin-bottom: 15px;
		line-height: 1;
	}
}
.dotnav {
	--sk-dotnav-background: rgba(0, 0, 0, 0.42);
	--sk-dotnav-background-hover: rgba(0, 0, 0, 0.54);
	--sk-dotnav-background-current: rgba(0, 0, 0, 0.8);
	--sk-dotnav-size: 8px;
	--sk-dotnav-margin-block: 0;
	--sk-dotnav-margin-inline: 8px;
	text-align: center;
	box-sizing: border-box;
}
.dotnav-items {
	margin: 0;
	list-style: none;
	display: inline-flex;
	justify-content: center;
}
.dotnav-item {
	list-style: none;
	margin-block: var(--sk-dotnav-margin-block);
	margin-inline: var(--sk-dotnav-margin-inline);
	position: relative;
}
.dotnav-item, .dotnav-link {
	width: var(--sk-dotnav-size);
	height: var(--sk-dotnav-size);
}
.dotnav-link {
	top: 0;
	left: 0;
	outline: none;
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
	padding: 0;
	background: var(--sk-dotnav-background);
}
.dotnav-link:hover {
	background: var(--sk-dotnav-background-hover);
}
.dotnav-link:focus-visible {
	outline: 2px solid var(--sk-focus-color, #0071e3);
	outline-offset: var(--sk-focus-offset-container, 3px);
}
.dotnav .current.dotnav-item .dotnav-link, .dotnav .current.dotnav-link {
	cursor: default;
	background: var(--sk-dotnav-background-current);
}
.dotnav-dark, .theme-light .dotnav.dotnav-dark {
	--sk-dotnav-background: rgba(255, 255, 255, 0.36);
	--sk-dotnav-background-hover: rgba(255, 255, 255, 0.48);
	--sk-dotnav-background-current: rgba(255, 255, 255, 0.8);
}
.dotnav-light, .theme-dark .dotnav.dotnav-light {
	--sk-dotnav-background: rgba(0, 0, 0, 0.42);
	--sk-dotnav-background-hover: rgba(0, 0, 0, 0.54);
	--sk-dotnav-background-current: rgba(0, 0, 0, 0.8);
}
.gallery-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.5s;
}
.gallery-container.loaded {
	opacity: 1;
}
html.reduced-motion .gallery-container {
	transition: none;
}
.gallery, .item-container {
	position: relative;
}
.item-container {
	margin: 0 auto;
	transition: opacity 0.5s;
	width: calc(var(--gallery-tile-width) + var(--gallery-gutter));
	height: calc(
		100dvh - var(--r-globalnav-height) - var(--color-ui-height) -
			var(--gallery-margin-top)
	);
	min-height: var(--gallery-tile-height-min);
	max-height: var(--gallery-tile-height-max);
}
html.reduced-motion .item-container {
	transition: none;
}
.gallery-item {
	width: 100%;
	height: 100%;
	position: absolute;
	padding: 0 calc(var(--gallery-gutter) * 0.5);
	box-sizing: border-box;
	--abs: Max(var(--progress), var(--progress) * -1);
	--progress-0-1: clamp(0, var(--abs), 1);
	--progress-1-1: clamp(-1, var(--progress), 1);
}
.gallery-item.next, .gallery-item.prev {
	cursor: pointer;
}
.gallery-item-scale-reference {
	width: 100%;
	height: 100%;
	transition:
		transform 0.5s,
		opacity 0.5s;
}
html.reduced-motion .gallery-item-scale-reference {
	transition: none;
}
.gallery-item-content {
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.color-ui {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 0;
}
@media (max-width: 734px) {
	.color-ui {
		padding: 24px 0 32px;
	}
}
.color-ui .colornavs {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.color-ui .colornav-container {
	position: relative;
	padding-inline-end: 11px;
}
@media (max-width: 1068px) {
	.color-ui .colornav-container {
		padding-inline-end: 13px;
	}
}
@media (max-width: 734px) {
	.color-ui .colornav-container {
		padding-inline-end: 11px;
	}
}
.color-ui .divider {
	display: inline-block;
	width: 0;
	border-left: 1.5px solid #e8e8ed;
	border-right: 1.5px solid #e8e8ed;
	border-radius: 100px;
	height: 48px;
}
@media (max-width: 734px) {
	.color-ui .divider {
		height: 40px;
	}
}
.color-ui .colornav {
	display: inline-flex;
	text-align: center;
	justify-content: center;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	transition:
		visibility 0.4s,
		opacity 0.4s;
}
html.reduced-motion .color-ui .colornav {
	transition: none;
}
.color-ui .colornav:not(:first-child) {
	position: absolute;
	top: 0;
	inset-inline-start: 0;
}
.color-ui .colornav.current {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}
.color-ui .colornav .colornav-items {
	list-style-type: none;
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
.color-ui .colornav .colornav-items .colornav-item {
	line-height: 1;
	will-change: transform;
	margin: 0 4.6px;
}
@media (max-width: 1068px) {
	.color-ui .colornav .colornav-items .colornav-item {
		margin: 0 5.5px;
	}
}
@media (max-width: 734px) {
	.color-ui .colornav .colornav-items .colornav-item {
		margin: 0 4.5px;
	}
}
@media (max-width: 360px) {
	.color-ui .colornav .colornav-items .colornav-item {
		margin: 0 0.25vw;
	}
}
.color-ui .colornav .colornav-items .colornav-item .colornav-link.current, .color-ui .colornav .colornav-items .colornav-item .colornav-value:checked ~ .colornav-link {
	color: var(--colornav-label-color);
	border-color: var(--colornav-border-current);
	cursor: default;
}
.color-ui .colornav .colornav-items .colornav-item .colornav-link {
	border: var(--colornav-border-width) solid rgba(0, 0, 0, 0);
	color: var(--colornav-label-color);
	border-radius: 50%;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex;
	padding: calc(
		var(--colornav-item-size) / 2 - var(--colornav-swatch-size) / 2 -
			var(--colornav-border-width)
	);
	width: var(--colornav-item-size);
	height: var(--colornav-item-size);
	position: relative;
	z-index: 1;
}
.color-ui .colornav .colornav-items .colornav-item .colornav-link .colornav-swatch {
	border-radius: 50%;
	display: block;
	width: var(--colornav-swatch-size);
	height: var(--colornav-swatch-size);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-dual-purple {
	background: var(--finish-dual-tone-purple);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-dual-pink {
	background: var(--finish-dual-tone-pink);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-dual-red {
	background: var(--finish-dual-tone-red);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-dual-green {
	background: var(--finish-dual-tone-green);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-dual-blue {
	background: var(--finish-dual-tone-blue);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-background-purple {
	background: var(--sk-wp-purple-bg-1);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-background-pink {
	background: var(--sk-wp-pink-bg-1);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-background-yellow {
	background: var(--sk-wp-yellow-bg-1);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-background-green {
	background: var(--sk-wp-green-bg-1);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-background-blue {
	background: var(--sk-wp-blue-bg-1);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-foreground-purple {
	background: var(--sk-wp-purple-logo);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-foreground-pink {
	background: var(--sk-wp-pink-logo);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-foreground-red {
	background: var(--sk-wp-red-logo);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-foreground-green {
	background: var(--sk-wp-green-logo);
}
.color-ui .colornav .colornav-items .colornav-item .viewer-colornav-swatch-foreground-blue {
	background: var(--sk-wp-blue-logo);
}
.color-ui .colornav-button-bg {
	list-style-type: none;
	display: inline-flex;
	flex-wrap: wrap;
	vertical-align: bottom;
}
.color-ui .color-ui-download, .color-ui .colornav-button-bg .icon {
	display: flex;
	justify-content: center;
	align-items: center;
}
.color-ui .color-ui-download {
	grid-gap: 10px;
	gap: 10px;
	transition: opacity 0.25s;
	padding: 10.75px 22px;
	margin-inline-start: 24px;
}
@media (max-width: 1068px) {
	.color-ui .color-ui-download {
		padding: 10px 20px;
		margin-inline-start: 25px;
	}
}
@media (max-width: 734px) {
	.color-ui .color-ui-download {
		padding: 10px 6px;
		margin-inline-start: 21px;
	}
}
.color-ui .color-ui-download.disabled {
	pointer-events: none;
	opacity: 0.5;
}
.color-ui .color-ui-download .color-ui-download-icon {
	display: none;
}
@media (max-width: 734px) {
	.color-ui .color-ui-download .color-ui-download-icon {
		display: block;
	}
}
@media (max-width: 734px) {
	.color-ui .color-ui-download .color-ui-download-label {
		display: none;
	}
}
.color-ui .color-ui-download .wallpaper-generator {
	position: absolute;
}
.color-ui .tab-buttons {
	display: flex;
	grid-gap: 12px;
	gap: 12px;
	margin-bottom: 25px;
}
@media (max-width: 734px) {
	.color-ui .tab-buttons {
		grid-gap: 14.4px;
		gap: 14.4px;
		margin-bottom: 18px;
	}
}
.color-ui .tab-buttons .button {
	color: #1d1d1f;
	background-color: #fafafc;
	transition:
		box-shadow 0.5s,
		background-color 0.5s;
	padding: 10px 22px;
}
@media (max-width: 1068px) {
	.color-ui .tab-buttons .button {
		padding: 11.5px 22px;
	}
}
@media (max-width: 734px) {
	.color-ui .tab-buttons .button {
		padding: 12px 16px;
	}
}
.color-ui .tab-buttons .button.current {
	background-color: #fff;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}
.wallpaper-generator {
	position: relative;
	display: flex;
	border-radius: 30px;
	overflow: hidden;
}
.wallpaper-generator .foreground-source img, .wallpaper-generator .foreground-source picture {
	opacity: 0;
	width: 1px;
	height: 1px;
	position: absolute;
}
.wallpaper-generator-intro {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: none;
}
.button-expander {
	--padding-vertical: 10px;
	--padding-horizontal: 22px;
	--floating-bg-buffer: 17px;
	color: #1d1d1f;
	background-color: #fafafc;
	border-radius: 980px;
	display: flex;
	position: relative;
}
@media (max-width: 1068px) {
	.button-expander {
		--padding-vertical: 11.5px;
	}
}
@media (max-width: 734px) {
	.button-expander {
		--padding-vertical: 13px;
		--padding-horizontal: 14px;
		--floating-bg-buffer: 10px;
	}
}
.button-expander-option-container {
	display: flex;
	position: absolute;
}
.button-expander-option-content {
	display: flex;
	position: relative;
}
.button-expander-default, .button-expander-option {
	flex-grow: 0;
	flex-shrink: 0;
	padding: var(--padding-vertical) var(--padding-horizontal);
	box-sizing: border-box;
	z-index: 1;
}
.button-expander-option:not(.button-expander-option-first) {
	transition: opacity 0.25s;
}
html.reduced-motion .button-expander-option:not(.button-expander-option-first) {
	transition: none;
}
.button-expander-floating-bg {
	position: absolute;
	background-color: #fff;
	top: 4px;
	bottom: 4px;
	border-radius: 980px;
	pointer-events: none;
	transition:
		opacity 0.25s,
		width 0.25s,
		left 0.25s,
		right 0.25s;
	box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}
html.reduced-motion .button-expander-floating-bg {
	transition: none;
}
.button-expander.contracted .button-expander-option {
	opacity: 0;
	transition: opacity 0.15s;
}
html.reduced-motion .button-expander.contracted .button-expander-option {
	transition: none;
}
.button-expander.contracted .button-expander-floating-bg, .button-expander.expanded .button-expander-default {
	opacity: 0;
}