/* Custom styling — inspired by marcomanfrin.me (Poppins + teal #1ea0aa) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
	--accent: rgb(30, 160, 170);
	--accent-hover: rgb(24, 138, 147);
	--accent-soft: rgba(30, 160, 170, 0.10);
	--accent-line: rgba(30, 160, 170, 0.30);
	--ink: rgb(68, 68, 68);
	--muted: #8a8f94;
	--rule: #ececec;
	--card: #ffffff;
	--bg: #fafbfc;
	--shadow-soft: rgba(0, 0, 0, 0.08);
}

body {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--ink);
	background:
		radial-gradient(1000px 520px at 100% -8%, var(--accent-soft) 0%, transparent 55%),
		var(--bg);
	max-width: 880px;
	margin: 0 auto;
	padding: 56px 36px 120px;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Custom scrollbar — matching the portfolio */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 25px; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 30px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

h1, h2, h3, h4 {
	font-family: "Poppins", sans-serif;
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: 1.3;
}

h1 {
	font-size: 2.1em;
	font-weight: 700;
	margin: 0.2em 0 0.6em;
	padding-bottom: 0.4em;
	border-bottom: 3px solid var(--accent);
}

h2 {
	font-size: 1.45em;
	font-weight: 600;
	margin-top: 2.4em;
	padding-bottom: 0.25em;
	border-bottom: 1px solid var(--rule);
}

h2::before {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	margin-right: 0.55em;
	border-radius: 50%;
	background: var(--accent);
	vertical-align: middle;
}

h3 {
	font-size: 1.16em;
	font-weight: 600;
	margin-top: 1.8em;
	color: var(--accent);
}

p { margin: 0.9em 0; }

a {
	color: var(--accent);
	font-weight: 500;
	border-bottom: 1px solid var(--accent-line);
	transition: color 0.15s ease, border-color 0.15s ease;
}
a:hover {
	text-decoration: none;
	color: var(--accent-hover);
	border-bottom-color: var(--accent);
}

strong { font-weight: 600; color: #2c2c2c; }

hr {
	border: 0;
	height: 1px;
	background: linear-gradient(to right, transparent, var(--rule) 20%, var(--rule) 80%, transparent);
	margin: 2.6em 0;
}

/* Tables — separated rows + teal header, like marcomanfrin.me */
table {
	border-collapse: separate;
	border-spacing: 0;
	width: 100%;
	margin: 1.6em 0;
	font-size: 0.9em;
	background: var(--card);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 4px 18px var(--shadow-soft);
}

table > thead > tr > th {
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	border: none;
	padding: 12px 16px;
}

table > tbody > tr > td,
table > tbody > tr > th {
	padding: 11px 16px;
	border: none;
}

table > tbody > tr:nth-child(even) { background: rgba(30, 160, 170, 0.045); }
table > tbody > tr:hover { background: var(--accent-soft); }
table > tbody > tr + tr > td { border-top: 1px solid var(--rule); }

/* Code */
code {
	font-family: "JetBrains Mono", Menlo, Monaco, Consolas, monospace;
	font-size: 0.84em;
}
:not(pre) > code {
	background: var(--accent-soft);
	color: var(--accent-hover);
	padding: 0.14em 0.5em;
	border-radius: 5px;
	font-weight: 500;
}
pre {
	background: #fbfcfc;
	border: 1px solid var(--rule);
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 2px 10px var(--shadow-soft);
}
pre code { background: none; color: var(--ink); padding: 0; font-weight: 400; }

/* Blockquotes / callouts */
blockquote {
	margin: 1.4em 0;
	padding: 0.7em 1.3em;
	background: var(--accent-soft);
	border-left: 4px solid var(--accent);
	border-radius: 0 12px 12px 0;
	color: var(--ink);
}
blockquote p { margin: 0.4em 0; }

/* Lists */
ul, ol { padding-left: 1.5em; }
li { margin: 0.35em 0; }
li::marker { color: var(--accent); }

/* Figures: images + the markdown caption paragraph that follows */
img {
	display: block;
	margin: 1.5em auto 0.4em;
	border-radius: 16px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}
p[align="center"] { margin-bottom: 0.2em; }
p[align="center"] + p em,
p > em:only-child {
	display: block;
	text-align: center;
	font-size: 0.86em;
	font-weight: 500;
	color: var(--muted);
}

/* Author block (first paragraph after H1) */
h1 + p {
	font-size: 0.95em;
	color: var(--muted);
	line-height: 1.95;
}

/* Checklists */
input[type="checkbox"] { margin-right: 0.5em; accent-color: var(--accent); }

@media (max-width: 600px) {
	body { padding: 28px 18px 80px; font-size: 15px; }
	h1 { font-size: 1.7em; }
}