:root {
  /* Eye Health / Retina Themed Colors - LIGHT variant */
  --retina-bg: #F9FAF6;               /* Light herbal greenish white bg */
  --retina-surface: #FFFFFF;          /* Pure white card backgrounds */
  --retina-tint: #0D5C34;             /* Deep visual forest green representing optimal health */
  --retina-tint-soft: #EEF8F1;        /* Light minty green for overlays and panels */
  --retina-glow: #F2A900;             /* Eye protection amber/warm golden accent */
  --retina-glow-hover: #D99100;
  --retina-ink: #1C231F;              /* Clean dark charcoal text */
  --retina-ink-muted: #5D6862;        /* Soft gray-green for secondary texts */
  --retina-gradient: linear-gradient(135deg, #0D5C34 0%, #157E49 100%);
  
  /* Fonts from approved list */
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Poppins', sans-serif;

  /* Custom physical appearance settings */
  --retina-radius: 16px;              /* "soft" rounded edges border-radius */
  --retina-shadow: 0 10px 25px -5px rgba(13, 92, 52, 0.06), 0 8px 10px -6px rgba(13, 92, 52, 0.04); /* "raised" depth effect */
}

/* Scroll-driven top progress bar animation */
@keyframes progress-grow { 
  to { width: 100%; } 
}

.retina-scroll-indicator { 
  position: fixed;
  top: 0;
  left: 0;
  height: 4px; 
  width: 0; 
  z-index: 9999;
  animation: progress-grow linear; 
  animation-timeline: scroll(); 
}

/* Smooth fade-in scroll animations utilizing pure CSS view timelines */
@keyframes fade-and-rise {
  from {
    opacity: 0.1;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sight-chapter-block {
  padding-top: 8vh;
  padding-bottom: 8vh;
  animation: fade-and-rise linear both;
  animation-timeline: view();
  animation-range: entry 5% cover 30%;
}

/* Header layout variations & Hamburger menu style */
.pupil-nav-shield {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(13, 92, 52, 0.1);
}

/* Navigation list styling - Mobile compatibility (CSS only toggling) */
#sight-nav-toggle:checked ~ .sight-nav-links {
  display: flex !important;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--retina-tint);
  flex-direction: column;
  padding: 1.5rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Base custom interactive button dynamics (Hover effects) */
.sight-action-button {
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}

.sight-action-button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

/* Neumorphism design elements for cards */
.retina-capsule-card {
  transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
}

.retina-capsule-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px -10px rgba(13, 92, 52, 0.15), 0 10px 15px -10px rgba(13, 92, 52, 0.1);
}

/* Typography styles matching parameters */
h1, h2, h3, h4, th {
  font-family: var(--font-display);
  font-weight: 700;
}

p, li, span, input, textarea, button {
  font-family: var(--font-body);
}

/* General Layout helpers to fit design-preset E */
.sight-shell-container {
  width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
}

/* Focus spots decoration element */
.visual-epicenter-hero {
  position: relative;
  overflow: hidden;
}

.visual-epicenter-hero::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-image: radial-gradient(rgba(242, 169, 0, 0.08) 1px, transparent 0);
  background-size: 24px 24px;
  z-index: 0;
  pointer-events: none;
}

/* Input validation glows */
input:focus, textarea:focus {
  border-color: var(--retina-tint) !important;
  box-shadow: 0 0 0 3px rgba(13, 92, 52, 0.15);
}