.tabs-container {display: flex; align-items: center; margin-bottom: 1rem; background-color: var(--card-background); padding: 0.5rem; border-radius: 9999px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); gap: 0.5rem; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; white-space: nowrap}.tab-button {padding: 0.5rem 1rem; min-height: 44px; border-radius: 9999px; font-weight: 600; color: var(--text-secondary); transition: all 0.2s ease-in-out; cursor: pointer; outline: none; border: none; white-space: nowrap; scroll-snap-align: start; background-color: transparent}[data-theme="dark"] .tab-button:not(.active) {color: var(--text-secondary); background-color: transparent}.tab-button.active {background-color: var(--primary-blue); color: #ffffff; box-shadow: 0 2px 4px rgba(0,0,0,0.1)}.tab-button:hover:not(.active) {background-color: var(--light-blue); color: var(--primary-blue-dark)}[data-theme="dark"] .tab-button:hover:not(.active) {background-color: var(--border-color); color: var(--text-primary)}.tab-content {display: none; padding: 1.5rem; background-color: var(--card-background); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1)}.tab-content.active {display: block}.story-heading {font-size: 1.75rem; font-weight: 700; color: var(--primary-blue-dark); margin-top: 1.5rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--light-blue)}.story-paragraph {font-size: 1.125rem; line-height: 1.6; color: var(--text-primary); margin-bottom: 1rem}.story-divider {border: 0; height: 1px; background-image: linear-gradient(to right,rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0)); margin: 2rem auto}.highlight {background-color: #fef9c3; color: #78350f; font-weight: 600; padding: 2px 5px; border-radius: 4px}.story-icon {display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -0.25em; margin-right: 0.25em; fill: currentColor}.story-section-divider {border: 0; height: 2px; background-image: linear-gradient(to right,rgba(59,130,246,0),rgba(59,130,246,0.75),rgba(59,130,246,0)); margin: 2.5rem auto}.graphic-novel-panel {background-color: var(--background); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.05); display: flex; flex-direction: column}.graphic-novel-panel img {width: 100%; height: 250px; object-fit: cover; background-color: var(--border-color)}.graphic-novel-caption {padding: 1rem; background-color: var(--card-background); border-top: 1px solid var(--border-color); flex-grow: 1}.graphic-novel-caption .dialogue {font-style: italic; color: var(--text-primary); background-color: var(--light-blue); padding: 0.5rem; border-left: 3px solid var(--primary-blue); border-radius: 4px; margin-top: 0.5rem}.imagery-controls {display: flex; justify-content: center; margin-bottom: 1.5rem}.imagery-grid {display: grid; grid-template-columns: repeat(3,1fr); gap: 2.5rem; padding: 1.5rem 0}@media (max-width: 1200px) {.imagery-grid {grid-template-columns: repeat(2,1fr)}}@media (max-width: 768px) {.imagery-grid {grid-template-columns: 1fr}}.imagery-panel {background-color: var(--card-background); border: 1px solid var(--border-color); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.1); transition: transform 0.3s ease,box-shadow 0.3s ease}.imagery-panel:hover {transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.15)}.imagery-image-container {position: relative; overflow: hidden; background-color: var(--border-color)}.imagery-image {width: 100%; height: 450px; object-fit: cover; cursor: pointer; transition: transform 0.3s ease}.imagery-image:hover {transform: scale(1.05)}.imagery-caption {padding: 1.25rem; background: linear-gradient(to bottom,var(--card-background),var(--background))}.imagery-scene-number {display: inline-block; background: linear-gradient(135deg,var(--primary-blue),var(--primary-blue-dark)); color: white; font-size: 0.75rem; font-weight: 700; padding: 0.25rem 0.75rem; border-radius: 9999px; margin-bottom: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em}.imagery-title {font-size: 1.15rem; font-weight: 700; color: var(--primary-blue-dark); margin: 0 0 0.5rem 0; line-height: 1.3}.imagery-description {font-size: 0.95rem; color: var(--text-secondary); margin: 0; line-height: 1.5}.imagery-lightbox-overlay {position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.95); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 0.3s ease}@keyframes fadeIn {from {opacity: 0}to {opacity: 1}}.imagery-lightbox {width: 100%; max-width: 1000px; max-height: 95vh; display: flex; flex-direction: column; align-items: center; position: relative}.imagery-lightbox-close {position: absolute; top: -40px; right: 0; background: transparent; border: none; color: white; font-size: 2rem; cursor: pointer; padding: 0.5rem; transition: transform 0.2s ease; z-index: 10002; line-height: 1}.imagery-lightbox-close:hover {transform: scale(1.2); color: var(--accent-blue)}.imagery-lightbox-content {position: relative; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 1rem}.imagery-lightbox-image {max-width: 100%; max-height: 70vh; object-fit: contain; border-radius: 8px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); transition: opacity 0.2s ease}.imagery-nav-btn {position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); color: white; border: none; font-size: 2rem; padding: 1rem 0.5rem; cursor: pointer; z-index: 10001; transition: all 0.2s ease; border-radius: 4px}.imagery-nav-btn:hover {background: rgba(255,255,255,0.2); color: var(--accent-blue)}.imagery-nav-btn.prev {left: -60px}.imagery-nav-btn.next {right: -60px}.imagery-lightbox-controls {display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem}.imagery-play-btn {background: var(--primary-blue); color: white; border: none; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 600; cursor: pointer; transition: background 0.2s ease; display: flex; align-items: center; gap: 0.5rem}.imagery-play-btn:hover {background: var(--primary-blue-dark)}.imagery-counter {color: rgba(255,255,255,0.7); font-size: 0.9rem; font-family: monospace}.imagery-lightbox-caption {color: white; text-align: center; max-width: 800px; background: rgba(0,0,0,0.5); padding: 1rem; border-radius: 8px; backdrop-filter: blur(4px)}.imagery-lightbox-caption strong {display: block; font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--light-blue)}.imagery-lightbox-caption p {font-size: 1rem; opacity: 0.9; margin: 0; line-height: 1.5}@media screen and (max-width: 768px) {.imagery-grid {grid-template-columns: 1fr; gap: 1rem}.imagery-image {height: 250px}.imagery-lightbox {padding: 0; max-height: 100vh}.imagery-lightbox-image {max-height: 60vh}.imagery-nav-btn {background: rgba(0,0,0,0.3); padding: 0.5rem}.imagery-nav-btn.prev {left: 0}.imagery-nav-btn.next {right: 0}.imagery-lightbox-close {top: 10px; right: 10px; background: rgba(0,0,0,0.3); border-radius: 50%}}.timeline-container {position: relative; max-width: 100%; margin: 0 auto; padding: 20px 0}.timeline-container::after {content: ''; position: absolute; width: 4px; background-color: var(--primary-blue); top: 0; bottom: 0; left: 50%; margin-left: -2px; z-index: 0; border-radius: 9999px}.timeline-event {padding: 20px 30px; position: relative; background-color: inherit; width: 50%; margin-bottom: 30px; box-sizing: border-box; z-index: 1}.timeline-event.left {left: 0; padding-right: 60px}.timeline-event.right {left: 50%; padding-left: 60px}.timeline-event::after {content: ''; position: absolute; width: 20px; height: 20px; background-color: var(--primary-blue); border: 4px solid var(--primary-blue); top: 20px; border-radius: 50%; z-index: 1}.timeline-event.left::after {right: -10px; transform: translateX(50%)}.timeline-event.right::after {left: -10px; transform: translateX(-50%)}.timeline-content {background-color: var(--card-background); padding: 20px; border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); position: relative}.timeline-event.left .timeline-content::before {content: ''; position: absolute; top: 25px; right: -15px; border-width: 15px 0 15px 15px; border-style: solid; border-color: transparent transparent transparent var(--card-background)}.timeline-event.right .timeline-content::before {content: ''; position: absolute; top: 25px; left: -15px; border-width: 15px 15px 15px 0; border-style: solid; border-color: transparent var(--card-background) transparent transparent}.timeline-era {text-align: center; margin: 40px 0; position: relative; z-index: 2}.timeline-era h2 {background-color: var(--primary-blue); color: #ffffff; display: inline-block; padding: 10px 20px; border-radius: 9999px; font-weight: 700; box-shadow: 0 4px 6px rgba(0,0,0,0.1)}.mind-map-wrapper {overflow-x: auto; padding-bottom: 1rem}.mind-map-container {display: flex; flex-direction: column; align-items: flex-start; padding: 2rem; min-width: fit-content}.mind-map-node {background-color: var(--light-blue); border: 2px solid var(--primary-blue); border-radius: 8px; padding: 0.5rem 1rem; margin: 0.3rem 0; font-weight: 500; text-align: left; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,0.05); width: fit-content; white-space: nowrap; color: var(--primary-blue-dark); transition: all 0.2s ease}.mind-map-node.main {background-color: var(--primary-blue); color: #ffffff; font-size: 1.5rem; padding: 1rem 2rem; border-radius: 9999px; margin-bottom: 1.5rem; align-self: center; font-weight: 700}.mind-map-sub-branches {display: flex; flex-direction: column; align-items: flex-start; margin-left: 2rem; padding-left: 0.5rem; border-left: 2px solid var(--text-light); margin-top: 0.5rem; margin-bottom: 0.5rem}.mind-map-sub-branches.hidden {display: none}.toggle-node {cursor: pointer}.toggle-node .toggle-icon {margin-left: 0.5rem; font-weight: 700}.mind-map-wrapper-v2 {overflow-x: auto; padding: 1rem}.mind-map-container-v2 {display: flex; align-items: center; min-width: fit-content; position: relative; padding: 20px}.mind-map-node-v2 {background-color: var(--light-blue); border: 2px solid var(--primary-blue); border-radius: 12px; padding: 0.75rem 1.25rem; margin: 0.5rem; font-weight: 600; text-align: center; position: relative; box-shadow: 0 2px 4px rgba(0,0,0,0.05); white-space: nowrap; flex-shrink: 0}.mind-map-node-v2.main {background-color: var(--primary-blue); color: #ffffff; font-size: 1.5rem; padding: 1rem 2rem; border-radius: 9999px; margin-right: 3rem; z-index: 1}.main-branches-container {display: flex; align-items: flex-start; position: relative; flex-grow: 1}.branch-group {display: flex; flex-direction: column; align-items: center; position: relative; flex-shrink: 0; margin: 0 1rem}.node-wrapper {display: flex; align-items: center; cursor: pointer}.toggle-icon-v2 {font-size: 1.2rem; font-weight: bold; margin-left: 0.5rem; color: var(--primary-blue)}.sub-branches-v2 {display: flex; flex-direction: column; align-items: center; margin-top: 0.5rem; position: relative}.sub-branches-v2.hidden {display: none}.quiz-container {padding: 1rem}.quiz-question {background-color: var(--light-blue); border: 1px solid var(--accent-blue); border-radius: 8px; padding: 1rem 1.5rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05)}.quiz-question p {font-size: 1.1rem; font-weight: 500; color: var(--primary-blue-dark); margin-bottom: 0.75rem}.show-answer-btn {background-color: var(--primary-blue); color: white; padding: 0.5rem 1rem; border-radius: 9999px; border: none; cursor: pointer; font-size: 0.9rem; transition: background-color 0.2s ease; margin-top: 0.5rem}.show-answer-btn:hover {background-color: var(--primary-blue-dark)}.quiz-answer {margin-top: 0.75rem; padding: 0.75rem 1rem; background-color: var(--light-blue); border-left: 4px solid var(--primary-blue); border-radius: 4px; font-weight: 600; color: var(--primary-blue-dark); display: none}.tabulator-blue-theme {--tabulator-header-background-color: var(--primary-blue); --tabulator-header-text-color: #ffffff; --tabulator-row-even-background-color: var(--very-light-blue); --tabulator-row-odd-background-color: var(--card-background); --tabulator-border-color: var(--border-color); --tabulator-active-color: var(--primary-blue-dark); --tabulator-text-color: var(--text-primary); --tabulator-placeholder-color: var(--text-secondary); --tabulator-page-button-background-color: var(--light-blue); --tabulator-page-button-hover-background-color: var(--accent-blue); --tabulator-page-button-active-background-color: var(--primary-blue-dark); --tabulator-page-button-active-text-color: #ffffff; --tabulator-filter-placeholder-color: var(--text-light)}.tabulator-blue-theme.tabulator {border: 1px solid var(--tabulator-border-color); font-family: 'Inter',sans-serif}.tabulator-blue-theme .tabulator-header .tabulator-col {background-color: var(--tabulator-header-background-color); color: var(--tabulator-header-text-color); border-right: 1px solid var(--tabulator-border-color)}.tabulator-blue-theme .tabulator-header .tabulator-col.tabulator-sortable:hover {background-color: var(--tabulator-active-color)}.tabulator-blue-theme .tabulator-tableHolder {border-top: 1px solid var(--tabulator-border-color)}.tabulator-blue-theme .tabulator-row.tabulator-row-even {background-color: var(--tabulator-row-even-background-color)}.tabulator-blue-theme .tabulator-row.tabulator-row-odd {background-color: var(--tabulator-row-odd-background-color)}.tabulator-blue-theme .tabulator-row.tabulator-selected {background-color: var(--tabulator-row-even-background-color)}.tabulator-blue-theme .tabulator-footer {background-color: var(--tabulator-header-background-color); color: var(--tabulator-header-text-color)}.tabulator-blue-theme .tabulator-page {background-color: var(--tabulator-page-button-background-color); color: var(--tabulator-text-color); border: 1px solid var(--tabulator-border-color)}.tabulator-blue-theme .tabulator-page.active {background-color: var(--tabulator-page-button-active-background-color); color: var(--tabulator-page-button-active-text-color)}.tabulator-blue-theme .tabulator-page:not(.active):hover {background-color: var(--tabulator-page-button-hover-background-color)}.tabulator-blue-theme .tabulator-input {border: 1px solid var(--tabulator-border-color); color: var(--tabulator-text-color); background-color: var(--tabulator-row-odd-background-color)}.tabulator-blue-theme .tabulator-input::placeholder {color: var(--tabulator-filter-placeholder-color)}@media screen and (max-width: 768px) {.timeline-container::after {left: 20px; margin-left: 0}.timeline-event {width: 100%; padding-left: 60px; padding-right: 15px; left: 0 !important}.timeline-event.left::after,.timeline-event.right::after {left: 10px; transform: translateX(0)}.timeline-event.left .timeline-content::before,.timeline-event.right .timeline-content::before {top: 15px; left: -15px; border-width: 15px 15px 15px 0; border-color: transparent var(--card-background) transparent transparent}.tabs-container {padding: 0.25rem; gap: 0.375rem}.tab-button {padding: 0.5rem 0.875rem; font-size: 0.9rem}.mind-map-wrapper,.mind-map-wrapper-v2 {overflow-x: auto}}.prayer-card {padding: 1.5rem; border-radius: 12px; background-color: var(--card-background); border: 1px solid var(--border-color); box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 1rem; font-family: 'Inter',sans-serif}.prayer-card h3 {color: var(--primary-blue-dark); margin-top: 0; margin-bottom: 1rem; font-size: 1.5rem; font-weight: 700}.prayer-text {font-size: 1.1em; line-height: 1.6; color: var(--text-primary); margin-bottom: 1rem}.prayer-card hr {border: 0; height: 1px; background-color: var(--border-color); margin: 1.5rem 0}.prayer-card blockquote {font-size: 1.2em; font-style: italic; border-left: 4px solid var(--primary-blue); padding-left: 1rem; margin: 1rem 0; color: var(--text-primary); background-color: var(--light-blue); padding: 1rem; border-radius: 0 4px 4px 0}