.tv-flashcard-container {display: flex; flex-direction: column; align-items: center; margin-top: 2rem; perspective: 1000px; z-index: 10}.tv-flashcard-card {width: 100%; max-width: 500px; height: 300px; color: white; border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 1.5rem; font-weight: 600; text-align: center; padding: 1rem; box-shadow: 0 4px 15px rgba(0,0,0,0.2); cursor: pointer; transition: transform 0.6s; transform-style: preserve-3d; position: relative}.tv-flashcard-non-flippable-front {font-size: 1.1em; font-weight: 600}.tv-flashcard-non-flippable-back {font-size: 0.9em; font-weight: 400; margin-top: 0.5em; opacity: 0.8}.tv-flashcard-card.non-flippable-card {transform-style: flat; transition: none; cursor: default}.tv-flashcard-card.non-flippable-card .tv-flashcard-front,.tv-flashcard-card.non-flippable-card .tv-flashcard-back {transform: none}.tv-flashcard-front,.tv-flashcard-back {position: absolute; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem; transition: transform 0.6s; color: #ffffff; border-radius: 12px; top: 0; left: 0; overflow-y: auto}.tv-flashcard-front {background-color: var(--primary-blue-dark); color: #ffffff; transform: rotateY(0deg)}.tv-flashcard-back {background-color: var(--primary-blue); color: #ffffff; transform: rotateY(180deg)}.tv-flashcard-card.flipped .tv-flashcard-front {transform: rotateY(-180deg)}.tv-flashcard-card.flipped .tv-flashcard-back {transform: rotateY(0deg)}.tv-flashcard-controls {display: flex; justify-content: space-between; width: 100%; max-width: 500px; margin-top: 6rem; align-items: center; position: relative; z-index: 20}.tv-flashcard-controls .tab-button {padding: 0.75rem 1.5rem; font-size: 1rem}.tv-flashcard-controls span {font-size: 1.1rem; font-weight: 500; color: var(--text-primary)}.flashcard-group {margin-bottom: 2.5rem; padding: 1.5rem; background-color: var(--card-background); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1)}.flashcard-group-title {font-size: 1.75rem; font-weight: 700; color: var(--primary-blue-dark); margin-bottom: 0.75rem}.flashcard-group-description {font-size: 1.125rem; line-height: 1.6; color: var(--text-primary); margin-bottom: 1.5rem}.flashcards-grid {display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1rem}.flashcards-grid .tv-flashcard-card {height: 150px; font-size: 1.2rem}.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)}.accordian-container {margin-top: 2rem; background-color: var(--card-background); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); padding: 1.5rem}.accordian-title {font-size: 1.75rem; font-weight: 700; color: var(--primary-blue-dark); margin-bottom: 0.75rem}.accordian-description {font-size: 1.125rem; line-height: 1.6; color: var(--text-primary); margin-bottom: 1.5rem}.accordian-item {border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 0.5rem; overflow: hidden}.accordian-header {display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 1rem 1.5rem; background-color: var(--light-blue); color: var(--primary-blue-dark); font-size: 1.1rem; font-weight: 600; border: none; cursor: pointer; text-align: left; transition: background-color 0.2s ease}.accordian-header:hover {background-color: var(--accent-blue); opacity: 0.9}.accordian-header.active {background-color: var(--primary-blue); color: white}.accordian-toggle-icon {font-size: 1.2rem; font-weight: bold}.accordian-content {padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); background-color: var(--background); color: var(--text-primary); line-height: 1.6}.quiz-section {padding: 1.5rem; background-color: var(--card-background); border-radius: 12px; box-shadow: 0 4px 6px rgba(0,0,0,0.1)}.quiz-main-title {font-size: 2rem; font-weight: 700; color: var(--primary-blue-dark); text-align: center; margin-bottom: 1rem}.quiz-format-prompt {text-align: center; margin-bottom: 1.5rem; color: var(--text-secondary)}.quiz-format-selector {display: flex; justify-content: center; margin-bottom: 2rem; background-color: var(--card-background); padding: 0.5rem; border-radius: 9999px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); flex-wrap: wrap; gap: 0.5rem}.quiz-format-title {font-size: 1.5rem; font-weight: 600; color: var(--primary-blue); margin-top: 1.5rem; margin-bottom: 1rem; text-align: center}.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}.tv-table-caption {display: block; text-align: left; font-size: 1.25rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--text-primary); line-height: 1.6; max-width: 800px}