/* =========================================================
   STRONOX APPLICATION DEMO
   V1.2
========================================================= */

.sad-demo {
	--sad-blue: #283891;
	--sad-navy: #0B102B;
	--sad-red: #BF1E2D;
	--sad-light: #F5F6F8;
	--sad-white: #FFFFFF;
	--sad-text: #111111;
	--sad-muted: #667085;
	--sad-border: #D7DDE8;
	--sad-border-dark: #C4CBD6;
	--sad-primer: #75A7D8;
	--sad-basecoat: #5D89B9;
	--sad-topcoat: #4E5968;
	--sad-textile: #F3F4F6;
	--sad-dirt: #5A5147;

	width: 100%;
	max-width: 1480px;
	margin: 0 auto;
	padding: 34px;

	border: 1px solid var(--sad-border);
	border-radius: 4px;

	background: var(--sad-white);

	box-shadow:
		0 18px 48px rgba(11, 16, 43, 0.07),
		0 2px 8px rgba(11, 16, 43, 0.03);

	color: var(--sad-text);

	font-family:
		Inter,
		Arial,
		sans-serif;
}


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


.sad-demo button,
.sad-demo a,
.sad-demo input,
.sad-demo summary {
	font-family: inherit;
}


.sad-demo button,
.sad-demo a {
	-webkit-tap-highlight-color: transparent;
}


/* =========================================================
   HEADER
========================================================= */

.sad-demo__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 42px;

	margin-bottom: 30px;
}


.sad-demo__header-copy {
	width: 100%;
	max-width: 880px;
}


.sad-demo__eyebrow {
	margin: 0 0 10px;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 1.25px;
	text-transform: uppercase;

	color: var(--sad-red);
}


.sad-demo__title {
	margin: 0 0 13px;

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: clamp(32px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.04;

	letter-spacing: -0.7px;

	color: var(--sad-text);
}


.sad-demo__subtitle {
	margin: 0;

	max-width: 800px;

	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;

	color: var(--sad-muted);
}


.sad-demo__intro-note {
	display: flex;
	align-items: flex-start;

	gap: 11px;

	max-width: 820px;

	margin-top: 18px;

	padding: 14px 16px;

	border-left: 3px solid var(--sad-blue);

	background: #F6F8FD;
}


.sad-demo__intro-note p {
	margin: 0;

	font-size: 13px;
	line-height: 1.55;

	color: #465066;
}


.sad-demo__intro-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 21px;
	height: 21px;

	flex: 0 0 21px;

	border-radius: 50%;

	background: var(--sad-blue);
	color: #FFFFFF;

	font-size: 12px;
	font-weight: 700;
}


/* =========================================================
   HEADER STATUS
========================================================= */

.sad-demo__header-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;

	gap: 9px;

	min-width: 166px;
}


.sad-demo__step-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 140px;
	min-height: 42px;

	padding: 10px 15px;

	border-radius: 2px;

	background: var(--sad-navy);
	color: var(--sad-white);

	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;

	letter-spacing: 0.8px;

	text-align: center;
	text-transform: uppercase;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}


.sad-demo__stage-name {
	max-width: 200px;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;

	text-align: right;

	color: var(--sad-blue);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.sad-demo__layout {
	display: grid;

	grid-template-columns:
		minmax(0, 1.9fr)
		minmax(320px, 0.68fr);

	gap: 26px;

	align-items: start;
}


.sad-demo__workspace {
	min-width: 0;
}


/* =========================================================
   CANVAS SHELL
========================================================= */

.sad-demo__canvas-shell {
	overflow: hidden;

	border: 1px solid var(--sad-border);
	border-radius: 3px;

	background: var(--sad-light);

	box-shadow:
		0 7px 22px rgba(11, 16, 43, 0.055);
}


/* =========================================================
   CANVAS TOP BAR
========================================================= */

.sad-demo__canvas-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	min-height: 72px;

	padding: 13px 18px;

	border-bottom: 1px solid var(--sad-border);

	background: var(--sad-white);
}


.sad-demo__canvas-topbar > div:first-child {
	display: flex;
	flex-direction: column;

	gap: 4px;

	min-width: 0;
}


.sad-demo__canvas-label {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 1px;
	text-transform: uppercase;

	color: var(--sad-red);
}


.sad-demo__canvas-instruction {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;

	color: var(--sad-text);
}


/* =========================================================
   V1.2 EXPERIENCE TOOLS
========================================================= */

.sad-demo__experience-tools {
	display: flex;
	align-items: center;
	justify-content: flex-end;

	flex-wrap: wrap;

	gap: 8px;

	flex: 0 0 auto;
}


/* =========================================================
   TIMER
========================================================= */

.sad-demo__timer {
	display: flex;
	align-items: center;

	gap: 8px;

	min-height: 36px;

	padding: 6px 10px;

	border: 1px solid var(--sad-border);
	border-radius: 2px;

	background: #FFFFFF;

	white-space: nowrap;
}


.sad-demo__timer-label {
	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.8px;
	text-transform: uppercase;

	color: var(--sad-muted);
}


