@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inria+Sans:wght@400&family=Sansita:wght@700;800&display=swap');

:root {
	--bg: #b8c8e3;
	--ink: #0d1a37;
	--muted: #5f6f90;
	--line: #233455;
	--brown: #4b2a23;
	--cream: #ece9e4;
	--navy: #001743;
	--slate: #7587a8;
	--radius-card: 4px;
	--radius-btn: 9px;
}

* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	min-height: 100%;
	font-family: 'Inter', sans-serif;
	background: var(--bg);
	color: var(--ink);
}

.app-shell {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: stretch;
}

.app {
	width: min(100vw, 393px);
	min-height: 100vh;
	background: var(--bg);
}

.onboarding-screen {
	min-height: 100vh;
	padding: 24px;
	display: flex;
	align-items: center;
}

.intro-screen {
	min-height: 100vh;
	padding: 25px;
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: center;
	justify-content: center;
}

.materials-screen {
	min-height: 100vh;
	padding: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.time-screen {
	min-height: 100vh;
	padding: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pose-screen {
	min-height: 100vh;
	padding: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.onboarding-card {
	width: 100%;
	border: 1px solid var(--line);
	border-radius: var(--radius-card);
	padding: 30px 24px 22px;
	min-height: 550px;
}

.materials-card {
	width: 100%;
	border: 1px solid #000c26;
	border-radius: 3px;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	gap: 75px;
	padding: 25px;
}

.time-card {
	width: 100%;
	border: 1px solid #000c26;
	border-radius: 3px;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	gap: 75px;
	padding: 25px;
}

.pose-card {
	width: 100%;
	border: 1px solid #000c26;
	border-radius: 3px;
	background-color: transparent;
	display: flex;
	flex-direction: column;
	gap: 75px;
	padding: 25px;
}

.materials-title-wrap {
	height: 56px;
	position: relative;
	width: 100%;
}

.time-title-wrap {
	height: 56px;
	position: relative;
	width: 100%;
}

.pose-title-wrap {
	height: 56px;
	position: relative;
	width: 100%;
}

.materials-title {
	margin: 0;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 312px;
	text-align: center;
	font-family: 'Sansita', sans-serif;
	font-size: 32px;
	line-height: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000c26;
	font-weight: 700;
}

.time-title {
	margin: 0;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 312px;
	text-align: center;
	font-family: 'Sansita', sans-serif;
	font-size: 32px;
	line-height: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000c26;
	font-weight: 700;
}

.pose-title {
	margin: 0;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 312px;
	text-align: center;
	font-family: 'Sansita', sans-serif;
	font-size: 32px;
	line-height: 28px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #000c26;
	font-weight: 700;
}

.materials-content {
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: 100%;
}

.time-content {
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: 100%;
}

.pose-content {
	display: flex;
	flex-direction: column;
	gap: 25px;
	width: 100%;
}

.materials-question {
	margin: 0;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 16px;
	color: #000c26;
}

.time-question {
	margin: 0;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 16px;
	color: #000c26;
}

.pose-question {
	margin: 0;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 16px;
	color: #000c26;
}

.materials-options {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.time-options {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.pose-options {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
}

.materials-option {
	width: 100%;
	min-height: 58px;
	padding: 16px 10px 17px;
	border: 1px solid #402824;
	border-radius: 9px;
	background: transparent;
	color: #402824;
	font-family: 'Inria Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.materials-option.active {
	background: #402824;
	color: #fefaf5;
	border-color: #402824;
}

.time-option {
	width: 100%;
	min-height: 58px;
	padding: 16px 10px 17px;
	border: 1px solid #402824;
	border-radius: 9px;
	background: transparent;
	color: #402824;
	font-family: 'Inria Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.time-option.active {
	background: #402824;
	color: #fefaf5;
	border-color: #402824;
}

.pose-option {
	width: 100%;
	min-height: 58px;
	padding: 16px 10px 17px;
	border: 1px solid #402824;
	border-radius: 9px;
	background: transparent;
	color: #402824;
	font-family: 'Inria Sans', sans-serif;
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
}

.pose-option.active {
	background: #402824;
	color: #fefaf5;
	border-color: #402824;
}

.materials-next {
	width: 100%;
	min-height: 58px;
	padding: 16px 10px 17px;
	border: 1px solid #402824;
	border-radius: 9px;
	background: #ffffff;
	color: #000c26;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

.time-next {
	width: 100%;
	min-height: 58px;
	padding: 16px 10px 17px;
	border: 1px solid #402824;
	border-radius: 9px;
	background: #ffffff;
	color: #000c26;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

.pose-next {
	width: 100%;
	min-height: 58px;
	padding: 16px 10px 17px;
	border: 1px solid #402824;
	border-radius: 9px;
	background: #ffffff;
	color: #000c26;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0;
	text-transform: uppercase;
	cursor: pointer;
}

.intro-box {
	width: 100%;
	height: 227.04px;
	border: 1px solid #000c26;
	border-radius: 3px;
	background-color: #fefaf5;
	background-image: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 25px;
}

.intro-box .intro-title {
	font-size: 32px;
	line-height: 28px;
	max-width: 312px;
	color: #000c26;
	letter-spacing: 1px;
	font-family: 'Sansita', sans-serif;
	font-weight: 700;
}

.intro-subtitle {
	margin: 14px 0 0;
	text-align: center;
	font-family: 'Inria Sans', sans-serif;
	font-size: 14px;
	line-height: 16px;
	color: #000c26;
	letter-spacing: 0;
}

.btn-intro {
	margin: 0;
	display: block;
	width: 100%;
	max-width: 275px;
	min-height: 58px;
	padding: 16px 10px 17px;
	background-color: #402824;
	color: #fefaf5;
	border-color: #000c26;
	font-size: 15px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0;
}

.title {
	margin: 0;
	text-align: center;
	font-family: 'Sansita', serif;
	font-size: clamp(2.45rem, 9vw, 3.05rem);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.onboarding-question {
	margin: 62px 0 20px;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.4;
}

.intro-copy {
	margin: 18px auto 0;
	max-width: 290px;
	text-align: center;
	font-size: 0.95rem;
	color: #2b3c61;
	line-height: 1.45;
}

.option-stack {
	display: grid;
	gap: 16px;
}

.btn,
.option-btn {
	width: 100%;
	border: 1px solid #6f4f47;
	border-radius: var(--radius-btn);
	min-height: 56px;
	background: transparent;
	color: var(--brown);
	font-family: 'Inter', sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	cursor: pointer;
}

.option-btn.active {
	background: var(--brown);
	color: #fff;
}

.onboarding-footer {
	margin-top: 74px;
}

.btn-secondary {
	background: var(--cream);
	color: var(--ink);
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.btn-primary {
	background: var(--navy);
	color: #fff;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.practice-screen,
.compare-screen {
	min-height: 100vh;
	width: 100%;
	background: #cde0fe;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.practice-header {
	width: 100%;
	min-height: 69.333px;
	border-bottom: 1.333px solid #000c26;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 16px 16px 1.333px;
}

.compare-header,
.review-header {
	justify-content: flex-start;
}

.practice-header-copy {
	height: 36px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	min-width: 0;
	flex: 1 0 0;
}

.compare-header-copy,
.review-header-copy {
	flex: 0 1 auto;
}

.phase-line {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #45567b;
}

.image-line {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #000c26;
}

.timer {
	margin: 0;
	font-family: 'Consolas', monospace;
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	color: #0a0a0a;
	text-align: right;
	white-space: nowrap;
}

.practice-stage,
.compare-stage {
	width: 100%;
	border-bottom: 1px solid #000c26;
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 25px 25px 26px;
}

.practice-image-frame {
	width: 100%;
	max-width: 344.305px;
	aspect-ratio: 331 / 508;
	margin: 0 auto;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
}

.practice-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 3px;
}

.compare-placeholder {
	width: 100%;
	max-width: 345px;
	height: 529px;
	margin: 0 auto;
	background: rgba(35, 47, 73, 0.56);
	position: relative;
	overflow: hidden;
}

#cameraContainer {
	width: 100%;
	max-width: 345px;
	height: 529px;
	margin: 0 auto;
	background: rgba(35, 47, 73, 0.56);
	position: relative;
	overflow: hidden;
}

.camera-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: #1a1a1a;
}

.upload-placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	padding: 24px;
	background: rgba(255, 250, 245, 0.9);
	border: 1px dashed #000c26;
	color: #000c26;
	font-family: 'Inter', sans-serif;
}

.upload-placeholder p {
	margin: 0;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	max-width: 280px;
}

.compare-placeholder.upload-placeholder {
	height: 529px;
	max-width: 345px;
	margin: 0 auto;
}

.upload-action {
	border: 1px solid #402824;
	background: #402824;
	color: #fefaf5;
	border-radius: 9px;
	padding: 12px 18px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	cursor: pointer;
}

.overlay-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.overlay-canvas.hidden {
	display: none;
}

.reference-caption {
	margin: 0;
	font-family: 'Inter', sans-serif;
	font-size: 12px;
	line-height: 16px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	color: #45567b;
}

.practice-footer,
.compare-footer {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 25px;
}

.practice-secondary,
.practice-primary,
.completion-secondary,
.completion-primary {
	width: 100%;
	height: 57px;
	padding: 16px 10px 17px;
	border-radius: 9px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: 'Inter', sans-serif;
	font-size: 15px;
	line-height: 24px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}

.practice-secondary,
.completion-secondary {
	background: #ffffff;
	border: 1px solid #402824;
	color: #000c26;
}

.practice-primary,
.completion-primary {
	background: #000c26;
	border: 1px solid #402824;
	color: #ffffff;
}

.practice-button-icon {
	width: 11.979px;
	height: 16px;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.practice-button-icon img {
	display: block;
	width: 100%;
	height: 100%;
}

.single-button-footer {
	padding-top: 60px;
	padding-bottom: 50px;
	height: 168px;
	justify-content: flex-start;
}

.finish-button {
	margin-top: 0;
}

.compare-footer {
	height: 168px;
	padding-top: 60px;
	padding-bottom: 50px;
	justify-content: flex-start;
	align-items: center;
}

.review-screen {
	min-height: 100vh;
	background: #cde0fe;
	padding-bottom: 24px;
}

.review-stage {
	padding: 25px 25px 10px;
	border-bottom: 1px solid #000c26;
}

.comparison-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.comparison-panel {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.comparison-label {
	margin: 0;
	font-family: 'Inria Sans', sans-serif;
	font-size: 13px;
	line-height: 16px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: #000c26;
}

.comparison-frame {
	width: 100%;
	aspect-ratio: 331 / 508;
	border-radius: 3px;
	overflow: hidden;
	background: rgba(255, 250, 245, 0.9);
	border: 1px solid #000c26;
	display: flex;
	align-items: center;
	justify-content: center;
}

.comparison-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.comparison-placeholder {
	padding: 18px;
	text-align: center;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #45567b;
}

.comparison-caption {
	margin: 14px 0 0;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #000c26;
	text-align: center;
}

.review-footer {
	padding: 24px 25px 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.camera-circle {
	width: 68px;
	height: 68px;
	border: none;
	border-radius: 999px;
	background: #000c26;
	cursor: pointer;
	margin: 0 auto;
	transition: opacity 0.2s, background 0.2s;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.camera-circle:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	background: #4a5a75;
}

.camera-circle:not(:disabled):active {
	transform: scale(0.95);
}

.camera-circle:not(:disabled):hover {
	background: #0a0f1a;
}

.completion-screen {
	position: relative;
	min-height: 100vh;
	width: 100%;
	background: #cde0fe;
	padding: 121px 24px 24px;
}

.completion-title {
	margin: 0;
	font-family: 'Sansita', sans-serif;
	font-size: 32px;
	line-height: 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	color: #000000;
}

.completion-subtitle {
	margin: 39px auto 0;
	max-width: 268px;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	line-height: 23px;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	color: #000c26;
}

.certificate-card {
	width: 100%;
	height: 227.04px;
	margin: 39px 0 0;
	padding: 25px;
	border: 1px solid #000c26;
	border-radius: 3px;
	background: #fefaf5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.certificate-icon-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 10px;
}

.certificate-header-wrap {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.certificate-title {
	margin: 0;
	font-family: 'Sansita', sans-serif;
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: center;
	color: #000c26;
}

.certificate-name {
	margin: 0;
	font-family: 'Inria Sans', sans-serif;
	font-size: 20px;
	line-height: 16px;
	font-weight: 400;
	text-align: center;
	color: #000000;
}

.certificate-name-input {
	width: min(100%, 217px);
	height: 26px;
	margin: 0;
	padding: 0 4px;
	border: none;
	border-bottom: 1px solid transparent;
	background: transparent;
	font-family: 'Inria Sans', sans-serif;
	font-size: 20px;
	line-height: 16px;
	font-weight: 400;
	text-align: center;
	color: #000000;
	outline: none;
}

.certificate-name-input:focus {
	border-bottom-color: #000c26;
}

.certificate-name-input::placeholder {
	color: #000000;
	opacity: 0.65;
}

.certificate-line {
	margin: 12px 0 0;
	font-family: 'Inria Sans', sans-serif;
	font-size: 14px;
	line-height: 16px;
	font-weight: 400;
	text-align: center;
	color: #000c26;
}

.completion-icon {
	width: 58px;
	height: 58px;
	object-fit: contain;
	transform: rotate(-17deg);
}

.completion-actions {
	margin-top: 39px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.completion-primary {
	background: #402824;
	border-color: #000c26;
	color: #fefaf5;
}

.hidden {
	display: none;
}

.modal {
	position: fixed;
	inset: 0;
	background: rgba(3, 8, 21, 0.5);
	display: grid;
	place-items: end center;
	padding: 16px;
	z-index: 10;
}

.modal-panel {
	width: min(420px, 100%);
	border-radius: 16px 16px 0 0;
	background: #fff;
	padding: 16px;
	display: grid;
	gap: 10px;
}

.camera-preview {
	width: 100%;
	max-height: 240px;
	border-radius: 10px;
	background: #000;
}

.tiny {
	font-size: 14px;
	color: #3f4a62;
	text-align: center;
}

.hidden {
	display: none;
}

@media (max-width: 420px) {
	.title {
		font-size: 2.45rem;
	}

	.onboarding-question {
		margin-top: 48px;
		font-size: 1rem;
	}

	.btn,
	.option-btn {
		font-size: 1rem;
		min-height: 54px;
	}

	.phase-line {
		font-size: 0.9rem;
	}

	.image-line {
		font-size: 1rem;
	}

	.timer {
		font-size: 1.95rem;
	}

	.reference-caption {
		font-size: 0.9rem;
	}

	.completion-title {
		font-size: 2.25rem;
	}

	.comparison-grid {
		grid-template-columns: 1fr;
	}

	.certificate-title {
		font-size: 1.75rem;
	}
}