:root {
	--font-mono: 'Ubuntu Mono', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Cascadia Code', Consolas, monospace;
	--bg-body: #0f1419;
	--bg-surface: #151f28;
	--bg-surface-alt: #1a2632;
	--bg-surface-subtle: #1b2631;
	--bg-surface-hover: #243342;
	--bg-th: #1e2d3b;
	--accent-primary: #38b2ac;
	--accent-light: #4fd1c5;
	--to-theme-text: #555;
	--to-theme-bg: #f5f5dc;
	--accent-success: #27ae60;
	--text-main: #e0e0e0;
	--text-subtle: #8fa0b5;
	--text-muted: #a0aec0;
	--text-inverse: #0f1419;
	--text-warm: #fff4e4;
	--border-color: #2d3748;
	--border-light: #4a5a6b;
	--border-color-container: #131c23;
	--radius-sm: 3px;
	--radius-md: 4px;
	--radius-lg: 8px;
	--gap: 1.5rem;
	--header-h: 64px;
	--transition-default: 0.2s ease;
}

[data-theme="light"] {
	--bg-body: #e8e8e8;
	--bg-surface: #fff;
	--bg-surface-alt: #f5f5dc;
	--bg-surface-subtle: #f2f5f8;
	--bg-surface-hover: #e2e6ea;
	--bg-th: #ddd;
	--accent-primary: #333;
	--accent-light: #00e;
	--to-theme-text: #4fd1c5;
	--to-theme-bg: #151f28;
	--accent-success: #27ae60;
	--text-main: #111;
	--text-muted: #4d4d4d;
	--text-subtle: #5e5e5e;
	--text-inverse: #fff;
	--text-warm: #000;
	--border-color: #ccc;
	--border-light: #8a8a8a;
	--border-color-container: #a79f8f;
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;
	--transition-default: 0s;
}

[data-theme="light"] #title:after {
	content: attr(site_title-l);
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
}

[data-theme="light"] #site_tagline:after {
	content: attr(tagline-l);
}

[data-theme="light"] .content i:before,
[data-theme="light"] .content em:before { content: '_'; }
[data-theme="light"] .content i:after,
[data-theme="light"] .content em:after { content: '_'; }

[data-theme="light"] .content b:before,
[data-theme="light"] .content strong:before { content: '**'; }
[data-theme="light"] .content b:after,
[data-theme="light"] .content strong:after { content: '**'; }

[data-theme="light"] .content del:before,
[data-theme="light"] .content s:before,
[data-theme="light"] .content strike:before { content: '~~'; }
[data-theme="light"] .content del:after,
[data-theme="light"] .content s:after,
[data-theme="light"] .content strike:after { content: '~~'; }

[data-theme="light"] .content kbd:before,
[data-theme="light"] .content kbd:after { content: '`'; }

[data-theme="light"] .content code pre:before,
[data-theme="light"] pre code:before { content: '```'; }
[data-theme="light"] .content code pre:after,
[data-theme="light"] pre code:after { content: '```'; }

[data-theme="light"] .content sub:before,
[data-theme="light"] .content sub:after { content: '~'; }

[data-theme="light"] .content sup:before,
[data-theme="light"] .content sup:after { content: '^'; }

[data-theme="light"] .content h1:before { content: '# '; }
[data-theme="light"] .content h2:before { content: '## '; }
[data-theme="light"] .content h3:before { content: '### '; }
[data-theme="light"] .content h4:before { content: '#### '; }
[data-theme="light"] .content h5:before { content: '##### '; }
[data-theme="light"] .content h6:before { content: '###### '; }

[data-theme="light"] .content table,
[data-theme="light"] .content tr,
[data-theme="light"] .content td {
	border: dashed 2px;
}

[data-theme="light"] .content a:before { content: '['; }
[data-theme="light"] .content a:after { content: '](' attr(href) ')'; }

[data-theme="light"] .content .footnote-ref:before { content: '[^'; }
[data-theme="light"] .content .footnote-ref:after { content: ']'; }

[data-theme="light"] .content ul li::before { content: '* '; }
[data-theme="light"] .footnotes li::before { content: '[^' counter(footnote-counter) '] '; }
[data-theme="light"] .footnotes li p { display: inline; }

html.js .section {
	display: none;
}

html.js .section.active {
	display: block;
	animation: fadeIn 0.3s ease;
}

html {
	scroll-behavior: smooth;
	margin: 0;
	font-size: 14px;
	scroll-padding-top: calc(var(--header-h) + var(--gap));
}