.sad-demo__timer strong {
	min-width: 43px;

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: 14px;
	font-weight: 700;
	line-height: 1;

	font-variant-numeric: tabular-nums;

	color: var(--sad-navy);
}


/* =========================================================
   GUIDED / EXPLORE SWITCH
========================================================= */

.sad-demo__mode-switch {
	display: inline-flex;

	overflow: hidden;

	border: 1px solid var(--sad-border);
	border-radius: 2px;

	background: #FFFFFF;
}


.sad-demo__mode-switch button {
	appearance: none;

	min-height: 34px;

	padding: 8px 10px;

	border: 0;
	border-right: 1px solid var(--sad-border);

	background: transparent;

	color: var(--sad-muted);

	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.55px;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		background-color 0.18s ease,
		color 0.18s ease;
}


.sad-demo__mode-switch button:last-child {
	border-right: 0;
}


.sad-demo__mode-switch button:hover {
	color: var(--sad-blue);

	background: #F6F8FD;
}


.sad-demo__mode-switch button.is-active {
	background: var(--sad-blue);

	color: #FFFFFF;
}


.sad-demo__mode-switch button:focus-visible {
	position: relative;
	z-index: 2;

	outline: 3px solid rgba(40, 56, 145, 0.2);
	outline-offset: -2px;
}


/* =========================================================
   TOOL BADGE
========================================================= */

.sad-demo__tool-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 36px;

	padding: 8px 11px;

	border: 1px solid var(--sad-border);
	border-radius: 2px;

	background: #FFFFFF;

	color: var(--sad-blue);

	font-size: 10px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.55px;
	text-transform: uppercase;

	white-space: nowrap;
}


/* =========================================================
   CANVAS WRAPPER
========================================================= */

.sad-demo__canvas-wrap {
	position: relative;

	overflow: hidden;

	background: #D9DEE6;

	isolation: isolate;
}


/* =========================================================
   CANVAS
========================================================= */

.sad-demo__canvas {
	display: block;

	width: 100%;
	height: auto;

	/*
	 * Critical geometry:
	 *
	 * 960 × 600 canvas
	 * 48 × 30 mask
	 *
	 * Both are exactly 8:5.
	 */
	aspect-ratio: 8 / 5;

	background: #DDE3EC;

	touch-action: none;

	cursor: none;

	user-select: none;
	-webkit-user-select: none;
}


.sad-demo__canvas:focus {
	outline: none;
}


/* =========================================================
   LOADING
========================================================= */

.sad-demo__canvas-loading {
	position: absolute;

	inset: 0;

	z-index: 30;

	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	gap: 12px;

	background:
		rgba(245, 246, 248, 0.96);

	color: var(--sad-muted);

	font-size: 13px;
	font-weight: 600;

	transition:
		opacity 0.25s ease,
		visibility 0.25s ease;
}


.sad-demo__canvas-loading.is-hidden {
	opacity: 0;
	visibility: hidden;

	pointer-events: none;
}


.sad-demo__spinner {
	width: 32px;
	height: 32px;

	border: 3px solid #D4DBE7;
	border-top-color: var(--sad-blue);

	border-radius: 50%;

	animation:
		sad-spin 0.8s linear infinite;
}


@keyframes sad-spin {
	to {
		transform: rotate(360deg);
	}
}


/* =========================================================
   APPLICATION CURSOR
========================================================= */

.sad-demo__cursor-ring {
	position: absolute;

	top: 0;
	left: 0;

	z-index: 14;

	width: 40px;
	height: 40px;

	border: 2px solid rgba(255, 255, 255, 0.96);
	border-radius: 50%;

	box-shadow:
		0 0 0 1px rgba(11, 16, 43, 0.64),
		0 3px 12px rgba(0, 0, 0, 0.23);

	transform:
		translate(-50%, -50%);

	pointer-events: none;

	opacity: 0;

	transition:
		opacity 0.1s ease,
		width 0.12s ease,
		height 0.12s ease,
		border-color 0.12s ease,
		box-shadow 0.12s ease;
}


.sad-demo__cursor-ring.is-visible {
	opacity: 1;
}


.sad-demo__cursor-ring.is-invalid {
	border-color: var(--sad-red);

	box-shadow:
		0 0 0 1px var(--sad-red),
		0 3px 12px rgba(191, 30, 45, 0.30);
}


.sad-demo.is-explore-mode
.sad-demo__cursor-ring {
	background:
		rgba(40, 56, 145, 0.08);
}


/* =========================================================
   DETAIL ZOOM NAVIGATOR
========================================================= */

.sad-demo__detail-nav {
	position: absolute;

	z-index: 18;

	left: 16px;
	right: 16px;
	bottom: 16px;

	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 18px;

	padding: 12px 14px;

	border:
		1px solid
		rgba(255, 255, 255, 0.22);

	border-radius: 3px;

	background:
		rgba(11, 16, 43, 0.91);

	box-shadow:
		0 12px 30px rgba(0, 0, 0, 0.22);

	backdrop-filter:
		blur(8px);

	-webkit-backdrop-filter:
		blur(8px);

	color: #FFFFFF;

	animation:
		sad-detail-nav-in 0.22s ease both;
}


