* { box-sizing: border-box; margin: 0; padding: 0; } 
body { background: orange; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: Arial, sans-serif; } 
/* Strict Canvas Coordinates */
.reel-canvas { width: 1080px; height: 1000px; background: linear-gradient(135deg, #132612, #243B22); /* Deep Forest Green */
 position: absolute; display: flex; flex-direction: column; justify-content: space-between; padding: 180px 50px 120px 50px; /* Enhanced Top safe zone breathing space */
 transform: scale(0.55); transform-origin: center center; } 
/* Top Header Profile Panel */
.header-container { display: flex; align-items: center; gap: 30px; } 
.programmer-avatar { width: 180px; height: 180px; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 10px 20px rgba(0,0,0,0.3); } 
.teacher-info h2 { color: #fff; font-size: 44px; } 
.teacher-info p { color: #D4A373; /* Saffron gold text track */
 font-size: 32px; } 
/* Center Display Frame Track - Fixed Scale Boundaries */
.card-container { width: 980px; height: 980px; /* Lock height to a square grid pattern */
 position: relative; align-self: center; display: flex; justify-content: center; /*align-items: center; */}
.meditation-text-box { width: 100%; height: 100%; display: flex; justify-content:center; align-items: center; padding: 2px; /* Generous text bounding spacing padding */
 background: #FFFFFF; /* High contrast paper white for older eyes */
 border: 12px solid #D4A373; /* Robust saffron framework border */
 border-radius: 40px; box-shadow: 0 30px 60px rgba(0,0,0,0.5); text-align: center; } 
#dynamic_meditation_text { font-size: 64px !important; /* Ultra readable presentation scale for seniors */
 line-height: 1.8; color: #000000; /* Rich solid text contrast focus */
 font-weight: bold; transition: opacity 0.4s ease-in-out; } 
/* Overlay Screen Triggers */
.start-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(19, 38, 18, 0.98); display: flex; justify-content: center; align-items: center; z-index: 100; border-radius: 40px; } 
.start-btn { padding: 35px 70px; font-size: 46px; font-weight: bold; color: #132612; background-color: #D4A373; border: none; border-radius: 60px; cursor: pointer; box-shadow: 0 15px 40px rgba(0,0,0,0.6); } 
.cta-overlay { width: 100%; height: 100%; background: linear-gradient(135deg, #132612, #243B22); /* Smooth dark forest green for description layout pop */
 border-radius: 40px; } 
 /* Prepend a small checkmark icon before the text automatically */
 .bookmark-msg::before { content: "✓ "; font-weight: bold; margin-right: 4px; } 
 /* The magic class that completely hides it */
 .bookmark-msg.hide { display: none !important; } 
 #nextLessonBtn { margin-top:25px; padding: 15px 25px; font-size: 24px; font-weight: bold; color: #fff; background-color: orange; border: none; border-radius: 6px; cursor: pointer; box-shadow: 0 15px 40px rgba(0,0,0,0.6); } 
 .toggle-btn { background-color: #4CAF50; color: white; border: none; padding: 12px 24px; font-size: 16px; font-weight: bold; border-radius: 6px; cursor: pointer; transition: background 0.3s ease; } 
 .toggle-btn:hover { background-color: #45a049; } 
@media only screen and (max-width: 600px){
 .reel-canvas { transform: scale(0.35);} 
 }