body {
	top: 0 !important;
	margin: 0;
	padding: 20px;
	font-family: var(--font-mono);
	font-size: clamp(1rem, 2.5vw, 1.5rem);
	font-weight: 500;
	line-height: 1.6;
	background-color: var(--bg-body);
	color: var(--text-main);
}

dfn { font-style: italic; }
small { font-size: 80%; }

a {
	color: var(--accent-light);
	text-decoration: underline;
}

a:hover {
	text-decoration: underline;
}

pre, code {
	font-family: var(--font-mono);
	background-color: var(--bg-body);
	color: var(--accent-primary);
	border-radius: var(--radius-md);
}

pre {
	padding: 15px;
	overflow-x: auto;
	border: 1px solid var(--border-color);
	white-space: pre-wrap;
}

blockquote {
	padding-left: 15px;
	margin-left: 0;
	border-left: 4px solid var(--accent-primary);
	color: var(--text-muted);
	font-style: italic;
}

hr {
	margin: 40px 0;
	border: 0;
	border-top: 1px solid var(--border-color);
}

body > .skiptranslate,
.goog-logo-link,
.gskiptranslate,
.goog-te-gadget span,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
div#goog-gt-tt {
	display: none !important;
}

h1, h2, h3, h4, h5, h6 {
	padding-bottom: 8px;
	color: var(--accent-primary);
	font-family: var(--font-mono);
	border-bottom: 1px solid var(--border-color);
}

#title {
	min-height: clamp(1.8rem, 3.5vw, 2.4rem);
	line-height: 1.2;
	contain: layout;
	display: block;
	width: auto;
	overflow: visible;
	margin-top: 0;
	padding-bottom: 15px;
	border-bottom: 2px solid var(--accent-primary);
	font-size: clamp(1.8rem, 3.5vw, 2.4rem);
	color: var(--accent-light);
	text-align: center;
}

#site_tagline {
	text-align: center;
	font-style: italic;
	color: var(--accent-light);
	margin-bottom: 30px;
}

#site_tagline:after {
	content: attr(tagline-d);
}

h2 {
	margin-top: 40px;
	color: var(--accent-light);
}

h3 {
	color: var(--accent-primary);
	margin-top: 30px;
}

table {
	width: 100%;
	margin: 20px 0;
	border-collapse: collapse;
}

th, td {
	border: 1px solid var(--border-color);
	padding: 10px;
	text-align: left;
}

th {
	background-color: var(--bg-th);
	color: var(--accent-light);
}

tr {
	background-color: var(--bg-surface);
}

tr:nth-child(even) {
	background-color: var(--bg-surface-subtle);
}

ul, ol {
	padding-left: 20px;
}

li {
	margin-bottom: 8px;
}

.goog-te-gadget {
	color: transparent !important;
	font-size: 0;
}

.goog-text-highlight {
	background: transparent !important;
	box-shadow: transparent !important;
}

.goog-te-banner-frame {
	display: none !important;
}

#google_translate_element {
	display: inline-flex !important;
	vertical-align: middle;
	margin-left: 6px;
	min-height: 38px;
	contain: layout;
	align-items: center;
	cursor: pointer;
}

.skiptranslate iframe {
	display: none !important;
}

#google_translate_element .goog-te-gadget,
#google_translate_element div {
	display: inline !important;
}

#google_translate_element select,
.language_local {
	display: inline-block;
	padding: 4px 8px;
	background: var(--bg-surface);
	color: var(--text-warm);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 13px;
	vertical-align: middle;
	text-decoration: none;
}

.container {
	max-width: 900px;
	margin: 0 auto;
	padding: 1rem;
	background-color: var(--bg-surface);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border-color-container);
	box-shadow: 0 4px 12px rgba(28, 26, 24, 0.5);
}

.container [id],
h1[id], h2[id], h3[id], h4[id], h5[id], h6[id] {
	scroll-margin-top: calc(var(--header-h) + var(--gap));
}

.site_nav {
	font-size: 1.2rem;
	font-weight: 600;
}

#site_nav {
	position: sticky;
	padding: 4px;
	top: 0;
	z-index: 100;
	background: var(--bg-surface-alt);
	border-bottom: 1px dashed var(--border-color-container);
	white-space: normal;
}

#site_nav a.active-btn {
	color: var(--text-inverse);
	background-color: var(--accent-primary);
	border-radius: 2px;
	padding: 2px 4px;
	white-space: nowrap;
}

#themeToggle {
	color: var(--to-theme-text);
	background-color: var(--to-theme-bg);
	padding: 2px 4px;
	white-space: nowrap;
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.rss-btn {
	color: #000;
	background: #ff8c00 !important;
	padding: 2px 4px;
	text-decoration: none;
	border-radius: var(--radius-sm);
	font-weight: bold;
}