.sad-demo__detail-nav[hidden] {
	display: none;
}


@keyframes sad-detail-nav-in {
	from {
		opacity: 0;

		transform:
			translateY(6px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}


.sad-demo__detail-nav > div {
	display: flex;
	flex-direction: column;

	gap: 3px;

	min-width: 0;
}


.sad-demo__detail-nav span {
	font-size: 9px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.9px;
	text-transform: uppercase;

	color: #AEB8CF;
}


.sad-demo__detail-nav strong {
	overflow: hidden;

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: 14px;
	font-weight: 700;
	line-height: 1.25;

	white-space: nowrap;
	text-overflow: ellipsis;

	color: #FFFFFF;
}


.sad-demo__detail-nav .sad-demo__button {
	flex: 0 0 auto;

	min-height: 36px;

	padding: 9px 11px;

	font-size: 10px;
}


/* =========================================================
   ROOF CALLOUT PANEL
========================================================= */

.sad-demo__callout-panel {
	position: absolute;

	z-index: 22;

	top: 16px;
	left: 16px;

	width: min(
		330px,
		calc(100% - 32px)
	);

	padding: 17px 42px 17px 17px;

	border:
		1px solid
		rgba(255, 255, 255, 0.24);

	border-left:
		4px solid
		var(--sad-red);

	border-radius: 3px;

	background:
		rgba(11, 16, 43, 0.94);

	box-shadow:
		0 14px 32px rgba(0, 0, 0, 0.23);

	backdrop-filter:
		blur(9px);

	-webkit-backdrop-filter:
		blur(9px);

	color: #FFFFFF;

	animation:
		sad-callout-in 0.2s ease both;
}


.sad-demo__callout-panel[hidden] {
	display: none;
}


@keyframes sad-callout-in {
	from {
		opacity: 0;

		transform:
			translateY(-4px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}


.sad-demo__callout-panel > span {
	display: block;

	margin-bottom: 5px;

	color: #AEB8CF;

	font-size: 9px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.9px;
	text-transform: uppercase;
}


.sad-demo__callout-panel > strong {
	display: block;

	margin-bottom: 8px;

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;

	color: #FFFFFF;
}


.sad-demo__callout-panel p {
	margin: 0;

	font-size: 12px;
	line-height: 1.58;

	color: #D3D9E5;
}


.sad-demo__callout-close {
	position: absolute;

	top: 10px;
	right: 10px;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 27px;
	height: 27px;

	padding: 0;

	border:
		1px solid
		rgba(255, 255, 255, 0.22);

	border-radius: 2px;

	background:
		rgba(255, 255, 255, 0.06);

	color: #FFFFFF;

	font-size: 19px;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color 0.18s ease,
		border-color 0.18s ease;
}


.sad-demo__callout-close:hover {
	border-color:
		rgba(255, 255, 255, 0.55);

	background:
		rgba(255, 255, 255, 0.14);
}


/* =========================================================
   BEFORE / AFTER CONTROLS
========================================================= */

.sad-demo__reveal-controls {
	position: absolute;

	z-index: 24;

	left: 50%;
	bottom: 18px;

	display: grid;

	grid-template-columns:
		auto
		minmax(150px, 320px)
		auto
		auto;

	align-items: center;

	gap: 11px;

	width: max-content;
	max-width:
		calc(100% - 32px);

	padding: 11px 13px;

	border:
		1px solid
		rgba(255, 255, 255, 0.24);

	border-radius: 3px;

	background:
		rgba(11, 16, 43, 0.93);

	box-shadow:
		0 12px 28px rgba(0, 0, 0, 0.23);

	backdrop-filter:
		blur(8px);

	-webkit-backdrop-filter:
		blur(8px);

	transform:
		translateX(-50%);

	color: #FFFFFF;

	animation:
		sad-reveal-in 0.25s ease both;
}


.sad-demo__reveal-controls[hidden] {
	display: none;
}


@keyframes sad-reveal-in {
	from {
		opacity: 0;

		transform:
			translate(-50%, 6px);
	}

	to {
		opacity: 1;

		transform:
			translate(-50%, 0);
	}
}


.sad-demo__reveal-controls > span {
	font-size: 9px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.65px;
	text-transform: uppercase;

	white-space: nowrap;

	color: #CFD5E2;
}


.sad-demo__reveal-controls input[type="range"] {
	width: 100%;

	cursor: ew-resize;

	accent-color:
		var(--sad-red);
}


.sad-demo__reveal-controls button {
	min-height: 30px;

	padding: 7px 9px;

	border:
		1px solid
		rgba(255, 255, 255, 0.35);

	border-radius: 2px;

	background: transparent;

	color: #FFFFFF;

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.6px;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		background-color 0.18s ease,
		color 0.18s ease;
}


.sad-demo__reveal-controls button:hover {
	background: #FFFFFF;

	color: var(--sad-navy);
}


/* =========================================================
   PROGRESS
========================================================= */

.sad-demo__progress-section {
	padding:
		17px
		18px
		5px;

	background:
		var(--sad-white);
}


.sad-demo__progress-header {
	display: flex;
	align-items: center;

	gap: 12px;

	margin-bottom: 9px;
}


.sad-demo__progress-header strong {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;

	color: var(--sad-text);
}


.sad-demo__progress-header > span:not(.sad-demo__progress-status) {
	margin-left: auto;

	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;

	color: var(--sad-blue);
}


.sad-demo__progress-status {
	display: inline-flex;
	align-items: center;

	min-height: 24px;

	padding: 4px 7px;

	border: 1px solid var(--sad-border);
	border-radius: 2px;

	background: var(--sad-light);

	color: var(--sad-muted);

	font-size: 8px;
	font-weight: 700;
	line-height: 1;

	letter-spacing: 0.65px;
	text-transform: uppercase;

	white-space: nowrap;
}


.sad-demo__progress-track {
	position: relative;

	height: 10px;

	overflow: hidden;

	border-radius: 999px;

	background: #E5EAF2;
}


.sad-demo__progress-fill {
	display: block;

	width: 0;
	height: 100%;

	border-radius: inherit;

	background:
		linear-gradient(
			90deg,
			var(--sad-red) 0%,
			var(--sad-blue) 100%
		);

	transition:
		width 0.18s ease;
}


/* =========================================================
   FEEDBACK
========================================================= */

.sad-demo__feedback {
	display: flex;
	align-items: center;

	min-height: 35px;

	padding:
		8px
		18px
		2px;

	background: var(--sad-white);

	color: var(--sad-red);

	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;

	transition:
		color 0.18s ease;
}


.sad-demo__feedback.is-success {
	color: var(--sad-blue);
}


/* =========================================================
   CONTROLS
========================================================= */

.sad-demo__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 20px;

	padding:
		13px
		18px
		18px;

	background:
		var(--sad-white);
}


.sad-demo__controls-left,
.sad-demo__controls-right {
	display: flex;
	flex-wrap: wrap;

	gap: 9px;
}


.sad-demo__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 43px;

	padding:
		12px
		16px;

	border-radius: 2px;

	text-decoration: none;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.1;

	letter-spacing: 0.4px;

	text-align: center;
	text-transform: uppercase;

	cursor: pointer;

	transition:
		background-color 0.18s ease,
		color 0.18s ease,
		border-color 0.18s ease,
		box-shadow 0.18s ease,
		transform 0.18s ease;
}


.sad-demo__button:hover {
	transform:
		translateY(-1px);
}


.sad-demo__button:active {
	transform:
		translateY(0);
}


.sad-demo__button:focus-visible,
.sad-demo__technical-link:focus-visible,
.sad-demo summary:focus-visible {
	outline:
		3px solid
		rgba(40, 56, 145, 0.22);

	outline-offset: 3px;
}


.sad-demo__button--outline {
	border:
		1px solid
		var(--sad-blue);

	background:
		#FFFFFF;

	color:
		var(--sad-blue);
}


.sad-demo__button--outline:hover {
	background:
		var(--sad-blue);

	color:
		#FFFFFF;

	box-shadow:
		0 5px 14px
		rgba(40, 56, 145, 0.16);
}


.sad-demo__button--red {
	border:
		1px solid
		var(--sad-red);

	background:
		var(--sad-red);

	color:
		#FFFFFF;

	box-shadow:
		0 5px 15px
		rgba(191, 30, 45, 0.14);
}


.sad-demo__button--red:hover {
	border-color:
		#A51927;

	background:
		#A51927;

	color:
		#FFFFFF;

	box-shadow:
		0 7px 18px
		rgba(191, 30, 45, 0.22);
}


.sad-demo__button--secondary-light {
	border:
		1px solid
		rgba(255, 255, 255, 0.76);

	background:
		transparent;

	color:
		#FFFFFF;
}


.sad-demo__button--secondary-light:hover {
	background:
		#FFFFFF;

	color:
		var(--sad-navy);
}


.sad-demo__button[hidden] {
	display: none;
}


/* =========================================================
   EXPLORE MODE CONTROL STATE
========================================================= */

.sad-demo.is-explore-mode
.sad-demo__controls {
	opacity: 0.52;

	pointer-events: none;
}


.sad-demo.is-explore-mode
.sad-demo__progress-fill {
	opacity: 0.35;
}


/* =========================================================
   SIDEBAR
========================================================= */

.sad-demo__sidebar {
	display: flex;
	flex-direction: column;

	gap: 12px;

	min-width: 0;
}


/* =========================================================
   OVERALL STAGE PROGRESS
========================================================= */

.sad-demo__stage-progress {
	padding:
		0
		1px
		3px;
}


.sad-demo__stage-progress-line {
	position: relative;

	height: 4px;

	overflow: hidden;

	background:
		#E3E7EE;
}


.sad-demo__stage-progress-fill {
	display: block;

	width: 25%;
	height: 100%;

	background:
		linear-gradient(
			90deg,
			var(--sad-red),
			var(--sad-blue)
		);

	transition:
		width 0.3s ease;
}


/* =========================================================
   STAGE CARDS
========================================================= */

.sad-demo__stage-card {
	overflow: hidden;

	border:
		1px solid
		var(--sad-border);

	border-left:
		4px solid
		#CBD2DD;

	border-radius: 3px;

	background:
		#FFFFFF;

	transition:
		border-color 0.22s ease,
		box-shadow 0.22s ease,
		transform 0.22s ease,
		background-color 0.22s ease;
}


.sad-demo__stage-card.is-active {
	border-color:
		#CBD3E0;

	border-left-color:
		var(--sad-red);

	box-shadow:
		0 12px 26px
		rgba(11, 16, 43, 0.075);

	transform:
		translateX(-2px);
}


.sad-demo__stage-card.is-complete {
	border-left-color:
		var(--sad-blue);

	background:
		#FBFCFE;
}


.sad-demo__stage-card-header {
	position: relative;

	display: grid;

	grid-template-columns:
		42px
		minmax(0, 1fr)
		26px;

	align-items: center;

	gap: 12px;

	min-height: 68px;

	padding:
		14px
		15px;
}


.sad-demo__stage-number {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border-radius: 2px;

	background:
		var(--sad-light);

	color:
		var(--sad-blue);

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: 14px;
	font-weight: 700;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}


.sad-demo__stage-card.is-active
.sad-demo__stage-number {
	background:
		var(--sad-red);

	color:
		#FFFFFF;
}


.sad-demo__stage-card.is-complete
.sad-demo__stage-number {
	background:
		var(--sad-blue);

	color:
		#FFFFFF;
}


.sad-demo__stage-heading-wrap {
	min-width: 0;
}


.sad-demo__stage-heading-wrap h3 {
	margin:
		0
		0
		4px;

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: 17px;
	font-weight: 700;
	line-height: 1.2;

	color:
		var(--sad-text);
}


.sad-demo__stage-state {
	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.8px;
	text-transform: uppercase;

	color:
		#8A94A6;
}


.sad-demo__stage-card.is-active
.sad-demo__stage-state {
	color:
		var(--sad-red);
}


.sad-demo__stage-card.is-complete
.sad-demo__stage-state {
	color:
		var(--sad-blue);
}


.sad-demo__stage-check {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;

	border-radius: 50%;

	background:
		#EDF0F4;

	color:
		#A7B0BF;

	font-size: 13px;
	font-weight: 700;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}


.sad-demo__stage-card.is-complete
.sad-demo__stage-check {
	background:
		var(--sad-blue);

	color:
		#FFFFFF;

	transform:
		scale(1.03);
}


.sad-demo__stage-body {
	padding:
		0
		16px
		18px
		70px;

	animation:
		sad-stage-open 0.2s ease both;
}


@keyframes sad-stage-open {
	from {
		opacity: 0;

		transform:
			translateY(-3px);
	}

	to {
		opacity: 1;

		transform:
			translateY(0);
	}
}


.sad-demo__stage-body[hidden] {
	display: none;
}


.sad-demo__stage-intro {
	margin:
		0
		0
		16px;

	font-size: 13px;
	line-height: 1.58;

	color:
		var(--sad-muted);
}


/* =========================================================
   STAGE INFORMATION
========================================================= */

.sad-demo__info-block {
	padding:
		11px
		0;

	border-top:
		1px solid
		#E8EBF0;
}


.sad-demo__info-label {
	display: block;

	margin-bottom: 5px;

	color:
		var(--sad-blue);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.2;

	letter-spacing: 0.9px;
	text-transform: uppercase;
}


.sad-demo__info-block p {
	margin: 0;

	font-size: 12.5px;
	line-height: 1.58;

	color:
		var(--sad-muted);
}


.sad-demo__info-block--highlight {
	margin:
		7px
		0;

	padding:
		11px
		12px;

	border:
		1px solid
		#DDE3EC;

	border-left:
		3px solid
		var(--sad-blue);

	background:
		var(--sad-light);
}


.sad-demo__criteria {
	padding-top: 12px;

	border-top:
		1px solid
		#E8EBF0;
}


.sad-demo__criteria ul,
.sad-demo__technical-notes ul {
	margin:
		7px
		0
		0
		18px;

	padding: 0;
}


.sad-demo__criteria li,
.sad-demo__technical-notes li {
	margin-bottom: 6px;

	font-size: 12px;
	line-height: 1.52;

	color:
		var(--sad-muted);
}


.sad-demo__criteria li::marker {
	color:
		var(--sad-red);
}


.sad-demo__technical-notes li::marker {
	color:
		var(--sad-blue);
}


.sad-demo__technical-notes {
	margin-top: 12px;

	padding-top: 11px;

	border-top:
		1px solid
		#E8EBF0;
}


.sad-demo__technical-notes summary {
	cursor: pointer;

	color:
		var(--sad-blue);

	font-size: 12px;
	font-weight: 700;
}


.sad-demo__technical-notes summary:hover {
	color:
		var(--sad-red);
}


.sad-demo__technical-notes[open]
summary {
	margin-bottom: 7px;
}


/* =========================================================
   COMPLETION OVERLAY
========================================================= */

.sad-demo__completion-overlay {
	position: absolute;

	inset: 0;

	z-index: 40;

	display: flex;
	align-items: center;
	justify-content: center;

	padding: 32px;

	background:
		linear-gradient(
			135deg,
			rgba(11, 16, 43, 0.95),
			rgba(40, 56, 145, 0.87)
		);

	backdrop-filter:
		blur(3px);

	-webkit-backdrop-filter:
		blur(3px);
}


.sad-demo__completion-overlay[hidden] {
	display: none;
}


.sad-demo__completion-inner {
	width: 100%;

	max-width: 620px;

	text-align: center;

	color: #FFFFFF;

	animation:
		sad-completion-in 0.32s ease both;
}


@keyframes sad-completion-in {
	from {
		opacity: 0;

		transform:
			translateY(10px)
			scale(0.985);
	}

	to {
		opacity: 1;

		transform:
			translateY(0)
			scale(1);
	}
}


.sad-demo__completion-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 66px;
	height: 66px;

	margin-bottom: 20px;

	border-radius: 50%;

	background:
		var(--sad-red);

	box-shadow:
		0 12px 28px
		rgba(0, 0, 0, 0.24);

	color:
		#FFFFFF;

	font-size: 31px;
	font-weight: 700;
}


.sad-demo__completion-inner h3 {
	margin:
		0
		0
		12px;

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: clamp(29px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.05;

	letter-spacing: -0.4px;

	color:
		#FFFFFF;
}


.sad-demo__completion-inner > p {
	margin: 0;

	font-size: 16px;
	line-height: 1.65;

	color:
		#D9DEEA;
}


/* =========================================================
   V1.2 COMPLETION TIMER + QUIP
========================================================= */

.sad-demo__completion-timing {
	position: relative;

	display: inline-grid;

	grid-template-columns:
		auto
		auto;

	grid-template-areas:
		"label time"
		"quip quip";

	align-items: center;

	gap:
		5px
		12px;

	margin-top: 22px;

	padding:
		12px
		15px;

	border:
		1px solid
		rgba(255, 255, 255, 0.22);

	border-radius: 3px;

	background:
		rgba(255, 255, 255, 0.07);
}


.sad-demo__completion-timing > span {
	grid-area: label;

	font-size: 9px;
	font-weight: 700;

	letter-spacing: 0.85px;
	text-transform: uppercase;

	color:
		#C8D0E1;
}


.sad-demo__completion-timing > strong {
	grid-area: time;

	font-family:
		Montserrat,
		Arial,
		sans-serif;

	font-size: 24px;
	font-weight: 700;
	line-height: 1;

	font-variant-numeric:
		tabular-nums;

	color:
		#FFFFFF;
}


.sad-demo__completion-timing > em {
	position: relative;

	grid-area: quip;

	display: block;

	margin-top: 3px;

	padding-right: 12px;

	font-size: 12px;
	font-style: normal;
	font-weight: 600;
	line-height: 1.4;

	text-align: right;

	color:
		#DDE3EF;
}


/*
 * Small visual arrow leading toward the completed time.
 */
.sad-demo__completion-timing > em::after {
	content: "↗";

	position: absolute;

	right: -3px;
	top: -2px;

	color:
		var(--sad-red);

	font-size: 14px;
	font-weight: 700;
}


/* =========================================================
   COMPLETION ACTIONS
========================================================= */

.sad-demo__completion-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;

	gap: 12px;

	margin-top: 25px;
}


/* =========================================================
   FOOTER / DISCLAIMER
========================================================= */

.sad-demo__footer {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;

	gap: 30px;

	margin-top: 22px;

	padding-top: 20px;

	border-top:
		1px solid
		var(--sad-border);
}


.sad-demo__disclaimer {
	display: flex;
	align-items: flex-start;

	gap: 12px;

	width: 100%;

	max-width: 960px;

	padding:
		15px
		17px;

	border:
		1px solid
		var(--sad-border);

	border-left:
		4px solid
		var(--sad-red);

	background:
		#FAFAFB;
}


.sad-demo__disclaimer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 24px;
	height: 24px;

	flex: 0 0 24px;

	border-radius: 50%;

	background:
		var(--sad-red);

	color:
		#FFFFFF;

	font-size: 13px;
	font-weight: 700;
}


