@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=Manrope:wght@400;600;700&display=swap');

:root {
	--bg-deep: #07131c;
	--bg-mid: #0f2231;
	--bg-accent: #1c4662;
	--panel: rgba(10, 28, 40, 0.82);
	--panel-border: rgba(135, 190, 224, 0.25);
	--text-main: #edf7ff;
	--text-soft: #b8d2e5;
	--primary: #ff8a3d;
	--primary-hover: #ff9f5f;
	--success: #4fd08b;
	--shadow: 0 18px 40px rgba(1, 9, 16, 0.45);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	padding: 2rem 1rem 3rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.85rem;
	font-family: 'Manrope', 'Segoe UI', sans-serif;
	color: var(--text-main);
	background:
		radial-gradient(circle at 12% 15%, rgba(255, 138, 61, 0.25), transparent 30%),
		radial-gradient(circle at 88% 30%, rgba(86, 157, 214, 0.32), transparent 36%),
		linear-gradient(145deg, var(--bg-deep), var(--bg-mid) 48%, var(--bg-accent));
}

.title_card {
	margin: 0;
	text-align: center;
	font-family: 'Space Grotesk', 'Trebuchet MS', sans-serif;
	font-size: clamp(1.7rem, 4.5vw, 2.8rem);
	letter-spacing: 0.04em;
	color: #f6fbff;
	text-shadow: 0 6px 24px rgba(2, 12, 20, 0.35);
}

.instruction {
	margin: 0.1rem 0 0.35rem;
	color: var(--text-soft);
	font-size: clamp(0.95rem, 2.4vw, 1.05rem);
	text-align: center;
}

#canvas {
	width: 280px;
	height: 280px;
	border-radius: 18px;
	border: 2px solid rgba(171, 219, 250, 0.4) !important;
	box-shadow: var(--shadow), inset 0 0 0 2px rgba(122, 195, 240, 0.12);
	transition: transform 180ms ease, box-shadow 220ms ease;
}

#canvas:hover {
	transform: translateY(-2px);
	box-shadow: 0 22px 46px rgba(0, 7, 13, 0.52), inset 0 0 0 2px rgba(122, 195, 240, 0.16);
}

.btn {
	margin: 0.35rem 0.35rem 0.15rem;
	border: none;
	border-radius: 999px;
	padding: 0.72rem 1.35rem;
	font-family: 'Space Grotesk', 'Segoe UI', sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #1a232a;
	background: linear-gradient(135deg, var(--primary), #ffb173);
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(255, 138, 61, 0.34);
	transition: transform 140ms ease, box-shadow 180ms ease, background 180ms ease;
}

.btn:hover {
	transform: translateY(-1px) scale(1.01);
	background: linear-gradient(135deg, var(--primary-hover), #ffc18f);
	box-shadow: 0 14px 26px rgba(255, 138, 61, 0.42);
}

.btn:active {
	transform: translateY(1px) scale(0.99);
}

#result {
	margin: 0.7rem 0 0;
	padding: 0.72rem 1.1rem;
	min-width: min(90vw, 420px);
	border-radius: 12px;
	border: 1px solid rgba(141, 201, 238, 0.3);
	background: var(--panel);
	color: #e6f6ff;
	font-weight: 600;
	text-align: center;
	backdrop-filter: blur(6px);
}

#result:not(:empty) {
	box-shadow: 0 10px 28px rgba(3, 11, 18, 0.34);
}

#mnistPreview {
	margin-top: 0.35rem;
	border-radius: 12px;
	border: 2px solid rgba(165, 223, 255, 0.5) !important;
	box-shadow: 0 12px 26px rgba(0, 10, 18, 0.45);
	background: #000 !important;
}

@media (max-width: 600px) {
	body {
		padding-top: 1.4rem;
		gap: 0.7rem;
	}

	.btn {
		width: min(42vw, 170px);
		margin: 0.3rem 0.2rem;
		padding: 0.68rem 1rem;
	}

	#result {
		font-size: 0.93rem;
		padding: 0.65rem 0.9rem;
	}
}