.container > .toc {
	padding: 20px;
	margin-bottom: 40px;
	background-color: var(--bg-surface-alt);
	border: 1px dashed var(--accent-primary);
	border-radius: var(--radius-md);
}

.container > .toc h2 {
	margin-top: 0;
	border-bottom: 1px dashed var(--accent-primary);
	color: var(--accent-light);
	font-size: 1.4em;
}

.container > .toc ul {
	list-style-type: none;
	padding-left: 0;
}

.container > .toc ul ul {
	padding-left: 20px;
	list-style-type: square;
}

.container > .toc li {
	margin-bottom: 8px;
}

.container > .toc a {
	font-weight: 700;
}

.toc-container {
	display: block;
	padding: 12px 16px;
	margin-bottom: 1.5rem;
	background-color: var(--bg-surface-alt);
	border: 1px solid var(--border-color);
	border-left: 3px solid var(--accent-primary);
	border-radius: var(--radius-md);
}

.toc-container h3 {
	margin: 0 0 10px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--border-color);
	font-size: 1.05rem;
	color: var(--accent-light);
}

.toc-container .toc {
	background: transparent;
	border: none;
	padding: 0;
	margin: 0;
}

.toc-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.toc-list li {
	margin: 6px 0;
	line-height: 1.4;
}

.toc-list a {
	text-decoration: none;
	color: var(--accent-light);
	transition: color var(--transition-default);
}

.toc-list a:hover {
	text-decoration: underline;
	color: var(--accent-primary);
}

.toc-list .toc-h1 {
	font-weight: 700;
	font-size: 1rem;
	margin-left: 0;
	margin-top: 8px;
}

.toc-list .toc-h2 {
	margin-left: 14px;
	padding-left: 8px;
	font-weight: 600;
	font-size: 0.95rem;
	border-left: 2px solid var(--border-light);
}

.toc-list .toc-h3 {
	margin-left: 28px;
	padding-left: 8px;
	font-weight: 400;
	font-size: 0.9rem;
	border-left: 2px solid var(--border-color);
	color: var(--text-muted);
}

.toc-list .toc-h4 {
	margin-left: 42px;
	padding-left: 8px;
	border-left: 1px dashed var(--border-color);
	font-weight: 400;
	font-size: 0.85rem;
	color: var(--text-subtle);
}

.section {
	display: block;
}

.content {
	font-size: clamp(1rem, 2.5vw, 1.5rem);
	line-height: 1.7;
	text-align: left;
}

.content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
	margin-top: 1.6em;
	margin-bottom: 0.6em;
	font-weight: 700;
	line-height: 1.35;
}

.content h1 {
	padding-bottom: 6px;
	font-size: 1.35rem;
	border-bottom: 1px solid var(--border-color);
}

.content h2 { font-size: 1.2rem; }
.content h3 { font-size: 1.1rem; }
.content h4 { font-size: 1rem; }
.content h5 { font-size: 0.92rem; text-transform: uppercase; letter-spacing: 0.5px; }
.content h6 { font-size: 0.85rem; color: var(--text-muted); }

.footnote-ref {
	font-size: 0.8em;
	vertical-align: super;
}

.footnotes {
	margin-top: 60px;
	padding-top: 20px;
	border-top: 1px solid var(--border-color);
	font-size: 0.95em;
	color: var(--text-muted);
}

.footer {
	margin-top: 60px;
	padding-top: 20px;
	text-align: center;
	font-size: 0.85em;
	color: var(--text-subtle);
	border-top: 1px solid var(--border-color);
}

.verse-box {
	padding-left: 15px;
	margin: 20px 0;
	border-left: 4px solid var(--accent-primary);
	color: var(--text-muted);
	font-style: italic;
}

.verse-ref {
	display: block;
	margin-top: 5px;
	color: var(--accent-light);
	font-weight: 700;
	font-style: normal;
}

.license {
	max-height: 250px;
	overflow-y: auto;
}

.raw_text {
	overflow-y: auto;
}

.bank-info-box {
	margin-top: 30px;
	padding: 15px;
	background: var(--bg-surface-alt);
	color: var(--text-muted);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	font-family: var(--font-mono);
}

.prompt-form {
	padding: 20px;
	margin-top: 20px;
	background-color: var(--bg-surface-subtle);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
}

.form-group {
	margin-bottom: 15px;
}

.form-group label {
	display: block;
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--accent-light);
}