.sad-demo__disclaimer-copy {
	min-width: 0;
}


.sad-demo__disclaimer-copy p {
	margin: 0;

	font-size: 12.5px;
	line-height: 1.62;

	color:
		var(--sad-muted);
}


.sad-demo__disclaimer-copy strong {
	color:
		var(--sad-text);
}


.sad-demo__disclaimer-copy details {
	margin-top: 8px;
}


.sad-demo__disclaimer-copy summary {
	cursor: pointer;

	color:
		var(--sad-blue);

	font-size: 12px;
	font-weight: 700;
}


.sad-demo__disclaimer-copy summary:hover {
	color:
		var(--sad-red);
}


.sad-demo__disclaimer-copy details p {
	margin-top: 8px;
}


.sad-demo__technical-link {
	display: inline-flex;
	align-items: center;

	flex: 0 0 auto;

	min-height: 38px;

	padding-top: 5px;

	color:
		var(--sad-blue);

	text-decoration: none;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.35;

	letter-spacing: 0.4px;

	transition:
		color 0.18s ease;
}


.sad-demo__technical-link:hover {
	color:
		var(--sad-red);
}


/* =========================================================
   TARGET STATE
========================================================= */

.sad-demo.is-showing-target
.sad-demo__canvas-wrap {
	box-shadow:
		inset 0 0 0 3px
		var(--sad-red);
}


