:root {
	--bg: #f6f7fb;
	--card: #ffffffcc;
	--text: #1f3342;
	--muted: #5b7182;
	--peach: #ffd6c8;
	--mint: #ccefe0;
	--sky: #cfe7ff;
	--line: #d8e2ea;
	--accent: #3f7ea6;
	--accent-hover: #356b8d;
	--shadow: 0 20px 50px rgba(44, 76, 102, 0.14);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	color: var(--text);
	background:
		radial-gradient(1200px 700px at -15% -20%, var(--peach), transparent 60%),
		radial-gradient(900px 600px at 120% 100%, var(--mint), transparent 65%),
		linear-gradient(160deg, #fdfdff 0%, var(--bg) 100%);
	display: grid;
	place-items: center;
	overflow: hidden;
}

.bg-shape {
	position: fixed;
	width: 340px;
	height: 340px;
	border-radius: 42% 58% 65% 35% / 35% 47% 53% 65%;
	filter: blur(2px);
	opacity: 0.45;
	z-index: 0;
	animation: drift 12s ease-in-out infinite alternate;
}

.bg-shape-one {
	top: -90px;
	right: -70px;
	background: var(--sky);
}

.bg-shape-two {
	bottom: -120px;
	left: -80px;
	background: var(--peach);
	animation-duration: 15s;
}

.layout {
	width: min(92vw, 760px);
	z-index: 1;
}

.card {
	backdrop-filter: blur(10px);
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 28px;
	padding: clamp(1.6rem, 3.2vw, 2.8rem);
	box-shadow: var(--shadow);
	animation: rise 700ms ease-out both;
}

.eyebrow {
	margin: 0;
	color: var(--accent);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.78rem;
}

h1 {
	margin: 0.4rem 0 0.8rem;
	font-family: "Fraunces", Georgia, serif;
	font-size: clamp(2rem, 4.6vw, 3.2rem);
	line-height: 1.1;
}

.subtitle {
	margin: 0 0 1.4rem;
	color: var(--muted);
	font-size: clamp(0.98rem, 2vw, 1.08rem);
}

.excuse {
	margin: 0;
	min-height: 120px;
	border: 1px solid var(--line);
	background: linear-gradient(135deg, #ffffffdd, #f6fbffcc);
	border-radius: 18px;
	padding: 1rem 1.1rem;
	font-size: clamp(1.08rem, 2.7vw, 1.5rem);
	font-weight: 500;
	line-height: 1.45;
	color: #243c4f;
}

.btn {
	margin-top: 1rem;
	display: inline-block;
	border: 0;
	border-radius: 12px;
	padding: 0.75rem 1.1rem;
	font-size: 0.98rem;
	font-weight: 700;
	font-family: inherit;
	color: #ffffff;
	background: linear-gradient(135deg, var(--accent), #4f96c4);
	cursor: pointer;
	box-shadow: 0 12px 26px rgba(63, 126, 166, 0.28);
	transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.btn:hover {
	transform: translateY(-2px);
	background: linear-gradient(135deg, var(--accent-hover), #4586b0);
	box-shadow: 0 16px 30px rgba(53, 107, 141, 0.33);
}

.btn:active {
	transform: translateY(0);
}

.history-title {
	margin: 1.2rem 0 0.6rem;
	font-family: "Fraunces", Georgia, serif;
	font-size: 1.15rem;
	color: var(--text);
}

.history-list {
	margin: 0;
	padding-left: 1.25rem;
	max-height: 180px;
	overflow-y: auto;
	color: var(--muted);
}

.history-list li + li {
	margin-top: 0.35rem;
}

@keyframes rise {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes drift {
	from {
		transform: translateY(-8px) rotate(-3deg);
	}
	to {
		transform: translateY(8px) rotate(3deg);
	}
}

@media (max-width: 520px) {
	.card {
		border-radius: 22px;
	}

	.excuse {
		min-height: 112px;
	}
}