.form-group input {
	width: 100%;
	padding: 10px 12px;
	box-sizing: border-box;
	background-color: var(--bg-body);
	color: var(--text-main);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	font-family: inherit;
	font-size: 0.95rem;
}

.form-group input:focus {
	border-color: var(--accent-light);
	outline: none;
}

.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 20px;
}

.copy-btn {
	width: 100%;
	border: none;
	padding: 12px 20px;
	background-color: var(--accent-primary);
	color: var(--text-inverse);
	font-size: 1rem;
	font-weight: 600;
	border-radius: var(--radius-md);
	cursor: pointer;
	transition: background var(--transition-default);
}

.copy-btn:hover {
	background-color: var(--accent-light);
}

.copy-btn.success {
	background-color: var(--accent-success);
	color: #fff;
}

.ai-links {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ai-links button {
	flex: 1;
	padding: 9px;
	min-width: 110px;
	text-align: center;
	background-color: var(--bg-surface-alt);
	color: var(--accent-light);
	cursor: pointer;
	border-radius: var(--radius-md);
	font-size: 0.88rem;
	font-weight: 500;
	border: 1px solid var(--border-light);
	transition: all var(--transition-default);
}

.ai-links button:hover {
	background-color: var(--bg-surface-hover);
	border-color: var(--accent-light);
}

.contact-info {
	list-style-type: none;
	padding-left: 0;
}

.contact-info li {
	margin-bottom: 12px;
	font-size: 1.05rem;
}

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

.sermon-list, .deep-list {
	list-style: none;
	padding-left: 0;
	margin-top: 1.5rem;
}

.sermon-list li, .deep-list li {
	margin-bottom: 10px;
	padding: 12px 16px;
	border-left: 4px solid var(--accent-primary);
	border-radius: var(--radius-md);
	background-color: var(--bg-surface-alt);
	transition: transform var(--transition-default), background var(--transition-default);
}

.deep_book {
	margin-bottom: 10px;
	padding: 12px 16px;
	border: 2px solid var(--accent-primary);
	border-radius: var(--radius-md);
	background-color: var(--bg-surface-alt);
}

.sermon-list li:hover, .deep-list li:hover {
	background-color: var(--bg-surface-hover);
	transform: translateX(4px);
}

.sermon-list a, .deep-list a {
	display: block;
	color: var(--text-main);
	text-decoration: none;
	font-weight: 600;
	font-size: 1.05rem;
}

.sermon-list a:hover, .deep-list a:hover {
	color: var(--accent-light);
}

.back-btn, .back-btn-js {
	display: inline-block;
	padding: 8px 16px;
	margin-bottom: 1.5rem;
	background-color: var(--bg-surface-alt);
	color: var(--accent-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	cursor: pointer;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all var(--transition-default);
}

.back-btn:hover, .back-btn-js:hover {
	background-color: var(--bg-surface-hover);
	border-color: var(--accent-light);
}

.audio-player {
	margin: 1rem 0;
}

.audio-player audio,
.audio-playlist audio {
	width: 100%;
}

.audio-playlist {
	margin: 1rem 0;
}

.audio-playlist details {
	background: var(--bg-surface-subtle);
	padding: 10px;
	border-radius: var(--radius-md);
	border: 1px solid var(--border-color);
}

.audio-playlist summary {
	cursor: pointer;
	font-weight: bold;
	color: var(--accent-light);
}

.audio-playlist-items {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.audio-playlist-title {
	font-size: 0.9em;
	margin-bottom: 4px;
	color: var(--text-subtle);
}

html.js .sermon-article {
	display: none;
}

html.js .sermon-article:target {
	display: block;
	animation: fadeIn 0.3s ease;
}

html.js #sermons:has(.sermon-article:target) .sermon-list {
	display: none;
}

html.js .container > .toc,
html.js .container > main > hr,
.back-btn-js {
	display: none;
}

@media (max-width: 600px) {
	.container {
		margin: 1rem auto;
		padding: 0 8px;
	}
}

@page {
	size: A4;
	margin: 5mm;
}

@media print {
	nav.site_nav, footer, hr, audio,
	.back-btn, .prompt-form, .action-buttons, .noprint, .reservation, .toc-container {
		display: none !important;
	}
	body, .container, .content, .toc {
		background-color: #fff !important;
		color: #000 !important;
		font-size: 11pt;
		line-height: 1.5;
	}
	pre, code, code.language-markdown {
		background: transparent;
	}
	.container {
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0;
		box-shadow: none;
	}
	h1, h2, h3, h4, h5, h6 {
		border-bottom: 1px solid silver;
		color: #000;
	}
}