body { transition: background-color 0.3s ease, color 0.3s ease; }
/* Typography */
h1, h2, h3, h4, h5, h6 { font-family: 'Playfair Display', serif; }
.prose p { font-family: 'Lato', sans-serif; margin-bottom: 1.5em; line-height: 1.8; font-size: 1.125rem; }
.prose h2 { font-size: 1.8rem; margin-top: 2rem; margin-bottom: 1rem; border-bottom: 1px solid #ea580c; display: inline-block; padding-bottom: 5px; }
/* Dark Mode Overrides */
html.dark .prose h2 { color: #f5f5f4; }
html.dark .prose p, html.dark .prose li { color: #d6d3d1; }
html.dark .prose h3 { color: #e7e5e4; }
html.dark .prose strong { color: white; }
/* Custom Scrollbar */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Fade Animation */
.fade-enter { animation: fade-in 0.4s ease-out forwards; }
@keyframes fade-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
/* Form Inputs */
.input-base { width: 100%; padding: 12px; border: 1px solid #e7e5e4; background-color: #fff; font-family: 'Lato', sans-serif; transition: all 0.3s; }
html.dark .input-base { background-color: #292524; border-color: #44403c; color: white; }
.input-base:focus { outline: none; border-color: #ea580c; }
/* Tool Calculation Result Box */
.result-box { background: #fdfbf7; border-left: 4px solid #ea580c; padding: 1rem; margin-top: 1rem; }
html.dark .result-box { background: #1c1917; }
/* Smooth Fade Transition */
.story-fade-enter { opacity: 0; transform: scale(1.05); }
.story-fade-enter-active { opacity: 1; transform: scale(1); transition: opacity 300ms ease-out, transform 5s ease-out; }
.story-fade-exit { opacity: 1; }
.story-fade-exit-active { opacity: 0; transition: opacity 300ms ease-out; }
/* Progress Bar Animation */
@keyframes progress { from { width: 0%; } to { width: 100%; } }
.progress-bar-fill { width: 0%; }
.progress-bar-fill.active { animation: progress 5s linear forwards; }
.progress-bar-fill.paused { animation-play-state: paused; }
.progress-bar-fill.completed { width: 100% !important; animation: none; }