.sad-demo.is-showing-target
.sad-demo__canvas-shell {
	border-color:
		rgba(191, 30, 45, 0.55);
}


/* =========================================================
   EXPLORE MODE VISUAL STATE
========================================================= */

.sad-demo.is-explore-mode
.sad-demo__canvas-shell {
	border-color:
		rgba(40, 56, 145, 0.4);
}


.sad-demo.is-explore-mode
.sad-demo__step-badge {
	background:
		var(--sad-blue);
}


/* =========================================================
   LARGE / MID DESKTOP
========================================================= */

@media (max-width: 1260px) {

	.sad-demo {
		padding: 28px;
	}


	.sad-demo__layout {
		grid-template-columns:
			minmax(0, 1.65fr)
			minmax(300px, 0.7fr);

		gap: 22px;
	}


	.sad-demo__stage-body {
		padding-left: 66px;
	}


	.sad-demo__canvas-topbar {
		flex-wrap: wrap;
	}


	.sad-demo__experience-tools {
		width: 100%;

		justify-content: flex-start;
	}
}


/* =========================================================
   TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 1050px) {

	.sad-demo {
		padding: 26px;
	}


	.sad-demo__layout {
		grid-template-columns:
			1fr;
	}


	.sad-demo__sidebar {
		display: grid;

		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap: 12px;
	}


	.sad-demo__stage-progress {
		grid-column:
			1 / -1;
	}


	.sad-demo__stage-card.is-active {
		grid-column:
			1 / -1;

		transform: none;
	}


	.sad-demo__stage-body {
		padding-left: 70px;
	}


	.sad-demo__footer {
		align-items: stretch;
	}


	.sad-demo__reveal-controls {
		grid-template-columns:
			auto
			minmax(130px, 250px)
			auto
			auto;
	}
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

	.sad-demo {
		padding: 18px;

		border-right: 0;
		border-left: 0;

		border-radius: 0;

		box-shadow: none;
	}


	.sad-demo__header {
		flex-direction: column;

		gap: 18px;

		margin-bottom: 22px;
	}


	.sad-demo__header-status {
		flex-direction: row;

		align-items: center;
		justify-content: space-between;

		width: 100%;
		min-width: 0;
	}


	.sad-demo__step-badge {
		min-width: 126px;
	}


	.sad-demo__stage-name {
		max-width: 55%;

		text-align: right;
	}


	.sad-demo__title {
		font-size: 29px;
	}


	.sad-demo__subtitle {
		font-size: 15px;
		line-height: 1.6;
	}


	.sad-demo__intro-note {
		padding:
			12px
			13px;
	}


	.sad-demo__layout {
		gap: 18px;
	}


	.sad-demo__canvas-topbar {
		align-items: flex-start;

		min-height: 0;

		padding:
			12px
			14px;
	}


	.sad-demo__canvas-instruction {
		font-size: 13px;
	}


	.sad-demo__experience-tools {
		display: grid;

		grid-template-columns:
			auto
			1fr;

		width: 100%;

		gap: 7px;
	}


	.sad-demo__timer {
		min-height: 35px;
	}


	.sad-demo__mode-switch {
		justify-self: stretch;
	}


	.sad-demo__mode-switch button {
		flex: 1;

		width: 50%;
	}


	.sad-demo__tool-badge {
		grid-column:
			1 / -1;

		justify-self: start;

		min-height: 31px;

		padding:
			7px
			9px;

		font-size: 9px;
	}


	/*
	 * Never change this to 4:3.
	 */
	.sad-demo__canvas {
		aspect-ratio:
			8 / 5;
	}


	.sad-demo__progress-section {
		padding-right: 14px;
		padding-left: 14px;
	}


	.sad-demo__progress-header {
		flex-wrap: wrap;
	}


	.sad-demo__progress-status {
		order: 3;

		width: fit-content;
	}


	.sad-demo__feedback {
		padding-right: 14px;
		padding-left: 14px;
	}


	.sad-demo__controls {
		flex-direction: column;

		align-items: stretch;

		gap: 10px;

		padding:
			11px
			14px
			15px;
	}


	.sad-demo__controls-left,
	.sad-demo__controls-right {
		width: 100%;
	}


	.sad-demo__controls-left {
		display: grid;

		grid-template-columns:
			repeat(
				3,
				minmax(0, 1fr)
			);
	}


	.sad-demo__controls-right
	.sad-demo__button {
		width: 100%;

		min-height: 46px;
	}


	.sad-demo__button {
		min-height: 44px;
	}


	.sad-demo__sidebar {
		display: flex;
	}


	.sad-demo__stage-card.is-active {
		order: -1;
	}


	.sad-demo__stage-card-header {
		grid-template-columns:
			38px
			minmax(0, 1fr)
			24px;

		min-height: 62px;

		padding: 13px;
	}


	.sad-demo__stage-number {
		width: 34px;
		height: 34px;

		font-size: 13px;
	}


	.sad-demo__stage-heading-wrap h3 {
		font-size: 16px;
	}


	.sad-demo__stage-body {
		padding:
			0
			14px
			15px
			62px;
	}


	.sad-demo__footer {
		flex-direction: column;

		gap: 14px;
	}


	.sad-demo__technical-link {
		min-height: 0;

		padding-top: 0;
	}


	.sad-demo__completion-overlay {
		padding: 20px;
	}


	.sad-demo__completion-inner h3 {
		font-size: 28px;
	}


	.sad-demo__detail-nav {
		left: 10px;
		right: 10px;
		bottom: 10px;

		gap: 10px;

		padding:
			10px
			11px;
	}


	.sad-demo__detail-nav strong {
		font-size: 12px;
	}


	.sad-demo__detail-nav
	.sad-demo__button {
		min-height: 34px;

		padding:
			8px
			9px;
	}


	.sad-demo__callout-panel {
		top: 10px;
		left: 10px;

		width:
			calc(100% - 20px);

		padding:
			14px
			39px
			14px
			14px;
	}


	.sad-demo__reveal-controls {
		left: 10px;
		right: 10px;
		bottom: 10px;

		width: auto;
		max-width: none;

		grid-template-columns:
			1fr
			1fr;

		transform: none;
	}


	.sad-demo__reveal-controls
	input[type="range"] {
		grid-column:
			1 / -1;

		grid-row:
			2;
	}


	.sad-demo__reveal-controls
	button {
		grid-column:
			1 / -1;
	}


	@keyframes sad-reveal-in {
		from {
			opacity: 0;

			transform:
				translateY(6px);
		}

		to {
			opacity: 1;

			transform:
				translateY(0);
		}
	}
}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 500px) {

	.sad-demo {
		padding: 14px;
	}


	.sad-demo__eyebrow {
		font-size: 12px;
	}


	.sad-demo__title {
		font-size: 26px;
	}


	.sad-demo__step-badge {
		min-width: 110px;
		min-height: 38px;

		font-size: 10px;
	}


	.sad-demo__stage-name {
		font-size: 11px;
	}


	.sad-demo__canvas-topbar {
		flex-direction: column;

		gap: 10px;
	}


	.sad-demo__experience-tools {
		grid-template-columns:
			1fr;
	}


	.sad-demo__timer,
	.sad-demo__mode-switch {
		width: 100%;
	}


	.sad-demo__timer {
		justify-content: space-between;
	}


	.sad-demo__mode-switch button {
		width: 50%;
	}


	.sad-demo__controls-left {
		grid-template-columns:
			1fr
			1fr;
	}


	.sad-demo__controls-left
	.sad-demo__button:last-child {
		grid-column:
			1 / -1;
	}


	.sad-demo__button {
		padding:
			11px
			10px;

		font-size: 11px;
	}


	.sad-demo__stage-body {
		padding-right: 13px;
		padding-left: 13px;
	}


	.sad-demo__completion-actions {
		flex-direction: column;
	}


	.sad-demo__completion-actions
	.sad-demo__button {
		width: 100%;
	}


	.sad-demo__completion-timing {
		width: 100%;

		grid-template-columns:
			1fr
			auto;

		text-align: left;
	}


	.sad-demo__completion-timing > em {
		text-align: right;
	}


	.sad-demo__disclaimer {
		padding: 13px;
	}


	.sad-demo__detail-nav {
		align-items: stretch;

		flex-direction: column;
	}


	.sad-demo__detail-nav
	.sad-demo__button {
		width: 100%;
	}


	.sad-demo__callout-panel > strong {
		font-size: 15px;
	}


	.sad-demo__callout-panel p {
		font-size: 11px;
	}


	.sad-demo__reveal-controls {
		padding: 9px;
	}
}


/* =========================================================
   ULTRA SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

	.sad-demo {
		padding-right: 10px;
		padding-left: 10px;
	}


	.sad-demo__header-status {
		gap: 10px;
	}


	.sad-demo__controls-left {
		grid-template-columns:
			1fr;
	}


	.sad-demo__controls-left
	.sad-demo__button:last-child {
		grid-column: auto;
	}


	.sad-demo__stage-card-header {
		grid-template-columns:
			36px
			minmax(0, 1fr)
			22px;

		gap: 9px;
	}


	.sad-demo__stage-body {
		padding-left: 12px;
	}


	.sad-demo__completion-timing {
		grid-template-columns:
			1fr;
		grid-template-areas:
			"label"
			"time"
			"quip";
	}


	.sad-demo__completion-timing > em {
		padding-right: 16px;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.sad-demo *,
	.sad-demo *::before,
	.sad-demo *::after {
		scroll-behavior:
			auto !important;

		animation-duration:
			0.001ms !important;

		animation-iteration-count:
			1 !important;

		transition-duration:
			0.001ms !important;
	}
}