/* =========================================================================
   THEME TWO — theme styles.
   This file should end up holding the pen's CSS verbatim
   (codepen.io/ahoidahl/pen/vYPjowz). codepen.io is blocked from the remote
   build environment, so paste it in by hand (or allow codepen.io in the
   environment network policy and have Claude pull it), replacing the
   TEMPORARY SCAFFOLD below. When you do, restyle .badge/.tags/.theme_actions
   in the pen's own visual language — they're the "theme for sale" chrome
   that has to survive the swap.
   Keep a dark background on html {} — without it the page flashes white on
   load (same rule as the main site).
   ========================================================================= */

/* ----- TEMPORARY SCAFFOLD (delete when the pen CSS lands) ----- */

* {
	box-sizing: border-box;
}

html {
	background: #0a0d12;
}

body {
	margin: 0;
	min-height: 100svh;
	display: grid;
	place-items: center;
	background: radial-gradient(120% 100% at 50% 0%, #131a24 0%, #0a0d12 60%);
	color: #d9e2ec;
	font-family: system-ui, sans-serif;
	line-height: 1.6;
}

.theme_demo {
	max-width: 640px;
	padding: 4rem 1.5rem;
}

.badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: .4rem 1rem;
	border: 1px solid #5b8fc9;
	border-radius: 999vw;
	color: #7fb2e8;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}

h1 {
	margin: 0 0 1rem;
	font-size: clamp(3rem, 10vw, 5rem);
	font-weight: 600;
	letter-spacing: .02em;
	color: #eef4fb;
}

.tags {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin: 0 0 2rem;
	padding: 0;
}

.tags li {
	padding: .25rem .7rem;
	border: 1px solid rgba(217, 226, 236, .25);
	border-radius: 999vw;
	font-size: 11px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: rgba(217, 226, 236, .7);
}

.theme_about p {
	margin: 0 0 1rem;
}

.theme_actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 2.5rem;
}

.btn {
	display: inline-block;
	padding: .8rem 1.6rem;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}

.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
}

.btn_solid {
	background: #7fb2e8;
	color: #0a0d12;
}

.btn_solid:hover,
.btn_solid:focus-visible {
	background: #9cc5f0;
}

.btn_line {
	border: 1px solid rgba(217, 226, 236, .4);
	color: #d9e2ec;
}

.btn_line:hover,
.btn_line:focus-visible {
	border-color: #7fb2e8;
	color: #7fb2e8;
}

/* ----- END TEMPORARY SCAFFOLD ----- */