/* ==========================================================
   UI/UX Design page styles
   Loaded by templates/views/assets/ui-ux.html
   ========================================================== */

.ux-app {
	display: grid;
	grid-template-rows: auto 1fr;
	height: 480px;
	background: #fff;
}
.ux-top {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 48px;
	padding: 0 16px;
	color: #fff;
	background: #1e1e24;
	font-size: 13px;
}
.ux-logo {
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: conic-gradient(#e2774a 0 25%, #6667ab 0 50%, #00a676 0 75%, #0072ce 0);
}
.ux-tools {
	display: flex;
	gap: 4px;
}
.ux-tools i {
	width: 26px;
	height: 26px;
	border-radius: 7px;
	background: rgba(255, 255, 255, 0.08);
}
.ux-tools i.on {
	background: #6667ab;
}
.ux-top b {
	flex: 1;
	text-align: center;
	font-weight: 400;
	color: #c9ced6;
}
.ux-avs {
	display: flex;
}
.ux-avs i {
	width: 26px;
	height: 26px;
	margin-left: -6px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 11px;
	background: var(--c);
	box-shadow: 0 0 0 2px #1e1e24;
}
.ux-top em {
	font-style: normal;
	padding: 6px 12px;
	border-radius: 8px;
	background: #0072ce;
}
.ux-body {
	display: grid;
	grid-template-columns: 170px 1fr 190px;
	min-height: 0;
}
.ux-layers,
.ux-props {
	padding: 14px;
	font-size: 12.5px;
	color: var(--ink-2);
	border-right: 1px solid var(--line);
	background: #fbfbfa;
}
.ux-props {
	border-right: 0;
	border-left: 1px solid var(--line);
}
.ux-layers small,
.ux-props small {
	display: block;
	margin-bottom: 10px;
	font: 400 10.5px/1 var(--font-mono);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ux-layers i {
	display: block;
	font-style: normal;
	padding: 6px 8px;
	border-radius: 6px;
}
.ux-layers i.on {
	background: color-mix(in srgb, var(--tone-2) 14%, #fff);
}
.ux-props div {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid var(--line);
}
.ux-props span {
	color: var(--subtle);
}
.ux-props b {
	font-weight: 400;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.ux-props b i {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: #e2774a;
}
.ux-props b.h {
	transition: color 0.4s;
}
.ux-app[data-step='2'] .ux-props b.h,
.ux-app[data-step='3'] .ux-props b.h {
	color: #e2774a;
}
.ux-props .pass {
	color: #0b6b4f;
}
.ux-canvas {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	overflow: hidden;
	background-color: #f2f1ee;
	background-image: radial-gradient(rgba(16, 24, 32, 0.12) 1px, transparent 1px);
	background-size: 18px 18px;
}
.ux-board small {
	display: block;
	margin-bottom: 6px;
	font: 400 10.5px/1 var(--font-mono);
	color: var(--subtle);
}
.ux-board > div {
	display: grid;
	gap: 8px;
	align-content: start;
	width: 130px;
	height: 250px;
	padding: 14px 12px;
	border-radius: 16px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-md);
}
.ux-board b {
	height: 12px;
	width: 70%;
	border-radius: 6px;
	background: var(--ink);
}
.ux-board i,
.ux-board span {
	display: block;
	height: 34px;
	border-radius: 9px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ux-board em {
	display: block;
	margin-top: auto;
	height: 30px;
	border-radius: 9px;
	background: #e2774a;
	transition: height 0.5s var(--ease);
}
.ux-app[data-step='2'] .b2 em,
.ux-app[data-step='3'] .b2 em {
	height: 40px;
	box-shadow:
		0 0 0 2px #fff,
		0 0 0 4px #0072ce;
}
.ux-board .ok {
	place-items: center;
	align-content: center;
	text-align: center;
}
.ux-board .ok i {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-style: normal;
	color: #fff;
	background: #00a676;
	box-shadow: none;
}
.ux-board .ok span {
	width: 80%;
	height: 8px;
}
.ux-arrow {
	position: absolute;
	top: 50%;
	width: 40px;
	height: 2px;
	background: #6667ab;
	opacity: 0;
	transition: opacity 0.5s;
}
.ux-arrow::after {
	content: '';
	position: absolute;
	right: -2px;
	top: -4px;
	border: 5px solid transparent;
	border-left: 7px solid #6667ab;
}
.ux-arrow.a1 {
	left: calc(50% - 125px);
}
.ux-arrow.a2 {
	left: calc(50% + 85px);
}
.ux-app[data-step='3'] .ux-arrow {
	opacity: 1;
}
.ux-pin {
	position: absolute;
	left: calc(50% + 10px);
	top: 70%;
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 220px;
	opacity: 0;
	transform: scale(0.9);
	transform-origin: left top;
	transition:
		opacity 0.4s,
		transform 0.4s var(--ease);
}
.ux-pin i {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50% 50% 50% 4px;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 11px;
	color: #fff;
	background: #6667ab;
}
.ux-pin span {
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 12px;
	line-height: 1.4;
	background: #fff;
	box-shadow: var(--shadow-md);
}
.ux-app[data-step='1'] .ux-pin,
.ux-app[data-step='2'] .ux-pin {
	opacity: 1;
	transform: none;
}
.ux-cur {
	position: absolute;
	z-index: 3;
	transition:
		left 1.1s var(--ease),
		top 1.1s var(--ease);
}
.ux-cur svg {
	width: 18px;
	height: 18px;
}
.ux-cur em {
	position: absolute;
	left: 14px;
	top: 16px;
	padding: 3px 7px;
	border-radius: 6px;
	font: 400 10.5px/1.3 var(--font-mono);
	font-style: normal;
	color: #fff;
	white-space: nowrap;
	background: #e2774a;
}
.ux-cur.r em {
	background: #6667ab;
}
.ux-app[data-step='0'] .ux-cur.d {
	left: 30%;
	top: 40%;
}
.ux-app[data-step='1'] .ux-cur.d {
	left: 55%;
	top: 30%;
}
.ux-app[data-step='2'] .ux-cur.d {
	left: 52%;
	top: 76%;
}
.ux-app[data-step='3'] .ux-cur.d {
	left: 70%;
	top: 50%;
}
.ux-app[data-step='0'] .ux-cur.r {
	left: 64%;
	top: 70%;
}
.ux-app[data-step='1'] .ux-cur.r {
	left: 54%;
	top: 72%;
}
.ux-app[data-step='2'] .ux-cur.r {
	left: 32%;
	top: 66%;
}
.ux-app[data-step='3'] .ux-cur.r {
	left: 40%;
	top: 24%;
}

/* pan */
.ux-pan-stick {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding-top: var(--header-h);
}
.ux-pan .e-head {
	margin-bottom: 32px;
}
.ux-track {
	--gap: 24px;
	display: flex;
	gap: var(--gap);
	width: max-content;
	padding: 0 max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	transform: translateX(calc(var(--p, 0) * (100vw - 100%)));
	will-change: transform;
}
.ux-art {
	flex: none;
	width: min(460px, 78vw);
	height: min(400px, 54vh);
	display: flex;
	flex-direction: column;
	padding: 24px;
	border-radius: 26px;
	background-color: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-md);
}
.ux-art small {
	font: 400 11.5px/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--tone);
}
.ux-art h3 {
	margin-top: 10px;
	font: 400 1.4rem/1.2 var(--font-display);
	letter-spacing: -0.015em;
}
.ux-art > div {
	flex: 1;
	margin-top: 18px;
	min-height: 0;
}
.ux-notes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	align-content: start;
}
.ux-notes i {
	padding: 10px;
	min-height: 80px;
	border-radius: 4px;
	font-style: normal;
	font-size: 12.5px;
	line-height: 1.4;
	color: #5a4a2a;
	background: #ffe9a8;
	transform: rotate(var(--r));
	box-shadow: 0 6px 12px -8px rgba(0, 0, 0, 0.3);
}
.ux-notes i:nth-child(2n) {
	background: #ffd4c2;
}
.ux-notes i:nth-child(3n) {
	background: #d6e8ff;
}
.ux-flow {
	display: grid;
	gap: 8px;
	align-content: start;
}
.ux-flow span {
	position: relative;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ux-flow span.pain {
	color: #9a4a1c;
	background: rgba(226, 119, 74, 0.14);
	box-shadow: inset 0 0 0 1.5px #e2774a;
}
.ux-cap {
	margin-top: 10px;
	font-size: 13px;
	color: var(--muted);
}
.ux-wf {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}
.ux-wf > div {
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 14px;
	border-radius: 14px;
	border: 1.5px dashed #cfd3d8;
}
.ux-wf b {
	height: 12px;
	width: 60%;
	border-radius: 6px;
	box-shadow: inset 0 0 0 1.5px #cfd3d8;
}
.ux-wf i {
	height: 36px;
	border-radius: 8px;
	box-shadow: inset 0 0 0 1.5px #cfd3d8;
}
.ux-wf em {
	height: 30px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1.5px #cfd3d8;
	margin-top: 10px;
}
.ux-ui > div {
	display: grid;
	gap: 10px;
	max-width: 280px;
	padding: 18px;
	border-radius: 18px;
	background: linear-gradient(180deg, color-mix(in srgb, #e2774a 8%, #fff), #fff 40%);
	box-shadow: 0 0 0 1px var(--line);
	font-size: 13px;
}
.ux-ui b {
	font: 400 17px/1.2 var(--font-display);
}
.ux-ui span {
	display: block;
	padding: 9px 12px;
	border-radius: 11px;
	color: var(--subtle);
	font-size: 11.5px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}
.ux-ui span em {
	display: block;
	font-style: normal;
	font-size: 13.5px;
	color: var(--ink);
}
.ux-ui span.hi {
	box-shadow: 0 0 0 1.5px #00a676;
}
.ux-ui i {
	padding: 13px;
	border-radius: 12px;
	text-align: center;
	font-style: normal;
	color: #fff;
	background: #e2774a;
}
.ux-proto {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 18px;
	align-items: center;
}
.ux-proto .ph {
	position: relative;
	display: grid;
	gap: 8px;
	align-content: start;
	height: 230px;
	padding: 30px 10px 10px;
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 0 0 5px #101820;
}
.ux-proto .ph b {
	height: 10px;
	width: 60%;
	border-radius: 5px;
	background: var(--ink);
}
.ux-proto .ph i {
	height: 70px;
	border-radius: 10px;
	background: var(--paper);
}
.ux-proto .ph em {
	margin-top: auto;
	height: 34px;
	border-radius: 10px;
	background: #e2774a;
}
.ux-proto .tap {
	position: absolute;
	left: 50%;
	bottom: 22px;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	border-radius: 50%;
	background: rgba(102, 103, 171, 0.45);
	animation: ux-tap 1.8s ease-out infinite;
}
@keyframes ux-tap {
	0% {
		transform: scale(0.4);
		opacity: 1;
	}
	100% {
		transform: scale(1.8);
		opacity: 0;
	}
}
.ux-proto .res b {
	font: 400 1.3rem/1 var(--font-display);
}
.ux-proto .res > span {
	display: block;
	margin-top: 4px;
	color: var(--muted);
	font-size: 13px;
}
.ux-proto .bar {
	display: grid;
	grid-template-columns: 1fr 50px;
	gap: 8px;
	align-items: center;
	margin-top: 12px;
	font-size: 12px;
	color: var(--muted);
}
.ux-proto .bar i {
	height: 12px;
	width: var(--w);
	border-radius: 6px;
	background: #c9ced6;
}
.ux-proto .bar:nth-of-type(2) i {
	background: linear-gradient(90deg, #e2774a, #6667ab);
}
.ux-proto .bar em {
	font-style: normal;
}
.ux-proto small {
	display: block;
	margin-top: 12px;
	font: 400 10.5px/1 var(--font-mono);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ux-pan-bar {
	height: 2px;
	margin-top: 32px;
	border-radius: 2px;
	background: var(--line-strong);
	overflow: hidden;
}
.ux-pan-bar i {
	display: block;
	height: 100%;
	transform-origin: left;
	transform: scaleX(var(--p, 0));
	background: linear-gradient(90deg, var(--tone), var(--tone-2));
}

/* before/after: two identical app windows stacked in one grid cell, so the drag line compares like with like */
.ux-ba {
	display: grid;
	touch-action: pan-y;
}
.ux-ba > .ux-scr,
.ux-ba > .k-ba-top {
	grid-area: 1 / 1;
	position: relative;
	inset: auto;
}
.ux-ba > .k-ba-top {
	z-index: 1;
}
.ux-scr {
	isolation: isolate;
}
.ux-ba .k-ba-lab {
	top: 18px;
}
.ux-scr {
	height: 100%;
	padding: 64px clamp(16px, 4vw, 56px) clamp(24px, 4vw, 48px);
}
.ux-scr.before {
	background: repeating-linear-gradient(135deg, #efefec 0 12px, #ecebe7 12px 24px);
}
.ux-scr.after {
	background:
		radial-gradient(70% 90% at 80% 0%, color-mix(in srgb, #e2774a 14%, transparent), transparent 60%),
		linear-gradient(180deg, #fff8f3, #fdfcfa);
}
.ux-win {
	position: relative;
	max-width: 780px;
	margin: 0 auto;
	border-radius: 14px;
	overflow: visible;
	background: #fff;
}
.ux-wbar {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 34px;
	padding: 0 12px;
	border-radius: 14px 14px 0 0;
	font: 400 11px/1 var(--font-mono);
	color: var(--subtle);
}
.ux-wbar i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #d9d7d0;
}
.ux-wbar span {
	margin-left: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ux-wbody {
	padding: clamp(14px, 2.4vw, 26px);
}

/* before window: cramped legacy form */
.before .ux-win {
	border-radius: 4px;
	box-shadow:
		0 0 0 1px #c9ced6,
		0 10px 30px -18px rgba(16, 24, 32, 0.35);
}
.before .ux-wbar {
	border-radius: 4px 4px 0 0;
	background: #e4e6e9;
	border-bottom: 1px solid #c9ced6;
}
.ux-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 14px;
	padding: 6px 8px;
	margin: calc(clamp(14px, 2.4vw, 26px) * -1) calc(clamp(14px, 2.4vw, 26px) * -1) 12px;
	font-size: 11px;
	color: #39424e;
	background: #f4f5f6;
	border-bottom: 1px solid #dcdfe3;
}
.ux-err {
	padding: 7px 10px;
	font-size: 11.5px;
	color: #8a1f17;
	background: #fdecea;
	border: 1px solid #f0b6b0;
}
.ux-old-h {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 12px 0 10px;
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: #1f2833;
}
.ux-old-h small {
	font-size: 10.5px;
	letter-spacing: 0;
	color: #c4423a;
}
.ux-g {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px 10px;
}
.ux-g label {
	display: grid;
	gap: 3px;
	min-width: 0;
	font-size: 10.5px;
	color: #4b5563;
	white-space: nowrap;
}
.ux-g label b {
	font-weight: 400;
	color: #c4423a;
}
.ux-g i {
	display: block;
	height: 24px;
	padding: 0 6px;
	font: 400 10.5px/22px var(--font-body);
	font-style: normal;
	color: #9aa3ae;
	border: 1px solid #b8bec6;
	background: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ux-g i.sel {
	background: #fff
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.4'/%3E%3C/svg%3E")
		right 6px center / 8px no-repeat;
}
.ux-g i.bad {
	border-color: #e06a5f;
	background-color: #fff6f5;
}
.ux-old-f {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e4e6e9;
}
.ux-old-f i {
	flex: 1 1 70px;
	padding: 7px 4px;
	text-align: center;
	font-style: normal;
	font-size: 11px;
	color: #1f2833;
	background: linear-gradient(#f4f5f6, #e2e5e9);
	border: 1px solid #b8bec6;
	border-radius: 2px;
}

/* after window: one step, big targets, one action */
.after .ux-win {
	border-radius: 20px;
	box-shadow:
		0 0 0 1px rgba(226, 119, 74, 0.18),
		0 30px 60px -30px rgba(226, 119, 74, 0.45),
		0 10px 24px -16px rgba(16, 24, 32, 0.2);
}
.after .ux-wbar {
	background: #fff;
	border-bottom: 1px solid var(--line);
	border-radius: 20px 20px 0 0;
}
.ux-new {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 16px clamp(20px, 3vw, 36px);
	align-items: start;
}
.ux-new-side {
	display: grid;
	gap: 0;
}
.ux-last {
	margin-top: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	box-shadow: inset 0 0 0 1px var(--line);
	font-size: 12.5px;
	color: var(--muted);
}
.ux-last small {
	display: block;
	margin-bottom: 8px;
	font: 400 10.5px/1 var(--font-mono);
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ux-last p {
	display: flex;
	justify-content: space-between;
	padding: 5px 0;
}
.ux-last p b {
	font-weight: 400;
	color: var(--ink-2);
}
.ux-new-h {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 6px 16px;
}
.ux-new-h b {
	font: 400 clamp(18px, 2vw, 22px)/1.2 var(--font-display);
	letter-spacing: -0.01em;
}
.ux-new-h span {
	font-size: 12.5px;
	color: var(--muted);
}
.ux-step {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-top: 14px;
}
.ux-step span {
	display: grid;
	gap: 7px;
	font-size: 11.5px;
	color: var(--subtle);
}
.ux-step span::before {
	content: '';
	height: 4px;
	border-radius: 4px;
	background: var(--line-strong);
}
.ux-step span.done,
.ux-step span.on {
	color: var(--ink-2);
}
.ux-step span.done::before {
	background: #e2774a;
}
.ux-step span.on::before {
	background: linear-gradient(90deg, #e2774a 55%, var(--line-strong) 55%);
}
.ux-who {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	padding: 10px 12px;
	border-radius: 14px;
	background: color-mix(in srgb, #e2774a 7%, #fff);
}
.ux-who i {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 12px;
	color: #fff;
	background: linear-gradient(135deg, #e2774a, #6667ab);
}
.ux-who b {
	display: block;
	font-weight: 400;
	font-size: 14px;
}
.ux-who small {
	font-size: 12px;
	color: var(--muted);
}
.ux-big {
	display: grid;
	gap: 10px;
}
.ux-big label {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line-strong);
	font-size: 12.5px;
	color: var(--muted);
}
.ux-big label > span b {
	display: block;
	margin-top: 3px;
	font: 400 19px/1.2 var(--font-display);
	color: var(--ink);
}
.ux-big .ctl {
	display: flex;
	gap: 6px;
}
.ux-big .ctl i {
	width: 32px;
	height: 32px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	font-style: normal;
	font-size: 16px;
	color: var(--ink-2);
	background: var(--paper);
}
.ux-big label.auto {
	box-shadow: 0 0 0 1.5px #00a676;
	background: linear-gradient(90deg, rgba(0, 166, 118, 0.06), #fff 60%);
}
.ux-big label.auto em {
	font-style: normal;
	font-size: 11.5px;
	padding: 5px 9px;
	border-radius: 999px;
	color: #0b6b4f;
	background: rgba(0, 166, 118, 0.12);
	white-space: nowrap;
}
.ux-new-f {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 16px;
}
.ux-new-f i {
	flex: 1;
	padding: 14px;
	border-radius: 14px;
	text-align: center;
	font-style: normal;
	font-size: 15px;
	color: #fff;
	background: #e2774a;
	box-shadow: 0 12px 24px -12px #e2774a;
}
.ux-new-f span {
	font-size: 14px;
	color: var(--muted);
}

/* callouts */
.ux-tag {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 11px 6px 6px;
	border-radius: 999px;
	font: 400 12px/1 var(--font-body);
	white-space: nowrap;
	box-shadow: 0 8px 20px -10px rgba(16, 24, 32, 0.35);
	pointer-events: none;
}
.ux-tag b {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font: 400 10.5px/1 var(--font-mono);
	color: #fff;
}
.ux-tag.bad {
	color: #8a1f17;
	background: #fff;
	box-shadow:
		0 0 0 1px #f0b6b0,
		0 8px 20px -10px rgba(196, 66, 58, 0.5);
}
.ux-tag.bad b {
	background: #c4423a;
}
.ux-tag.good {
	color: #0b4f3b;
	background: #fff;
	box-shadow:
		0 0 0 1px rgba(0, 166, 118, 0.35),
		0 8px 20px -10px rgba(0, 166, 118, 0.5);
}
.ux-tag.good b {
	background: #00a676;
}

.ux-tag.t1 {
	top: 92px;
}
.ux-tag.t2 {
	top: 50%;
}
.ux-tag.t3 {
	bottom: 26px;
}
.ux-tag.bad {
	right: calc(100% + 14px);
}
.ux-tag.good {
	left: calc(100% + 14px);
}
@media (max-width: 1240px) {
	.ux-tag.bad {
		right: auto;
		left: -10px;
	}
	.ux-tag.good {
		left: auto;
		right: -10px;
	}
	.ux-tag.t3 {
		bottom: -14px;
	}
	.ux-tag.bad.t3 {
		left: 8%;
	}
	.ux-tag.good.t3 {
		right: 8%;
	}
}

/* controls + outcome strip */
.ux-ba-ctl {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 16px 24px;
	margin-top: 20px;
}
.ux-seg {
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ux-seg button {
	height: 36px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font: 400 14px/1 var(--font-body);
	color: var(--muted);
	background: none;
	transition:
		background 0.25s,
		color 0.25s;
}
.ux-seg button[aria-pressed='true'] {
	color: #fff;
	background: var(--ink);
}
.ux-ba-ctl p {
	font-size: 13.5px;
	color: var(--subtle);
}
.ux-ba-out {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	margin-top: 20px;
}
.ux-ba-out div {
	padding: 18px 20px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}
.ux-ba-out small {
	display: block;
	font: 400 11px/1.3 var(--font-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ux-ba-out p {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin-top: 12px;
}
.ux-ba-out s {
	font: 400 1.1rem/1 var(--font-display);
	color: #9aa3ae;
}
.ux-ba-out b {
	font: 400 1.8rem/1 var(--font-display);
	letter-spacing: -0.03em;
	color: #c2562b;
}
.ux-ba-out em {
	display: block;
	margin-top: 8px;
	font-style: normal;
	font-size: 13px;
	color: var(--muted);
}
.ux-ba.anim .k-ba-top {
	transition: clip-path 0.7s var(--ease);
}
.ux-ba.anim .k-ba-handle {
	transition: left 0.7s var(--ease);
}

/* design system */
.ux-ds {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
	gap: 20px;
}
.ux-ctl {
	display: grid;
	gap: 22px;
	align-content: start;
	padding: 26px;
	border-radius: 24px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-sm);
}
.ux-ctl > div > span,
.ux-ctl label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	font-size: 14px;
	color: var(--ink-2);
}
.ux-ctl label b {
	font: 400 12.5px/1 var(--font-mono);
	font-weight: 400;
	color: var(--subtle);
}
.ux-ctl input[type='range'] {
	width: 100%;
	accent-color: var(--ac);
	cursor: pointer;
}
.ux-sw {
	display: flex;
	gap: 10px;
}
.ux-sw button {
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	background: var(--c);
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 4px var(--line-strong);
}
.ux-sw button[aria-pressed='true'] {
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 5px var(--c);
}
.ux-den {
	display: inline-flex;
	padding: 4px;
	border-radius: 999px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ux-den button {
	height: 34px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--muted);
	background: none;
}
.ux-den button[aria-pressed='true'] {
	color: #fff;
	background: var(--ink);
}
.ux-comp {
	display: grid;
	gap: 16px;
	align-content: center;
	padding: clamp(22px, 3vw, 40px);
	border-radius: 24px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-md);
}
.ux-comp * {
	transition:
		border-radius 0.25s,
		padding 0.25s,
		background 0.3s,
		color 0.3s,
		box-shadow 0.3s;
}
.ux-c-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}
.ux-b {
	padding: var(--pd) calc(var(--pd) * 1.6);
	border-radius: var(--rd);
	font-size: 14.5px;
}
.ux-b.pri {
	color: #fff;
	background: var(--ac);
	box-shadow: 0 10px 20px -12px var(--ac);
}
.ux-b.sec {
	color: var(--ac);
	box-shadow: inset 0 0 0 1.5px var(--ac);
}
.ux-badge {
	padding: 5px 10px;
	border-radius: calc(var(--rd) * 0.7 + 2px);
	font-size: 12px;
	color: var(--ac);
	background: color-mix(in srgb, var(--ac) 12%, #fff);
}
.ux-input {
	display: grid;
	gap: 4px;
	padding: var(--pd) calc(var(--pd) * 1.2);
	border-radius: var(--rd);
	box-shadow:
		inset 0 0 0 1.5px var(--ac),
		0 0 0 4px color-mix(in srgb, var(--ac) 14%, transparent);
}
.ux-input small {
	font-size: 12px;
	color: var(--ac);
}
.ux-input b {
	font-weight: 400;
	font-size: 15px;
}
.ux-tg {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}
.ux-tg i {
	position: relative;
	width: 42px;
	height: 24px;
	border-radius: max(var(--rd), 4px);
	background: var(--ac);
}
.ux-tg i::after {
	content: '';
	position: absolute;
	right: 3px;
	top: 3px;
	width: 18px;
	height: 18px;
	border-radius: calc(max(var(--rd), 4px) - 3px);
	background: #fff;
}
.ux-tabs {
	display: inline-flex;
	padding: 4px;
	border-radius: calc(var(--rd) + 4px);
	background: var(--paper);
}
.ux-tabs i {
	font-style: normal;
	padding: calc(var(--pd) * 0.55) var(--pd);
	border-radius: var(--rd);
	font-size: 13.5px;
	color: var(--muted);
}
.ux-tabs i.on {
	color: var(--ac);
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.ux-card {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	align-items: center;
	padding: calc(var(--pd) * 1.3);
	border-radius: calc(var(--rd) + 4px);
	background: color-mix(in srgb, var(--ac) 7%, #fff);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--ac) 22%, transparent);
}
.ux-card b {
	font: 400 16px/1.2 var(--font-display);
}
.ux-card span {
	grid-column: 1;
	font-size: 13px;
	color: var(--muted);
}
.ux-card i {
	grid-column: 2;
	grid-row: 1 / span 2;
	font-style: normal;
	padding: calc(var(--pd) * 0.6) var(--pd);
	border-radius: var(--rd);
	color: #fff;
	background: var(--ac);
	font-size: 13.5px;
}

/* a11y */
.ux-a11y {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: 20px;
}
.ux-a-pick {
	padding: 26px;
	border-radius: 24px;
	background: var(--paper);
	box-shadow: inset 0 0 0 1px var(--line);
}
.ux-a-pick > span {
	font-size: 14px;
	color: var(--ink-2);
}
.ux-a-sw {
	display: grid;
	gap: 8px;
	margin-top: 14px;
}
.ux-a-sw button {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 0;
	border-radius: 14px;
	cursor: pointer;
	font-size: 14.5px;
	text-align: left;
	color: var(--ink);
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}
.ux-a-sw button::before {
	content: '';
	width: 22px;
	height: 22px;
	border-radius: 6px;
	background: var(--c);
}
.ux-a-sw button[aria-pressed='true'] {
	box-shadow: 0 0 0 2px var(--ink);
}
.ux-a-demo {
	display: grid;
	place-items: center;
	padding: 32px;
	border-radius: 24px;
	background: #fff;
	box-shadow:
		0 0 0 1px var(--line),
		var(--shadow-sm);
}
.ux-a-demo p {
	font: 400 clamp(1.2rem, 2vw, 1.5rem)/1.5 var(--font-display);
	transition: color 0.3s;
}
.ux-a-res {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.ux-a-res div {
	padding: 18px 20px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 0 0 1px var(--line);
}
.ux-a-res small {
	font: 400 11px/1.3 var(--font-mono);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--subtle);
}
.ux-a-res b {
	display: block;
	margin-top: 10px;
	font: 400 1.8rem/1 var(--font-display);
}
.ux-a-res b.pass {
	color: #0b6b4f;
}
.ux-a-res b.fail {
	color: #c4423a;
}

@media (max-width: 1000px) {
	.ux-body {
		grid-template-columns: 1fr;
	}
	.ux-layers,
	.ux-props {
		display: none;
	}
	.ux-ds,
	.ux-a11y {
		grid-template-columns: 1fr;
	}
	.ux-g {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.ux-g label:nth-child(n + 10) {
		display: none;
	}
	.ux-new {
		grid-template-columns: 1fr;
	}
	.ux-ba-out {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 640px) {
	.ux-top b,
	.ux-tools {
		display: none;
	}
	.ux-top {
		justify-content: space-between;
	}
	.ux-canvas {
		gap: 14px;
	}
	.ux-board > div {
		width: 96px;
		height: 200px;
	}
	.ux-board.b3 {
		display: none;
	}
	.ux-arrow {
		display: none;
	}
	.ux-pin {
		left: 8%;
		top: 74%;
	}
	/* journey cards: size to their content and keep the pinned view within one screen */
	.ux-pan .e-head .no,
	.ux-pan .e-head .lead {
		display: none;
	}
	.ux-pan .e-head {
		margin-bottom: 20px;
	}
	.ux-art {
		height: auto;
		padding: 18px;
		border-radius: 22px;
	}
	.ux-art h3 {
		font-size: 1.2rem;
	}
	.ux-art > div {
		flex: none;
		margin-top: 14px;
	}
	.ux-flow {
		gap: 6px;
	}
	.ux-flow span {
		padding: 8px 12px;
		font-size: 13px;
	}
	.ux-ui > div {
		max-width: none;
		gap: 7px;
		padding: 14px;
	}
	.ux-ui span {
		padding: 6px 10px;
	}
	.ux-ui i {
		padding: 10px;
	}
	.ux-notes {
		grid-template-columns: 1fr 1fr;
	}
	.ux-notes i:nth-child(n + 5) {
		display: none;
	}
	.ux-proto {
		grid-template-columns: 90px 1fr;
	}
	.ux-proto .ph {
		height: 180px;
	}
	.ux-scr {
		padding: 56px 12px 28px;
	}
	.ux-g {
		grid-template-columns: 1fr 1fr;
	}
	.ux-g label:nth-child(n + 7) {
		display: none;
	}
	.ux-old-f i:nth-child(n + 5) {
		display: none;
	}
	.ux-menu span:nth-child(n + 5) {
		display: none;
	}
	.ux-tag {
		padding: 3px;
	}
	.ux-tag span {
		display: none;
	}
	.ux-tag.bad {
		left: 6px;
	}
	.ux-tag.good {
		right: 6px;
	}
	.ux-big .ctl {
		display: none;
	}
	.ux-last {
		display: none;
	}
	.ux-ba-ctl {
		justify-content: center;
		text-align: center;
	}
	.ux-seg button {
		padding: 0 13px;
	}
	.ux-a-res {
		grid-template-columns: 1fr;
	}
}
/* hero mockup: a design file */
.hu {
	display: grid;
	grid-template-columns: 104px 1fr 118px;
	min-height: 370px;
	font-size: 10px;
}
.hu-l,
.hu-r {
	padding: 12px 10px;
	background: #fff;
	display: grid;
	align-content: start;
	gap: 3px;
	color: var(--muted);
}
.hu-l {
	border-right: 1px solid var(--line);
}
.hu-r {
	border-left: 1px solid var(--line);
	gap: 10px;
}
.hu-l small,
.hu-r small {
	font: 400 8.5px/1 var(--font-mono);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--subtle);
	margin-bottom: 6px;
}
.hu-l span {
	padding: 5px 6px;
	border-radius: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.hu-l span.in {
	padding-left: 16px;
}
.hu-l span.on {
	color: #fff;
	background: var(--tone);
}
.hu-c {
	position: relative;
	display: grid;
	place-items: center;
	background: #f1f1ee radial-gradient(rgba(16, 24, 32, 0.1) 1px, transparent 1px) 0 0 / 14px 14px;
	overflow: hidden;
}
.hu-frame {
	position: relative;
	width: 150px;
	padding: 14px 12px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 14px 30px -16px rgba(16, 24, 32, 0.35);
	display: grid;
	gap: 8px;
}
.hu-frame::before {
	content: 'Checkout \2014 iPhone';
	position: absolute;
	left: 2px;
	top: -16px;
	font: 400 9px/1 var(--font-mono);
	color: var(--subtle);
}
.hu-frame .img {
	height: 64px;
	border-radius: 10px;
	background: linear-gradient(135deg, #ffbe98, #e2774a);
}
.hu-frame b {
	font: 400 12px/1.2 var(--font-display);
}
.hu-frame .ln {
	height: 6px;
	border-radius: 4px;
	background: #eceae5;
}
.hu-frame .ln.s {
	width: 60%;
}
.hu-frame .row {
	display: flex;
	justify-content: space-between;
	font-size: 10px;
	color: var(--muted);
}
.hu-btn {
	position: relative;
	padding: 10px;
	border-radius: 10px;
	text-align: center;
	color: #fff;
	background: var(--tone);
}
.hu-btn::after {
	content: '';
	position: absolute;
	inset: -4px;
	border: 1.5px solid #0a84ff;
	border-radius: 3px;
}
.hu-btn i {
	position: absolute;
	width: 6px;
	height: 6px;
	background: #fff;
	border: 1.5px solid #0a84ff;
}
.hu-btn i:nth-child(1) {
	left: -7px;
	top: -7px;
}
.hu-btn i:nth-child(2) {
	right: -7px;
	top: -7px;
}
.hu-btn i:nth-child(3) {
	left: -7px;
	bottom: -7px;
}
.hu-btn i:nth-child(4) {
	right: -7px;
	bottom: -7px;
}
.hu-dim {
	position: absolute;
	left: 50%;
	bottom: -24px;
	transform: translateX(-50%);
	padding: 3px 6px;
	border-radius: 4px;
	font: 400 9px/1 var(--font-mono);
	color: #fff;
	background: #0a84ff;
	white-space: nowrap;
}
.hu-cur {
	position: absolute;
	left: 66%;
	top: 26%;
	display: flex;
	align-items: flex-start;
	gap: 2px;
	animation: hu-move 7s var(--ease) infinite;
}
.hu-cur svg {
	width: 14px;
	color: #e2774a;
}
.hu-cur span {
	margin-top: 10px;
	padding: 3px 7px;
	border-radius: 6px;
	font-size: 9px;
	color: #fff;
	background: #e2774a;
}
@keyframes hu-move {
	0%,
	100% {
		transform: none;
	}
	40% {
		transform: translate(-90px, 60px);
	}
	60% {
		transform: translate(-90px, 60px);
	}
}
.hu-r div {
	display: grid;
	gap: 5px;
}
.hu-r div > span {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px 7px;
	border-radius: 6px;
	background: #f6f6f3;
	color: var(--ink-2);
}
.hu-r .sw {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--tone);
}
.hu-r .comp {
	padding: 7px;
	border-radius: 7px;
	color: #6667ab;
	background: rgba(102, 103, 171, 0.1);
}