@import url("cosmos.css");

/* ==========================================================================
   CREATION WITHIN CREATION - PURE DESIGN SKELETON
   Refined per User Specifications:
   - Middle Alignment throughout
   - Containerless Hero with adjustable celestial white / silver glow
   - Consistent Header: Logo + Title + Subtitle across ALL pages (perfect alignment)
   - Navigation Line 2 active breadcrumbs matching Line 1 font-size (22px)
   - Leaves pattern at 20% opacity and 50% scale (400px)
   - Single unified container for all 7 Story Chapters
   - Single unified container for all 4 Course Stages
   - Decoupled .Rootbox Colors (.red, .green, .indigo, etc.) & .experience1/2/3 Patterns
   ========================================================================== */

/* ==========================================================================
   QUICK JUMP DIRECTORY / TABLE OF CONTENTS
   Press Ctrl+F (or Cmd+F) in Sublime Text and type the search code to jump directly:

   [COSMOS-DASHBOARD] Cosmos Master Configuration Dashboard (Stars, Bubbles, Containers)
   [JUMP-01] Universal Typography, Headings & Paragraph Font Colors (p, h1, h2, h3, ul, ol)
   [JUMP-02] Hyperlinks (:hover, :visited Lavender Colors)
   [JUMP-03] Eye-Comfort 1-Word Font Classes (.starlightcream, .silverwhite, .goldendawn)
   [JUMP-04] Brand Header, Dividers & Masthead (.page-header-stage, .brand-title, .divider-opt-butterflies)
   [JUMP-05] Container Panels, Glass Themes & Decoupled .Rootbox + .experience1/2/3
   [JUMP-06] Catalysts Directory, Special Badges & Minimalist Filter Dropdown
   [JUMP-07] Latest News Card & Border Accents (.directory-news-item, .news-border-groove)
   [JUMP-08] Celestial Background Layers (Aurora, Sunspots / Bubbles, Stars)
   [JUMP-09] Lists Presets (6 UL Options, 6 OL Options & .bold) & 8 Quotes / Facts Callouts
   [JUMP-10] Responsive Tablet & Mobile Scaling (@media rules)
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS & COSMOS MASTER CONFIGURATION DASHBOARD
   ========================================================================== */

/* Smooth Continuous Responsive Transitions for Master Controls */
/* Type Registrations for Smooth Transitions (Do NOT edit values here — edit the Dashboard controls below at lines 88-90!) */
@property --user-wash-mult {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.45;
}

@property --glow-left {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.7;
}

@property --container-darkness {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.20;
}

@property --mobile-container-darkness {
  syntax: '<number>';
  inherits: true;
  initial-value: 0.10;
}

:root {
  transition: --user-wash-mult 0.4s ease, --glow-left 0.4s ease, --container-darkness 0.4s ease, --mobile-container-darkness 0.4s ease;
  /* ==========================================================================
     🌌 [COSMOS-DASHBOARD] COSMOS MASTER CONFIGURATION DASHBOARD
     Modify all site-wide background, stars, bubbles, and container glass settings here!
     ========================================================================== */

  /* 1. ⭐ STARS MASTER CONTROLS */
  --cosmos-star-opacity:        0.51;               /* Range: 0.15 to 1.0 (51% starlight brightness) */
  --cosmos-star-brightness:     0.92;               /* Range: 0.5 to 1.8 (0.92 = crisp, natural starlight) */
  --cosmos-star-glow:           0px;                /* Halo drop shadow: 0px to 6px */

  /* 2. 🌌 AURORA SKY MASTER CONTROLS */
  --aurora-brightness:          0.42;               /* Master glow brightness: 0.15 (dim) to 0.55 (vivid radiance) */
  --aurora-cyan-opacity:        var(--aurora-brightness);
  --aurora-pink-opacity:        var(--aurora-brightness);

  /* 3. 🫧 BUBBLES MASTER CONTROLS */
  --cosmos-bubble-top:          -660px;             /* User Selected Default: -660px (Range: -3000px to +3000px) */
  --cosmos-bubble-opacity:      0.24;               /* Range: 0.10 to 1.0 (24% soft bubble brightness) */
  --cosmos-bubble-saturation:   100%;               /* 100% = radiant color, 0% = monochrome silver */
  --cosmos-bubble-grayscale:    0%;                 /* 0% = full color, 100% = monochrome silver */

  /* 4. 🎛️ CONTAINER & GLOW MASTER SWITCHBOARD
     Adjust all container darkness, inside left illumination (wash), 
     and directional 4-sided glows across all containers right here! */

  /* Glass Darkness / Opacity */
  --container-darkness:         0.20;       /* Desktop: 0.05 (crystal clear) to 0.50 (deep obsidian glass) */
  --mobile-container-darkness:  0.60;       /* 📱 Mobile Master Darkness: Controls ALL containers on mobile view at once (0.05 to 0.85) */

  /* Inside Illumination (Dawn Wash from Left Side) */
  --user-wash-mult:             0.15;       /* Dawn wash eastward gradient intensity (Original = 0.25) */

  /* 4-Sided Directional Glow Controls (Adjust all 4 sides individually!) */
  --glow-left:                  0.7;        /* Left spine glow multiplier (Original = 1.1) */
  --glow-right:                 0.0;        /* Right edge glow multiplier (0.0 for single left spine) */
  --glow-top:                   0.0;        /* Top edge glow multiplier (0.0 = off, 0.4 = gentle upper halo) */
  --glow-bottom:                0.0;        /* Bottom edge glow multiplier (0.0 = off, 0.4 = gentle lower halo) */

  /* Dedicated Container Glow Overrides */
  --glow-book-cover:            0.7;        /* Double-border containers (Front Cover & Newsletter) */
  --glow-self-transformation:   0.8;        /* Pure white Self-Transformation box (Original = 1.1) */
  --dog-size:                   35px;       /* Book-theme dog-ear folded corner size */
  --dog-opacity:                0.12;       /* Dog-ear parchment fold opacity */

  /* Layout Foundation */
  --user-border-width:          4.0px;      /* Single left spine width */
  --container-border-radius:    4px 18px 18px 4px;  /* Sharper left spine edge, soft rounded right edge */
  --container-padding:          30px 32px;  /* Universal interior reading padding */
  --user-glow-left:             var(--glow-left, 1.1);  /* Legacy fallback alias */

  /* Typography */
  --font-headings:   Garamond, "Times New Roman", serif;
  --font-reading:    'Merriweather', Garamond, "Times New Roman", serif;
  --font-telemetry:  'Space Mono', monospace;

  /* 🌸 Radiant Pink & Ethereal Palette */
  --glow-pink-neon:      #ff70b8;
  --glow-pink-neon-rgb:  255, 112, 184;
  --glow-pink-soft:      #ffe1f0;
  --glow-pink-soft-rgb:  255, 225, 240;
  --accent-magenta:      #D47BAD;
  --accent-lavender:     #e9d5ff;
  --accent-cyan:         #38bdf8;
  --accent-white-glow:   #ffffff;

  /* 🌌 Deep Cosmic Void */
  --bg-deep-space:        #0a040f;
  --panel-glass-bg:       rgba(24, 10, 32, 0.88);
  --panel-glass-border:   rgba(212, 123, 173, 0.32);
  --text-heading-white:   #ffffff;
  --text-reading:         #f5ede8;
  --text-dimmed:          #ba9fbe;
}

/* ==========================================================================
   2. RESET & ASTRAL BODY CANVAS
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
body,
body.aurora-blend-05 {
  font-family: var(--font-reading);
  background-color: #020104 !important;
  /* 
     Original 5-Layer Aurora with Black-Seam Offset Repeat:
     - Retains your exact original wide-blend gradients (4400px vertical spread).
     - Tile: 12,000px with -2000px offset.
     - Top (0px to 6500px): Opens directly in your original bright aurora.
     - Middle (7000px to 10000px): Fades into deep obsidian void for Chapters III & IV.
     - Seam (at 10000px scroll): Repeats in 100% pure black with zero cut lines.
     - Bottom (10000px to 16000px): Dawn aurora returns in full radiance for Chapters V-VII.
  */
  background-image:
    radial-gradient(ellipse 55% 4400px at 0% 2800px, rgba(56, 189, 248, var(--aurora-cyan-opacity, 0.32)) 0%, transparent 60%),
    radial-gradient(ellipse 55% 4400px at 100% 3600px, rgba(var(--glow-pink-neon-rgb), var(--aurora-pink-opacity, 0.32)) 0%, transparent 60%),
    radial-gradient(ellipse 55% 4400px at 0% 5200px, rgba(56, 189, 248, calc(var(--aurora-cyan-opacity, 0.32) * 0.9)) 0%, transparent 60%),
    radial-gradient(ellipse 55% 4400px at 100% 6800px, rgba(var(--glow-pink-neon-rgb), calc(var(--aurora-pink-opacity, 0.32) * 0.9)) 0%, transparent 60%),
    radial-gradient(ellipse 55% 4400px at 0% 8500px, rgba(56, 189, 248, calc(var(--aurora-cyan-opacity, 0.32) * 0.8)) 0%, transparent 60%),
    linear-gradient(180deg, #020104 0%, #020104 15%, #03040a 30%, #05040e 50%, #07030c 70%, #020104 88%, #020104 100%) !important;
  background-size: 100% 12000px !important;
  background-position: center -2000px !important;
  background-repeat: repeat-y !important;
  background-attachment: scroll;
  color: var(--text-reading);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden !important;
  max-width: 100vw !important;
  text-align: center;
}

/* ==========================================================================
   2b. FIXED CELESTIAL ATMOSPHERE FOR STANDARD READING & DIRECTORY PAGES
   Keeps the luminous aurora permanently fixed in the viewport so it never
   plunges into the dark obsidian void when scrolling down reading articles.
   ========================================================================== */
body:has(:is(.catalyst-article, .directory-list, .course-boxless-container, .legal-container, .page-legal)) {
  background-attachment: fixed !important;
  background-position: center -2000px !important;
  background-size: 100% 12000px !important;
  background-repeat: repeat-y !important;
}

:target {
  scroll-margin-top: 110px;
}

/* ==========================================================================
   3. NAVIGATION BAR (.site-nav)
   Permanent Unbreakable Top Navigation Sizes (Layer 1 & Layer 2 Never Shrink)
   ========================================================================== */
.site-nav,
.site-nav * {
  box-sizing: border-box;
}

.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 999;
  background: rgba(20, 7, 26, 0.33);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid;
  border-image: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 25%, 
    rgba(var(--glow-pink-soft-rgb), 0.75) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 75%, 
    transparent 100%
  ) 1;
  box-shadow: none;
  padding: 8px 0 8px 0;
  text-align: center;
  transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease, box-shadow 0.35s ease;
}

.site-nav.nav-scrolled {
  background: rgba(14, 5, 20, 0.75);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  padding: 8px 0 8px 0;
}
.site-nav-primary {
  list-style: none !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 18px;
  margin: 0 auto !important;
  padding: 0 !important;
  transition: gap 0.25s ease;
}

.site-nav-primary li {
  font-family: var(--font-headings);
  font-size: 16px !important;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  white-space: nowrap !important;
}

/* Symmetrical Wing Balance: equalizes outer wings ('Story' vs 'Course')
   so 'Catalysts' locks to exact dead-center, perfectly matching Layer 2 */
.site-nav-primary li:first-child,
.site-nav-primary li:last-child {
  min-width: 82px;
}
.site-nav-primary li:first-child {
  justify-content: flex-end;
}
.site-nav-primary li:last-child {
  justify-content: flex-start;
}

.site-nav-primary li.nav-sep,
.site-nav-primary li.separator,
.site-nav-primary li:not(:has(a)) {
  transform: translateY(-1px);
  color: rgba(255, 255, 255, 0.35);
  font-size: 16px !important;
  user-select: none;
}

/* Primary Navigation Links */
.site-nav-primary a {
  position: relative;
  font-family: var(--font-headings);
  font-size: 22px !important;
  font-weight: bold !important;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
  padding: 0 4px;
  display: inline-block;
  line-height: 1.1;
  white-space: nowrap !important;
  transition: color 0.25s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Invisible Touch/Click Expander: Makes surrounding white space fully clickable without pushing navbar height */
.site-nav-primary a::before {
  content: "";
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -8px;
  right: -8px;
  cursor: pointer;
}
.site-nav-primary li:first-child a::before {
  left: -35px; /* Covers the left outer wing empty white space */
}
.site-nav-primary li:last-child a::before {
  right: -35px; /* Covers the right outer wing empty white space */
}

/* The Overline Above Links (Clean, Crisp, No Glow) */
.site-nav-primary a::after {
  content: "";
  position: absolute;
  top: -1px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--glow-pink-soft), transparent);
  border-radius: 2px;
  box-shadow: none !important;
  opacity: 0;
  pointer-events: none;
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, background 0.25s ease;
}

/* Hover State */
.site-nav-primary a:hover {
  color: #FFADD6 !important;
  text-shadow: none !important;
}

.site-nav-primary a:hover::after {
  width: 100%;
  left: 0;
  opacity: 0.9;
}

/* Active State (Current Page) */
.site-nav-primary a.active {
  color: #ECBDD4 !important;
  text-shadow: none !important;
}

.site-nav-primary a.active::after {
  width: 100%;
  left: 0;
  opacity: 1;
  box-shadow: none !important;
}

/* Hovering Active State (Gives visual cue that it is still clickable) */
.site-nav-primary a.active:hover {
  color: #FFADD6 !important;
}

.site-nav-primary a.active:hover::after {
  background: linear-gradient(90deg, transparent, var(--glow-pink-neon), transparent) !important;
  opacity: 1;
  box-shadow: none !important;
  filter: none !important;
}

/* Touch & Press Feedback (Instant tactile response on mobile & touch devices) */
.site-nav-primary a:active {
  color: #ffffff !important;
  transform: scale(0.95);
  text-shadow: none !important;
  transition: transform 0.08s ease, color 0.08s ease;
}

.site-nav-primary a:active::after {
  width: 100% !important;
  left: 0 !important;
  opacity: 1 !important;
  background: linear-gradient(90deg, transparent, #ffffff, transparent) !important;
}

/* Line 2: Standardized Fixed-Height Secondary Breadcrumb (22px font size matches line 1)
   Non-clickable static chapter/article indicator (pure breadcrumb title). */
.site-nav-secondary,
.site-nav-secondary * {
  pointer-events: none !important;
  cursor: default !important;
}

.site-nav-secondary {
  margin-top: 10px;
  height: 28px;
  line-height: 28px;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  overflow: visible;
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  will-change: height, margin-top, opacity, transform;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.28s cubic-bezier(0.4, 0, 0.2, 1) 0.05s,
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear;
}

/* Scrolled state: gracefully collapse Layer 2 to expand viewport viewing capacity */
.site-nav.nav-scrolled .site-nav-secondary {
  height: 0 !important;
  min-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0 !important;
  transform: translateY(-6px);
  pointer-events: none !important;
  overflow: hidden !important;
  visibility: hidden;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.18s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              visibility 0s linear 0.35s;
}

.site-nav-secondary a,
.site-nav-secondary span {
  position: relative;
  font-family: var(--font-headings);
  font-size: 22px !important;
  font-weight: bold !important;
  color: #ECBDD4;
  text-decoration: none;
  padding: 2px 8px 0 8px;
  line-height: 1.1;
  text-shadow: none !important;
  display: inline-block;
  white-space: nowrap !important;
  transform: none !important;
  pointer-events: none !important;
  cursor: default !important;
}

.site-nav-secondary a::after,
.site-nav-secondary a.active-breadcrumb::after,
.site-nav-secondary a.active::after,
.site-nav-secondary span::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--glow-pink-soft), transparent);
  border-radius: 2px;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  transition: all 0.25s ease;
}

.site-nav-secondary img.infinity-icon {
  vertical-align: middle;
  filter: drop-shadow(0 0 8px rgba(var(--glow-pink-soft-rgb), 0.85)) drop-shadow(0 0 18px rgba(var(--glow-pink-soft-rgb), 0.55));
  transition: transform 0.3s ease;
}

/* ==========================================================================
   4. CENTRAL SITE FLOW WRAPPER (.site-wrapper & .page-container)
   ========================================================================== */
.site-wrapper,
.page-container {
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 62px 16px 50px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

article.catalyst-article {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ==========================================================================
   5. [JUMP-04] BRAND HEADER, DIVIDERS & MASTHEAD
   ========================================================================== */
.hero-stage,
.page-header-stage,
.brand-header-stage {
  width: 100%;
  max-width: 860px;
  margin: 0 auto 22px auto;
  text-align: center;
  position: relative;
  padding: 11px 12px 25px 12px;
  background: none !important;
  box-sizing: border-box;
}

.brand-masthead-wrap {
  width: 100%;
  max-width: 100%;
  margin: 0 auto 6px auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.brand-masthead-img {
  display: block;
  margin: 0 auto;
  max-width: min(532px, 88vw) !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

.brand-identity {
  margin: 0 auto 14px auto;
  text-align: center;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: transparent !important;
}

.brand-title {
  font-family: "Lucida Calligraphy", "Lucida Calligraphia", "Apple Chancery", cursive, serif !important;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: 2px;
  background: linear-gradient(180deg, #ffffff 0%, #fce7ee 25%, #e098aa 65%, #c26e82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 0 10px rgba(var(--glow-pink-soft-rgb), 0.25));
}

.brand-symbol {
  margin: 4px auto;
  line-height: 1;
  background: transparent !important;
}

.butterfly-icon {
  width: 46px;
  height: auto;
  vertical-align: middle;
  filter: none !important;
}

.brand-tagline {
  font-family: "Lucida Calligraphy", "Lucida Calligraphia", "Apple Chancery", cursive, serif !important;
  font-size: 20px;
  letter-spacing: 3px;
  font-style: italic;
  margin-top: 6px !important;
  background: linear-gradient(90deg, #ffffff 0%, #fae1e5 25%, #df99a8 70%, #c26e82 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  filter: drop-shadow(0 0 8px rgba(var(--glow-pink-soft-rgb), 0.2));
}

/* Header Dividers (Butterflies & Squares) */
.article-header-divider-wrap {
  width: 100%;
  max-width: 720px;
  margin: 18px auto 26px auto;
  position: relative;
}

.divider-opt-butterflies,
.divider-opt-squares {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 50%;
  max-width: 520px;
  margin: 4px auto 14px auto !important;
}
.divider-opt-butterflies::before {
  content: "";
  position: absolute;

  /* 🦋 THE BUTTERFLY SAFETY GAPS (Adjust these two numbers to change line length) */
  left: 22px;                          /* Higher = shorter line & bigger gap */
  right: 22px;                         /* Keep same as left for perfect symmetry */

  top: calc(50% - 2px);                /* Level with the butterfly waist */
  transform: translateY(-50%);
  height: 1.5px;

  /* 🌌 EXACT NAVIGATION BAR COLOR PALETTE (Solid to ends so it stays full thickness) */
  background: linear-gradient(
    90deg,
    rgba(var(--glow-pink-neon-rgb), 0.45) 0%,     /* Navigation soft celestial rose */
    rgba(var(--glow-pink-soft-rgb), 0.85) 50%,    /* Navigation bright starlight cream (#FFE1F0) */
    rgba(var(--glow-pink-neon-rgb), 0.45) 100%    /* Navigation soft celestial rose */
  );

  /* Soft navigation starlight halo */
  box-shadow: 0 0 8px rgba(var(--glow-pink-soft-rgb), 0.35), 0 0 14px rgba(var(--glow-pink-neon-rgb), 0.20);
}

.divider-opt-squares::before {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  height: 1.5px;
  background: linear-gradient(90deg, transparent 0%, rgba(var(--glow-pink-neon-rgb), 0.5) 50%, transparent 100%);
  box-shadow: 0 0 8px rgba(196, 128, 143, 0.6);
}

.divider-opt-butterflies img {
  position: relative;
  z-index: 2;
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px rgba(var(--glow-pink-neon-rgb), 0.5));
}

.divider-opt-squares img {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  filter: invert(1) drop-shadow(0 0 8px rgba(var(--glow-pink-neon-rgb), 0.9)) drop-shadow(0 0 16px rgba(212, 123, 173, 0.6));
}

h1.page-title {
  font-family: var(--font-headings);
  font-size: 44px;
  font-weight: 700 !important;
  color: #ffffff !important;
  letter-spacing: 2.5px;
  text-align: center;
  text-shadow: 0 0 14px rgba(var(--glow-pink-soft-rgb), 0.4), 0 0 24px rgba(var(--glow-pink-neon-rgb), 0.22);
  margin-top: 6px;
  margin-bottom: 4px;
}

.page-title-text {
  display: block;
}

/* Catalyst Article Hero Subtitles (Quotes) */
.hero-subtitle,
p.hero-subtitle,
span.hero-subtitle {
  font-size: 21px !important;
  font-style: italic;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--glow-pink-soft);
  max-width: 720px;
  margin: 10px auto 0 auto !important;
  line-height: 1.5;
  text-shadow: 0 0 12px rgba(var(--glow-pink-neon-rgb), 0.35);
  text-align: center !important;
  min-height: 36px;
  display: block !important;
}

/* Pillar & Hub Page Subtitles (Story, Catalysts Index, Course) - Non-italic clean display */
.page-subtitle,
p.page-subtitle,
span.page-subtitle {
  font-size: 21px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  color: var(--glow-pink-soft);
  max-width: 720px;
  margin: 10px auto 0 auto !important;
  line-height: 1.5;
  text-shadow: 0 0 12px rgba(var(--glow-pink-neon-rgb), 0.35);
  text-align: center !important;
  min-height: 36px;
  display: block !important;
}

/* ==========================================================================
   6. [JUMP-05] UNIVERSAL ROOTBOX FOUNDATION (.Rootbox, .glass-panel, .article-reading-container)
   Wide Horizon Feather & 4px Left Spine:
   - 4.0px solid left border spine (var(--course-accent))
   - border-top, border-right, border-bottom: none
   - 4px 18px 18px 4px asymmetric border radius
   - 0.20 Darkness obsidian glass + 0.25x Dawn Wash
   - 1.1x pure left glow (white core + themed aura), ZERO dark drop-shadow
   ========================================================================== */
.Rootbox,
.glass-panel,
.article-reading-container {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--container-border-radius, 4px 18px 18px 4px);
  padding: var(--container-padding, 30px 32px);
  margin-bottom: 22px;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left-width: var(--user-border-width, 4.0px);
  border-left-style: solid;
  border-left-color: var(--course-accent, var(--glow-pink-neon));

  /* Wide Horizon Feather Gradient Overlay with Live Container Darkness & Wash */
  background: 
    linear-gradient(90deg, 
      rgba(var(--course-glow-rgb, var(--glow-pink-neon-rgb)), calc(0.10 * var(--user-wash-mult, 0.25))) 0%, 
      rgba(var(--course-glow-rgb, var(--glow-pink-neon-rgb)), calc(0.05 * var(--user-wash-mult, 0.25))) 45%, 
      transparent 85%),
    rgba(6, 2, 8, var(--container-darkness, 0.20));
  background-color: rgba(6, 2, 8, var(--container-darkness, 0.20));

  /* 4-Sided Directional Glows (Adjustable on all 4 sides via Master Switchboard) */

/* Crisp Starlight Spine (Centered with a 1px razor core + soft halo) */
  box-shadow: 
    /* 1. Tight, razor-sharp starlight core directly hugging the spine */
    0 0 2px rgba(255, 255, 255, 0.9),
    /* 2. Concentrated 4px inner brilliance */
    -1px 0 5px rgba(255, 255, 255, calc(0.45 * var(--glow-left, 1.1))),
    /* 3. Soft ambient thematic halo that blooms outward cleanly without smearing */
    -3px 0 14px -1px rgba(var(--course-glow-rgb, var(--glow-pink-neon-rgb)), calc(0.50 * var(--glow-left, 1.1)));
}

.Rootbox > *,
.glass-panel > *,
.article-reading-container > * {
  position: relative;
  z-index: 1;
}

/* Imprinted Leaves Patterns on .Rootbox & .glass-panel */
.Rootbox.leaves-pattern,
.Rootbox.leaves-pattern-spaced,
.glass-panel.leaves-pattern,
.glass-panel.leaves-pattern-spaced {
  position: relative;
  overflow: hidden;
}

.Rootbox.leaves-pattern::before,
.Rootbox.leaves-pattern-spaced::before,
.glass-panel.leaves-pattern::before,
.glass-panel.leaves-pattern-spaced::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../_images/leaves.png);
  background-repeat: repeat;
  background-position: center top;
  pointer-events: none;
  z-index: 0;
}

.Rootbox.leaves-pattern::before,
.glass-panel.leaves-pattern::before {
  background-size: 400px auto;
  opacity: 0.06;
}

.Rootbox.leaves-pattern-spaced::before,
.glass-panel.leaves-pattern-spaced::before {
  background-size: 920px auto;
  opacity: 0;
}

.Rootbox.leaves-pattern > *,
.Rootbox.leaves-pattern-spaced > *,
.glass-panel.leaves-pattern > *,
.glass-panel.leaves-pattern-spaced > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   DECOUPLED COLOR PALETTE (Clean 1-Word Class Names)
   ========================================================================== */
.pink,
.theme-obsidian,
.theme-obsidian-blend     { --course-accent: var(--glow-pink-neon); --course-glow-rgb: var(--glow-pink-neon-rgb); }

.yellow,
.gold,
.theme-champagne          { --course-accent: #f9ee9c; --course-glow-rgb: 255, 243, 150; }

.blue,
.periwinkle,
.theme-periwinkle,
.theme-sapphire           { --course-accent: #71cbff; --course-glow-rgb: 113, 203, 255; }

.purple,
.theme-amethyst           { --course-accent: #c084fc; --course-glow-rgb: 192, 132, 252; }

.red,
.rose,
.theme-rose               { --course-accent: #ff8ca1; --course-glow-rgb: 255, 140, 161; }

.green                    { --course-accent: #7affc8; --course-glow-rgb: 122, 255, 200; }
.indigo                   { --course-accent: #f0cbfc; --course-glow-rgb: 251, 155, 255; }
.orange:not(.quotation)   { --course-accent: #ff9f6e; --course-glow-rgb: 255, 159, 110; }
.orange2                  { --course-accent: #ff5f39; --course-glow-rgb: 255, 95, 57; }
.lime                     { --course-accent: #e4ff98; --course-glow-rgb: 228, 255, 152; }
.cyan                     { --course-accent: #00fffa; --course-glow-rgb: 26, 255, 250; }
.violet                   { --course-accent: #f0cbfc; --course-glow-rgb: 251, 155, 255; }
.brown                    { --course-accent: #ff9c82; --course-glow-rgb: 255, 156, 130; }
.skin                     { --course-accent: #ff88bd; --course-glow-rgb: 255, 136, 189; }
.white                    { --course-accent: #efedff; --course-glow-rgb: 239, 237, 255; }

/* Active Translucency Modifier */
.translucent-55 { --alpha-override: var(--container-darkness, 0.20); }



/* ==========================================================================
   SIMPLIFIED & DECOUPLED .Rootbox SYSTEM (Colors + .experience1/2/3 Textures)
   - Base .Rootbox inherits Universal 4px Left Spine, Dawn Wash & Zero-Shadow Foundation.
   - .experience1, .experience2, .experience3 control ONLY the background
     pattern image and its transparency (opacity) in ONE place!
   - Color classes (.red, .green, .indigo, .blue, .violet, .brown, .orange,
     .yellow, .skin, .white / .exercise) map their unique accent color to the spine and glow!
   ========================================================================== */

/* 1. Base Container is derived directly from the Universal .Rootbox foundation defined above */

/* 2. Background Pattern / Texture Classes */
.Rootbox.experience1::before,
.Rootbox.experience2::before,
.Rootbox.experience3::before {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
  background-position: center;
  pointer-events: none;
  z-index: 0;
}

.Rootbox.experience1::before {
  background-image: url(../_images/experience1.png);
  opacity: 0;
}

.Rootbox.experience2::before {
  background-image: url(../_images/experience2.png);
  opacity: 0;
}

.Rootbox.experience3::before {
  background-image: url(../_images/leaves.png);
  opacity: 0;
}



/* Dual Double-Spine Containers: Self-Transformation Box & Creator's Newsletter (Pure White) */
.white,
.exercise,
#newsletterSection,
section#newsletterSection,
#course,
aside#course,
.wholealbumcatalystwrap {
  --course-accent: #efedff;
  --course-glow-rgb: 239, 237, 255;
  border-left: 6px double #efedff;
  border-right: 6px double #efedff;
  border-top: none;
  border-bottom: none;
  border-radius: 4px;
  padding: 38px 32px;
  margin-bottom: 24px;
  margin-top: 22px;

  /* Bilateral Pure Diamond White Starlight Glow (Controlled via --glow-self-transformation) */
  box-shadow: 
    calc(-3px * var(--glow-self-transformation, 1.1)) 0 calc(8px * var(--glow-self-transformation, 1.1)) rgba(239, 237, 255, calc(0.55 * var(--glow-self-transformation, 1.1))),
    calc(-8px * var(--glow-self-transformation, 1.1)) 0 calc(22px * var(--glow-self-transformation, 1.1)) -2px rgba(239, 237, 255, calc(0.35 * var(--glow-self-transformation, 1.1))),
    calc(3px * var(--glow-self-transformation, 1.1)) 0 calc(8px * var(--glow-self-transformation, 1.1)) rgba(239, 237, 255, calc(0.55 * var(--glow-self-transformation, 1.1))),
    calc(8px * var(--glow-self-transformation, 1.1)) 0 calc(22px * var(--glow-self-transformation, 1.1)) -2px rgba(239, 237, 255, calc(0.35 * var(--glow-self-transformation, 1.1))),
    0 calc(-3px * var(--glow-top, 0.0)) calc(10px * var(--glow-top, 0.0)) rgba(239, 237, 255, calc(0.25 * var(--glow-top, 0.0))),
    0 calc(3px * var(--glow-bottom, 0.0)) calc(10px * var(--glow-bottom, 0.0)) rgba(239, 237, 255, calc(0.25 * var(--glow-bottom, 0.0)));

  /* Inverted Dual Corner: Top-Left Pearl + Bottom-Right Rose */
  background: 
    radial-gradient(
      ellipse 90% 50% at 0% 0%,
      rgba(239, 237, 255, 0.16) 0%,
      rgba(239, 237, 255, 0.06) 42%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 95% 55% at 100% 100%,
      rgba(var(--glow-pink-soft-rgb), 0.18) 0%,
      rgba(var(--glow-pink-neon-rgb), 0.08) 45%,
      transparent 80%
    ),
    linear-gradient(90deg, 
      rgba(239, 237, 255, calc(0.06 * var(--user-wash-mult, 0.25))) 0%, 
      transparent 35%, 
      transparent 65%, 
      rgba(239, 237, 255, calc(0.06 * var(--user-wash-mult, 0.25))) 100%),
    rgba(26, 8, 24, var(--container-darkness, 0.10));
  background-color: rgba(26, 8, 24, var(--container-darkness, 0.10));
  transition: 
    border 0.4s ease, 
    box-shadow 0.4s ease, 
    background 0.4s ease, 
    background-color 0.4s ease, 
    --user-wash-mult 0.4s ease, 
    --glow-self-transformation 0.4s ease, 
    --container-darkness 0.4s ease;
}

/* ==========================================================================
   GRADIENT SPINE JOURNEYS (.knowing3, .knowing4, .suffering3, .suffering4, .story1)
   Multi-section linked gradient themes for catalyst articles and the story page.
   Can be applied by adding the class name anywhere:
     1. On <article class="catalyst-article knowing3">
     2. On <body class="aurora-blend-05 knowing3">
     3. On <main class="site-wrapper knowing3">
     4. On <article class="Rootbox story1" id="introContainer">
   Supports both 'story1' and 'story-1' naming styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. KNOWING (3 SECTIONS) — .knowing3 / .knowing-3
   -------------------------------------------------------------------------- */
/* 1 · Introduction */
:is(.knowing3, .knowing-3) :is(.catalyst-article, article) > section:nth-of-type(1),
:is(.catalyst-article, article):is(.knowing3, .knowing-3) > section:nth-of-type(1) {
  --course-accent: #42cbe4 !important;
  --course-glow-rgb: 110, 217, 194 !important;
  border-image: linear-gradient(to bottom, #42cbe4, 44%, #9be7a1) 1 !important;
}

/* 2 · In depth */
:is(.knowing3, .knowing-3) :is(.catalyst-article, article) > section:nth-of-type(2),
:is(.catalyst-article, article):is(.knowing3, .knowing-3) > section:nth-of-type(2) {
  --course-accent: #9be7a1 !important;
  --course-glow-rgb: 205, 181, 182 !important;
  border-image: linear-gradient(to bottom, #9be7a1, 51%, #ff83cc) 1 !important;
}

/* 3 · Path of the Creator */
:is(.knowing3, .knowing-3) :is(.catalyst-article, article) > section:nth-of-type(3),
:is(.catalyst-article, article):is(.knowing3, .knowing-3) > section:nth-of-type(3) {
  --course-accent: #ff83cc !important;
  --course-glow-rgb: 247, 184, 230 !important;
  border-image: linear-gradient(to bottom, #ff83cc, 40%, #efedff) 1 !important;
}

/* --------------------------------------------------------------------------
   2. KNOWING (4 SECTIONS WITH IMPORTANCE) — .knowing4 / .knowing-4
   -------------------------------------------------------------------------- */
/* 1 · Introduction */
:is(.knowing4, .knowing-4) :is(.catalyst-article, article) > section:nth-of-type(1),
:is(.catalyst-article, article):is(.knowing4, .knowing-4) > section:nth-of-type(1) {
  --course-accent: #42cbe4 !important;
  --course-glow-rgb: 110, 217, 194 !important;
  border-image: linear-gradient(to bottom, #42cbe4, 40%, #9be7a1) 1 !important;
}

/* 2 · In depth */
:is(.knowing4, .knowing-4) :is(.catalyst-article, article) > section:nth-of-type(2),
:is(.catalyst-article, article):is(.knowing4, .knowing-4) > section:nth-of-type(2) {
  --course-accent: #9be7a1 !important;
  --course-glow-rgb: 205, 175, 116 !important;
  border-image: linear-gradient(to bottom, #9be7a1, 51%, #ff7747) 1 !important;
}

/* 3 · Importance */
:is(.knowing4, .knowing-4) :is(.catalyst-article, article) > section:nth-of-type(3),
:is(.catalyst-article, article):is(.knowing4, .knowing-4) > section:nth-of-type(3) {
  --course-accent: #ff7747 !important;
  --course-glow-rgb: 255, 125, 138 !important;
  border-image: linear-gradient(to bottom, #ff7747, 63%, #ff83cc) 1 !important;
}

/* 4 · Path of the Creator */
:is(.knowing4, .knowing-4) :is(.catalyst-article, article) > section:nth-of-type(4),
:is(.catalyst-article, article):is(.knowing4, .knowing-4) > section:nth-of-type(4) {
  --course-accent: #ff83cc !important;
  --course-glow-rgb: 247, 184, 230 !important;
  border-image: linear-gradient(to bottom, #ff83cc, 40%, #efedff) 1 !important;
}

/* --------------------------------------------------------------------------
   3. SUFFERING (3 SECTIONS) — .suffering3 / .suffering-3
   -------------------------------------------------------------------------- */
/* 1 · Introduction */
:is(.suffering3, .suffering-3) :is(.catalyst-article, article) > section:nth-of-type(1),
:is(.catalyst-article, article):is(.suffering3, .suffering-3) > section:nth-of-type(1) {
  --course-accent: #fc6ca9 !important;
  --course-glow-rgb: 170, 142, 202 !important;
  border-image: linear-gradient(to bottom, #fc6ca9, 51%, #57b0eb) 1 !important;
}

/* 2 · In depth */
:is(.suffering3, .suffering-3) :is(.catalyst-article, article) > section:nth-of-type(2),
:is(.catalyst-article, article):is(.suffering3, .suffering-3) > section:nth-of-type(2) {
  --course-accent: #57b0eb !important;
  --course-glow-rgb: 171, 132, 192 !important;
  border-image: linear-gradient(to bottom, #57b0eb, 51%, #ff5996) 1 !important;
}

/* 3 · Path of the Creator */
:is(.suffering3, .suffering-3) :is(.catalyst-article, article) > section:nth-of-type(3),
:is(.catalyst-article, article):is(.suffering3, .suffering-3) > section:nth-of-type(3) {
  --course-accent: #ff5996 !important;
  --course-glow-rgb: 247, 163, 203 !important;
  border-image: linear-gradient(to bottom, #ff5996, 23%, #efedff) 1 !important;
}

/* --------------------------------------------------------------------------
   4. SUFFERING (4 SECTIONS WITH IMPORTANCE) — .suffering4 / .suffering-4
   -------------------------------------------------------------------------- */
/* 1 · Introduction */
:is(.suffering4, .suffering-4) :is(.catalyst-article, article) > section:nth-of-type(1),
:is(.catalyst-article, article):is(.suffering4, .suffering-4) > section:nth-of-type(1) {
  --course-accent: #fc6ca9 !important;
  --course-glow-rgb: 170, 142, 202 !important;
  border-image: linear-gradient(to bottom, #fc6ca9, 51%, #57b0eb) 1 !important;
}

/* 2 · In depth */
:is(.suffering4, .suffering-4) :is(.catalyst-article, article) > section:nth-of-type(2),
:is(.catalyst-article, article):is(.suffering4, .suffering-4) > section:nth-of-type(2) {
  --course-accent: #57b0eb !important;
  --course-glow-rgb: 170, 144, 172 !important;
  border-image: linear-gradient(to bottom, #57b0eb, 51%, #fc706e) 1 !important;
}

/* 3 · Importance */
:is(.suffering4, .suffering-4) :is(.catalyst-article, article) > section:nth-of-type(3),
:is(.catalyst-article, article):is(.suffering4, .suffering-4) > section:nth-of-type(3) {
  --course-accent: #fc706e !important;
  --course-glow-rgb: 254, 100, 130 !important;
  border-image: linear-gradient(to bottom, #fc706e, 51%, #ff5996) 1 !important;
}

/* 4 · Path of the Creator */
:is(.suffering4, .suffering-4) :is(.catalyst-article, article) > section:nth-of-type(4),
:is(.catalyst-article, article):is(.suffering4, .suffering-4) > section:nth-of-type(4) {
  --course-accent: #ff5996 !important;
  --course-glow-rgb: 247, 163, 203 !important;
  border-image: linear-gradient(to bottom, #ff5996, 23%, #efedff) 1 !important;
}

/* --------------------------------------------------------------------------
   TERMINAL CORNER ILLUMINATION (Last Box of Catalyst Gradient Journeys)
   Dual Mirrored Corners (Bottom-Left: Pure White | Top-Right: Lavender Starlight)
   -------------------------------------------------------------------------- */
:is(.knowing3, .knowing-3, .suffering3, .suffering-3) :is(.catalyst-article, article) > section:nth-of-type(3),
:is(.catalyst-article, article):is(.knowing3, .knowing-3, .suffering3, .suffering-3) > section:nth-of-type(3),
:is(.knowing4, .knowing-4, .suffering4, .suffering-4) :is(.catalyst-article, article) > section:nth-of-type(4),
:is(.catalyst-article, article):is(.knowing4, .knowing-4, .suffering4, .suffering-4) > section:nth-of-type(4) {
  background: 
    /* 1. Bottom-Left: Pure Diamond Starlight White */
    radial-gradient(
      ellipse min(462px, 70vw) min(462px, 70vw) at 0% 100%,
      rgba(255, 255, 255, 0.20) 0%,
      rgba(245, 245, 255, 0.10) 35%,
      rgba(240, 240, 250, 0.04) 60%,
      transparent 80%
    ),
    /* 2. Top-Right: Diamond White with Subtle Whisper of Lavender Violet */
    radial-gradient(
      ellipse min(462px, 70vw) min(462px, 70vw) at 100% 0%,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(245, 238, 255, 0.10) 30%,
      rgba(192, 132, 252, 0.05) 55%,
      transparent 80%
    ),
    /* 3. Base Eastward Horizon Wash */
    linear-gradient(90deg, 
      rgba(var(--course-glow-rgb, var(--glow-pink-neon-rgb)), calc(0.10 * var(--user-wash-mult, 0.25))) 0%, 
      rgba(var(--course-glow-rgb, var(--glow-pink-neon-rgb)), calc(0.05 * var(--user-wash-mult, 0.25))) 45%, 
      transparent 85%),
    rgba(6, 2, 8, var(--container-darkness, 0.20)) !important;
}
/* --------------------------------------------------------------------------
   5. STORY PAGE (2 CONTAINERS) — .story1 / .story-1
   Intro Container: Pink (#ff5996) -> 57% -> White (#efedff)
   My Story Container: White (#efedff) -> Pink (#ff5996) -> White (#efedff)
   -------------------------------------------------------------------------- */
/* 1 · Welcome / Intro Container */
:is(.story1, .story-1) #introContainer,
#introContainer:is(.story1, .story-1) {
  --course-accent: #ff5996 !important;
  --course-glow-rgb: 247, 163, 203 !important;
  border-image: linear-gradient(to bottom, #ff5996, 57%, #efedff) 1 !important;
}

/* 2 · My Story Reading Container (Double-Transition: White -> Pink -> White) */
:is(.story1, .story-1) #myDiarySection,
#myDiarySection:is(.story1, .story-1),
#introContainer:is(.story1, .story-1) ~ #myDiarySection {
  --course-accent: #efedff !important;
  --course-glow-rgb: 247, 163, 203 !important;
  border-image: linear-gradient(to bottom, #efedff 0%, #ff5996 50%, #efedff 100%) 1 !important;
}

/* ==========================================================================
   7. [JUMP-01] UNIVERSAL TYPOGRAPHY, HEADINGS & PARAGRAPHS
   ========================================================================== */

/* Minimal Author Byline ("By Jonny J Liu") */
.meta-author-minimal {
  font-family: var(--font-reading);
  font-style: italic;
  font-size: 13.5px;
  color: rgba(var(--glow-pink-soft-rgb), 0.45);
  text-align: center;
  margin: -10px auto 18px auto;
  line-height: 1.4;
  letter-spacing: 0.4px;
  display: block;
}

/* ==========================================================================
   HEADINGS (h2, h3, h4, h5)
   ========================================================================== */

/* --------------------------------------------------------------------------
   STANDARD H2: OPTION 07 (CELESTIAL WHISPER STARBURST FLANKERS) - SITE DEFAULT
   Symmetrical radiant starburst glyphs (✧) flanking left and right in celestial lavender/pink glow.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   AURORA THEME H2: CLEAN CHROMATIC UNDERSCORE (WITHOUT STARS)
   Blends your site's Aurora Cyan (#38bdf8), Neon Pink (#ff70b8) & Violet (#c084fc).
   ========================================================================== */
/* ==========================================================================
   CLEAN H2: CELESTIAL UNDERSCORE (WITHOUT STARS)
   Pure typography with the star's lavender & neon pink glowing filament line.
   ========================================================================== */
/* VARIATION B: Rose-Cream to Brightened #2c1524 Plum Gradient */
/* OPTION 3: +160px Total Extension */
h2,
h2.card-title,
h2.chapterstitle {
  font-family: var(--font-headings);
  font-size: 27px;
  font-weight: bold;
  color: var(--glow-pink-soft);
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.35);
  letter-spacing: 1.5px;
  text-align: center;
  width: fit-content;
  max-width: 85%;
  margin: 0 auto 24px auto;
  display: block;
  padding: 0 0 14px 0;
  border-bottom: none;
  position: relative;
}

h2::before,
h2.card-title::before,
h2.chapterstitle::before {
  display: none;
}

h2::after,
h2.card-title::after,
h2.chapterstitle::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 40px);
  max-width: 90vw;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, var(--glow-pink-neon) 0%, var(--glow-pink-soft) 50%, var(--glow-pink-neon) 100%);
  box-shadow: none;
  pointer-events: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Ensure flex centering inside frosted glass & Rootbox containers */
.glass-panel > h2,
.Rootbox > h2 {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

/* Special H2: "My Story" (Bigger Illuminated Title) */
h2.my-diary-title {
  font-size: 38px;
  color: #ffffff;
  border-bottom: none !important;
  margin-bottom: 24px !important;
  padding-bottom: 0 !important;
  text-shadow: 0 0 18px rgba(var(--glow-pink-neon-rgb), 0.7), 0 0 35px rgba(212, 123, 173, 0.45);
}

h2.my-diary-title::after {
  display: none !important;
}

/* Standard H3: Universal Winged Lines (Matched to Underscore Radiant Pink Scheme) */
/* OPTION A: Ice-Cyan Starlight H3 */
/* LEFT-ALIGNED H3 (Matches Left Edge of Paragraphs) */
/* TRUE BASIC UNDERLINE: Native 1px Text Decoration */
/* ==========================================================================
   H3 WITH LEFT & RIGHT LINES: OPTION 1 (CLEAN MINIMALIST FILAMENTS)
   ========================================================================== */
h3,
h3.section-subtitle,
h3.wing {
  font-family: var(--font-headings);
  font-size: 22px;
  font-style: italic;
  font-weight: 600;
  color: var(--glow-pink-soft);
  letter-spacing: 0.8px;
  text-align: center;
  
  /* Flex row layout to balance left & right flanking lines symmetrically */
  display: flex !important;
  align-items: center !important;

  /* =========================================================================
     FLANKING LINE POSITION CONTROLLER:
     - 'center'        : Lines hug directly beside the sides of the words.
     - 'space-between' : Lines push outward to anchor at paragraph edges (0px-600px).
     ========================================================================= */
  justify-content: center !important;
  gap: 16px !important;                 /* Space between words and flanking lines */
  
  width: 100% !important;
  max-width: 600px !important;
  margin: 32px auto !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.35);
}

h3 span {
  display: inline-block;
  text-align: center;
  line-height: 1.4;
}

/* Symmetrical Left & Right 1px Lines (Identical Fixed Width, Flush to Paragraph Boundaries) */
h3::before,
h3.section-subtitle::before,
h3.wing::before,
h3::after,
h3.section-subtitle::after,
h3.wing::after {
  content: "" !important;
  display: block !important;
  position: static !important;
  transform: none !important;
  width: 70px !important;              /* Consistent fixed bar length matching "The Seed" */
  height: 1px !important;              /* Crisp 1px hairline */
  border-radius: 0 !important;
  flex: none !important;
  flex-shrink: 0 !important;
}

h3::before,
h3.section-subtitle::before,
h3.wing::before {
  background: linear-gradient(90deg, var(--glow-pink-neon) 0%, var(--glow-pink-soft) 100%) !important; /* Outer Pink to Inner Cream */
}

h3::after,
h3.section-subtitle::after,
h3.wing::after {
  background: linear-gradient(90deg, var(--glow-pink-soft) 0%, var(--glow-pink-neon) 100%) !important; /* Inner Cream to Outer Pink */
}

/* Standard H4 */
h4 {
  font-family: var(--font-headings);
  font-size: 22px;
  font-weight: bold;
  color: #ffffff;
  margin: 20px auto 10px auto;
  text-align: center;
}

/* Standard H5 Subtitle */
h5 {
  font-family: var(--font-reading);
  font-size: 19px;
  font-style: italic;
  font-weight: 700;
  color: var(--glow-pink-soft);
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.4);
  letter-spacing: 0.5px;
  margin: 14px auto;
  text-align: center;
}
/* ==========================================================================
   PARAGRAPHS & TYPOGRAPHY
   ========================================================================== */




/* Unified Paragraph (<p>) */
p {
  font-size: 16.5px;
  line-height: 1.85;
  color: #f5ede8;
  max-width: 720px;
  margin: 0 auto 18px auto;
  text-align: center;
}

/* Left-align body copy inside reading containers with comfortable line length */
.Rootbox p,
.glass-panel p,
.article-reading-container p,
.catalyst-article p:not(.hero-subtitle),
#introContainer p,
#myDiarySection p {
  text-align: left;
  max-width: 600px;
  letter-spacing: 0.2px;
}


/* 1. Center the opening greeting ("Welcome, I am Jonny John Liu") */
#introContainer .intro-greeting {
  text-align: center !important;
}

/* 2. Ensure all callout boxes and their interior text remain centered */
.callout-box,
.quotation,
.Rootbox.quotation,
.bigquote {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}


:is(.Rootbox, .glass-panel, .article-reading-container, .catalyst-article, #introContainer, #myDiarySection, body) :is(.callout-box, .quotation, .Rootbox.quotation, .bigquote) p,
.callout-box p,
.quotation p,
.Rootbox.quotation p,
.bigquote p {
  text-align: center !important;
}


/* p:last-child {
  margin-bottom: 0;
} */
/* Scoped last-child resets for bounded containers */
.callout-box > p:last-child,
.callout-box2 > p:last-child,
.stagesbox > p:last-child,
.thoughtbox > p:last-child,
.negativebox > p:last-child,
.whitelist > p:last-child,
.bluebox > p:last-child,
.st2 > p:last-child,
.st2 p:last-child {
  margin-bottom: 0;
}
/* Universal Bold Font: Palatino / Georgia Literary Italic (Inherited proportional size) */
b,
.strong2,
.bold {
  color: #fff;

  font-size: inherit;
  font-weight: 900;
  letter-spacing: 0.35px;
  text-shadow: 0 0 8px rgba(245, 237, 232, 0.25);
}

em,
i,
p em,
.em {
  font-family: inherit;
  font-style: italic;
  font-size: inherit;
  color: #ffe1f0;
  letter-spacing: 0.2px;
}

.glow {
  color: #ffffff !important;
  text-shadow: 
0 0 4px rgba(255, 255, 255, 0.45), 0 0 12px rgba(255, 255, 255, 0.35), 0 0 25px rgba(255, 255, 255, 0.15);
}

/* Stylized Garamond Italic Utility (.em2)
   Applies the tall, steep Garamond italic styling to any container or element (<p>, <li>, <div>, <span>, <em>).
   Color is left unset (inherited) so you can color it yourself or pair it with color utilities. */
.em2,
:is(p, li, div, span, em, i).em2,
.em2 :is(p, li, span, b, strong, em, i) {
  font-family: var(--font-headings, Garamond, serif) !important;
  font-style: italic !important;
  font-size: 20px !important;
  letter-spacing: 0.4px;
}

/* Theatrical Comical Suspense Beat ("Dun, dun, dun...") */
.dun,
p.dun {
  font-family: var(--font-headings, Garamond, serif) !important;
  font-style: italic !important;
  font-size: 21px !important;
  font-weight: 300;
  letter-spacing: 2.5px;
  color: inherit;
  display: block;
  text-align: center !important;
  margin: 10px auto 16px auto !important;
  transform: scale(1.11, 1.11); /* Skinnier (0.88x width) & Taller (1.28x height) */
  transform-origin: center;
}

.dun em,
p.dun em {
  font-family: inherit !important;
  font-style: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  color: inherit !important;
  letter-spacing: inherit !important;
}

/* ==========================================================================
   COLOR TYPE UTILITIES (.bluetype, .pinktype / .purpletype, .violettype, .whitetype)
   Works directly on words/paragraphs AND on wrapper containers (<div class="bluetype">)
   to effortlessly style dozens of paragraphs at once with clean nested overrides.
   .pinktype and .purpletype are interchangeable aliases.
   ========================================================================== */
.bluetype,
.bluetype :is(p, li, b, strong, em, i, span, blockquote) {
  color: #93d7f9 !important;
}

:is(.pinktype, .purpletype),
:is(.pinktype, .purpletype) :is(p, li, b, strong, em, i, span, blockquote) {
  color: #f0a3c8 !important;
}

.violettype,
.violettype :is(p, li, b, strong, em, i, span, blockquote) {
  color: #ff70b8 !important;
}

.whitetype,
.whiteprint,
:is(.whitetype, .whiteprint) :is(p, li, b, strong, em, i, span, blockquote) {
  color: #FFFFFF !important;
}

/* Nested override guarantee (e.g. <span class="pinktype"> inside <div class="bluetype">) */
:is(.bluetype, .pinktype, .purpletype, .violettype, .whitetype, .whiteprint) :is(.pinktype, .purpletype, .pinktype *, .purpletype *) {
  color: #f0a3c8 !important;
}
:is(.bluetype, .pinktype, .purpletype, .violettype, .whitetype, .whiteprint) :is(.bluetype, .bluetype *) {
  color: #93d7f9 !important;
}
:is(.bluetype, .pinktype, .purpletype, .violettype, .whitetype, .whiteprint) :is(.violettype, .violettype *) {
  color: #ff70b8 !important;
}
:is(.bluetype, .pinktype, .purpletype, .violettype, .whitetype, .whiteprint) :is(.whitetype, .whiteprint, .whitetype *, .whiteprint *) {
  color: #FFFFFF !important;
}

/* ==========================================================================
   AURORA GRADIENT UNDERSCORE & UNDERLINE UTILITY (.underscore, .underline)
   Celestial Aurora Light Filament:
   Multi-layer inline gradient underscore supporting single words, spans,
   headings, and multi-line wrapping sentences.
   - box-decoration-break: clone ensures EACH wrapped line gets its own underscore.
   - Ends exactly where words end on each line (zero overshoot into empty space).
   - Soft celestial glow: Cyan (68, 238, 255) -> Pink (248, 111, 180).
   - Works seamlessly with either class="underscore" or class="underline".
   ========================================================================== */
.underscore,
.underline {
  text-decoration: none !important;
  
}

:is(span, b, strong, em, i, a):is(.underscore, .underline),
p.underscore > span.underscore,
p.underline > span.underline {
  display: inline !important;
  background-image: 
    /* Core crisp line (1.5px) */
    linear-gradient(90deg, transparent 0%, rgba(68, 238, 255, 0.95) 4%, rgba(248, 111, 180, 0.95) 96%, transparent 100%),
    /* Soft 3px diffuse glow */
    linear-gradient(90deg, transparent 0%, rgba(68, 238, 255, 0.5) 6%, rgba(248, 111, 180, 0.5) 94%, transparent 100%),
    /* Wide 5px ethereal bloom */
    linear-gradient(90deg, transparent 0%, rgba(68, 238, 255, 0.2) 10%, rgba(248, 111, 180, 0.2) 90%, transparent 100%) !important;
  background-size: 100% 0.2px, 100% 1px, 102% 5px !important;
  background-repeat: no-repeat !important;
  background-position: 0 calc(100% - 1px), 0 calc(100% - 0px), 0 100% !important;
  box-decoration-break: clone !important;
  -webkit-box-decoration-break: clone !important;
  padding-bottom: 3px !important;
}

/* Block text elements (p, h1-h6):
   - display: block preserves exact 600px reading lane margins (flush with all paragraphs).
   - Interior text spans inline with box-decoration-break to underscore each line without moving words. */
:is(p, h1, h2, h3, h4, h5, h6):is(.underscore, .underline) {
  display: block !important;
  max-width: 600px !important;
  margin: 0 auto 18px auto !important;
  text-align: left !important;
}

/* Only center when explicitly paired with a center class */
:is(.center, .text-center):is(p, h1, h2, h3, h4, h5, h6):is(.underscore, .underline),
:is(p, h1, h2, h3, h4, h5, h6):is(.underscore, .underline):is(.center, .text-center) {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.bigger {
  display: block;              
  text-align: center;          
  font-size: 25px;            
  line-height: 0;            
  margin-top: 24px;            
  margin-bottom: 44px;          
  padding: 0;
  letter-spacing: 4px;         
}

.biggerfont {
       
  font-size: 18.3px;            
         
}


.italic
{  font-style: italic; }

.spacing {letter-spacing: 0.2px;}

/* ==========================================================================
   REFLECTIVE QUESTION UTILITY (.question, .questions)
   Spaces contemplative questions out with balanced breathing room,
   ensuring tidy, consistent gaps at the beginning, between, and end.
   ========================================================================== */
.question {
  margin-top: 26px !important;
  margin-bottom: 26px !important;
  padding: 2px 0;
}

/* Optional wrapper container support (<div class="question"> or <div class="questions">) */
div.question,
.questions {
  margin-top: 26px !important;
  margin-bottom: 26px !important;
  padding: 0;
}

div.question > p,
.questions > p {
  margin-top: 0 !important;
  margin-bottom: 26px !important;
}

div.question > p:last-child,
.questions > p:last-child {
  margin-bottom: 0 !important;
}

/* Center Align Text Utility Class */
.center p,
.center,
.text-center {
  text-align: center !important;
}

#myDiarySection ul.catalyst {
  list-style: none;
  padding: 0;
  margin: 16px auto 20px auto;
  text-align: center;
}

#myDiarySection li.catalyst {
  margin-bottom: 8px;
  font-size: 15.5px;
  color: var(--glow-pink-soft);
}
.coursereference {
  display: block;
  font-family: var(--font-reading);
  font-size: 14.5px;
  font-style: italic;
  color: var(--glow-pink-soft);
  /* Dual-layer glow: crisp inner starlight + soft outer rose bloom */
  text-shadow: 
    0 0 6px rgba(255, 255, 255, 0.65),
    0 0 14px rgba(var(--glow-pink-neon-rgb), 0.7);
  letter-spacing: 0.5px;
  text-align: center !important;
  margin: 28px auto !important;
  max-width: 520px;
}

.coursereference::before,
.coursereference::after {
  display: none !important;
}

.author-signature {
  text-align: center;
  font-family: "Lucida Calligraphy", "Lucida Calligraphia", "Apple Chancery", cursive, serif;
  font-size: 17px;
  font-style: italic;
  color: var(--glow-pink-soft);
  text-shadow: 0 0 12px rgba(var(--glow-pink-neon-rgb), 0.45);
  letter-spacing: 1px;
  margin-top: 20px;
  display: block;
}
.meta-date {
  font-family: var(--font-headings);
  font-size: 15px;
  color: var(--text-dimmed);
  margin-bottom: 18px;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Responsive Images inside Reading Containers */
.article-reading-container img,
.Rootbox img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px auto 22px auto;
  border-radius: 8px;
}

/* ==========================================================================
   HYPERLINKS
   ========================================================================== */
a {
  color: var(--accent-magenta);
  text-decoration: none;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--glow-pink-soft);
  text-shadow: 0 0 8px rgba(212, 123, 173, 0.6);
}

/* Text Body Links: Pink Underline with Lavender Visited */
p a,
.article-reading-container a,
.Rootbox a {
  color: var(--glow-pink-neon);
  text-decoration: underline;
  text-underline-offset: 3px;
}

p a:visited,
.article-reading-container a:visited,
.Rootbox a:visited {
  color: #dca8d8;
}

p a:hover,
.article-reading-container a:hover,
.Rootbox a:hover {
  color: var(--glow-pink-soft);
  text-shadow: 0 0 8px rgba(var(--glow-pink-soft-rgb), 0.8);
}



/* ==========================================================================
   9. [JUMP-03] EYE-COMFORT 1-WORD FONT CLASSES
   ========================================================================== */
.starlightcream   { color: #f5ede8 !important; }
.silverwhite      { color: #e8ecf2 !important; }
.roseparchment    { color: #fae8f0 !important; }
.twilightlavender { color: #d8d0dc !important; }
.lunarpearl       { color: #f8f9fa !important; }
.goldendawn       { color: #fef3db !important; }
.sagemist         { color: #e5f0ea !important; }

/* ==========================================================================
   10. STORY CHAPTERS & COURSE MODULES
   ========================================================================== */



/* Equalized & Matched-Width Chapter Directory Enclosure */
.abstract-seed-divider {
  width: 70% !important;
  max-width: 500px !important;
  height: 1px !important;
  background: linear-gradient(
    90deg, 
    rgba(var(--glow-pink-neon-rgb), 0) 0%, 
    rgba(var(--glow-pink-neon-rgb), 0.4) 25%, 
    rgba(var(--glow-pink-soft-rgb), 0.75) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.4) 75%, 
    rgba(var(--glow-pink-neon-rgb), 0) 100%
  ) !important;
  margin: 16px auto 28px auto !important;
  position: relative !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

/* Glowing Egg/Seed Emblem centered on top line */
.abstract-seed-divider::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 6px !important;
  height: 11px !important;
  background: var(--glow-pink-soft) !important;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40% !important;
  box-shadow: 0 0 10px var(--glow-pink-neon), 0 0 18px rgba(var(--glow-pink-neon-rgb), 0.6) !important;
  z-index: 2 !important;
}

.abstract-seed-divider::after {
  display: none !important;
}

.chapters-minimal-centered {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Aligns the rows to the left */
  width: fit-content;      /* Shrink-wraps the container tightly around the content */
  margin: 0 auto !important; /* Centers the whole block on the page */
  gap: 10px;
}

.chapters-minimal-centered .chapter-min-item {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;               /* Consistent space between Chapter number and title */
  padding: 4px 0;
  color: #ffffff;
  text-decoration: none;
  font-size: 15px;
  transition: all 0.2s ease;
  text-align: left;
  width: 100%;
}

.chapters-minimal-centered .chapter-min-item .ch-num {
  font-family: var(--font-headings);
  font-size: 13.5px;
  font-weight: bold;
  color: var(--glow-pink-soft);
  letter-spacing: 0.5px;
  opacity: 0.85;
  min-width: 85px;         /* Forces all chapter titles to start at the exact same vertical line! */
  text-align: right;       /* Right-aligns the roman numerals so they stack cleanly */
}

.chapters-minimal-centered .chapter-min-item .ch-name {
  color: #ffffff;
  font-weight: 400;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.chapters-minimal-centered .chapter-min-item:hover .ch-name {
  color: var(--glow-pink-neon);
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.7);
}

.chapters-minimal-centered .chapter-min-item:hover {
  transform: translateY(-1px);
}

.chapter-divider {
  border: 0 !important;
  width: 70% !important;
  max-width: 500px !important;
  height: 1px !important;
  background: linear-gradient(
    90deg, 
    rgba(var(--glow-pink-neon-rgb), 0) 0%, 
    rgba(var(--glow-pink-neon-rgb), 0.4) 25%, 
    rgba(var(--glow-pink-soft-rgb), 0.75) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.4) 75%, 
    rgba(var(--glow-pink-neon-rgb), 0) 100%
  ) !important;
  margin: 40px auto 44px auto !important;
}

/* ==========================================================================
   10. THE PATH OF THE CREATOR: MASTER COURSE & 4-STAGE ORBITAL SYSTEM
   ========================================================================== */

/* Unified Master Course Container */
#courseUnifiedBox,
.course-unified-container {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-radius: var(--container-border-radius, 4px 18px 18px 4px);
  padding: 38px 32px 38px 36px;
  margin-bottom: 28px;
  position: relative;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 4px solid #ffffff !important;
  border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, #ffffff 50%, #efedff 100%) 1 !important;
  overflow: hidden;
  /* Dual Corner Wash: Fixed-dimension boundaries (Locked heights prevent tall stretching) */
  background: 
    radial-gradient(
      ellipse min(520px, 75vw) 340px at 0% 100%,
      rgba(239, 237, 255, 0.16) 0%,
      rgba(239, 237, 255, 0.06) 42%,
      transparent 78%
    ),
    radial-gradient(
      ellipse min(540px, 75vw) 360px at 100% 0%,
      rgba(var(--glow-pink-soft-rgb), 0.18) 0%,
      rgba(var(--glow-pink-neon-rgb), 0.08) 45%,
      transparent 80%
    ),
    linear-gradient(90deg, 
      rgba(255, 255, 255, 0.04) 0%, 
      transparent 60%, 
      rgba(255, 255, 255, 0.015) 100%), 
    rgba(6, 2, 8, var(--container-darkness, 0.10)) !important;
  background-color: rgba(6, 2, 8, var(--container-darkness, 0.10)) !important;
  box-shadow:
    calc(-3px * var(--course-spine-glow, 0.5)) 0 calc(8px * var(--course-spine-glow, 0.5)) rgba(255, 255, 255, calc(0.48 * var(--course-spine-glow, 0.5))),
    calc(-8px * var(--course-spine-glow, 0.5)) 0 calc(22px * var(--course-spine-glow, 0.5)) -2px rgba(255, 240, 250, calc(0.35 * var(--course-spine-glow, 0.5))) !important;
  transition: box-shadow 0.15s ease-out, background 0.4s ease, background-color 0.4s ease;
}

#courseUnifiedBox::before {
  display: none !important;
}

#courseUnifiedBox > .course-part {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

#courseUnifiedBox p:not(.intro-greeting):not(.callout-box p) {
  max-width: 640px !important;
  text-align: center !important;
  letter-spacing: 0.2px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Celestial Aurora Divider (Reversed: Cyan -> Pink) */
.course-journey-divider {
  display: block;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(68, 238, 255, 0.35), rgba(248, 111, 180, 0.35), transparent);
  margin: 36px auto;
  width: 70%;
}

/* Membership Emblem */
.membership-emblem {
  filter: drop-shadow(0 0 10px rgba(var(--glow-pink-soft-rgb), 0.5));
  transition: filter 0.15s ease;
}

/* Pearl List Highlights */
.ul-opt-pearl li strong {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
}

/* 4-Stage Feature Enclosure Wrapper */
.stages-feature-enclosure {
  max-width: 740px;
  margin: 12px auto 16px auto;
  padding: 20px 24px 30px 32px;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  /* Dual Corner Wash: Bottom-Left Pearl | Top-Right Starlight Rose */
  background: 
    radial-gradient(
      ellipse 90% 50% at 0% 100%,
      rgba(239, 237, 255, 0.16) 0%,
      rgba(239, 237, 255, 0.06) 42%,
      transparent 78%
    ),
    radial-gradient(
      ellipse 95% 55% at 100% 0%,
      rgba(var(--glow-pink-soft-rgb), 0.18) 0%,
      rgba(var(--glow-pink-neon-rgb), 0.08) 45%,
      transparent 80%
    );
}

/* Left Spine Embracing Entire Section */
.stages-feature-enclosure::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 8px;
  left: 0;
  width: 1.5px;
  background: linear-gradient(
    180deg,
    rgba(var(--glow-pink-neon-rgb), 0) 0%,
    rgba(var(--glow-pink-neon-rgb), 0.35) 12%,
    rgba(var(--glow-pink-neon-rgb), 0.6) 45%,
    #ffffff 100%
  );
  -webkit-mask-image: linear-gradient(180deg, black 80%, rgba(0, 0, 0, 0.8) 92%, transparent 100%);
  mask-image: linear-gradient(180deg, black 80%, rgba(0, 0, 0, 0.8) 92%, transparent 100%);
  pointer-events: none;
}

/* Right Spine (Inversed Mirror) */
.stages-feature-enclosure::after {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 8px;
  right: 0;
  width: 1.5px;
  background: linear-gradient(
    0deg,
    rgba(var(--glow-pink-neon-rgb), 0) 0%,
    rgba(var(--glow-pink-neon-rgb), 0.35) 12%,
    rgba(var(--glow-pink-neon-rgb), 0.6) 45%,
    #ffffff 100%
  );
  -webkit-mask-image: linear-gradient(0deg, black 80%, rgba(0, 0, 0, 0.8) 92%, transparent 100%);
  mask-image: linear-gradient(0deg, black 80%, rgba(0, 0, 0, 0.8) 92%, transparent 100%);
  pointer-events: none;
}

/* Orbital Navigation Track Wrap */
.stage-tabs-track-wrap {
  position: relative;
  max-width: 580px;
  margin: 24px auto 26px auto;
  padding: 0 10px;
}

.stage-tabs-track-wrap::before {
  content: "";
  position: absolute;
  top: 19px;
  left: 103px;
  right: 103px;
  height: 1px;
  background: linear-gradient(
    90deg, 
    rgba(var(--glow-pink-neon-rgb), 0.2) 0%, 
    rgba(var(--glow-pink-soft-rgb), 0.7) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.2) 100%
  );
  box-shadow: 0 0 8px rgba(var(--glow-pink-neon-rgb), 0.4);
  z-index: 0;
}

.stage-tabs-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
  list-style: none;
  padding: 0;
  margin: 0;
}

.stage-tab-btn {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 6px;
  color: inherit;
  transform: none !important;
}

.stage-tab-btn .orbital-circle {
  width: 40px;
  height: 40px;
  box-sizing: border-box;
  border-radius: 50%;
  background: #09030e;
  border: 1.5px solid rgba(var(--glow-pink-neon-rgb), 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headings);
  font-size: 15.5px;
  font-weight: 600;
  color: #ffffff !important;
  position: relative;
  box-shadow: 
    0 0 8px rgba(0, 0, 0, 0.8),
    0 0 5px rgba(var(--glow-pink-neon-rgb), 0.2);
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
  transform: none;
}

.stage-tab-btn .orb-butterfly-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 0 3px rgba(var(--glow-pink-neon-rgb), 0.5));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.stage-tab-btn .orbital-title {
  font-family: var(--font-headings);
  font-size: 14.5px;
  font-weight: 500;
  color: rgba(var(--glow-pink-soft-rgb), 0.7);
  letter-spacing: 0.8px;
  white-space: nowrap;
  transform: none !important;
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.stage-tab-btn:hover .orbital-circle {
  border-color: #ffffff;
  color: #ffffff;
  box-shadow: 
    0 0 14px rgba(var(--glow-pink-neon-rgb), 0.75),
    0 0 8px rgba(255, 255, 255, 0.6),
    inset 0 0 8px rgba(var(--glow-pink-neon-rgb), 0.35);
}

.stage-tab-btn:hover .orb-butterfly-icon {
  transform: scale(1.12);
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75));
}

.stage-tab-btn:hover .orbital-title {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(var(--glow-pink-soft-rgb), 0.75);
}

.stage-tab-btn.active .orbital-circle {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #09030e !important;
  box-shadow: 
    0 0 0 2px rgba(var(--glow-pink-neon-rgb), 0.35),
    0 0 10px rgba(255, 255, 255, 0.75),
    0 0 14px rgba(var(--glow-pink-neon-rgb), 0.45) !important;
}

.stage-tab-btn.active .orb-butterfly-icon {
  filter: drop-shadow(0 0 1.5px rgba(9, 3, 14, 0.45)) contrast(1.05);
}

.stage-tab-btn.active .orbital-title {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(var(--glow-pink-soft-rgb), 0.95), 0 0 16px rgba(var(--glow-pink-neon-rgb), 0.4);
}

/* Curiosity Nudge: Pulse next unclicked stage */
.stage-tab-btn.active + .stage-tab-btn .orbital-circle {
  animation: nudgeOrbPulse 2.0s ease-in-out infinite;
}

.stage-tab-btn.active + .stage-tab-btn:hover .orbital-circle {
  animation: none;
}

@keyframes nudgeOrbPulse {
  0%, 100% {
    border-color: rgba(var(--glow-pink-neon-rgb), 0.45);
    transform: scale(1);
    box-shadow: 
      0 0 8px rgba(0, 0, 0, 0.8),
      0 0 5px rgba(var(--glow-pink-neon-rgb), 0.22);
  }
  50% {
    border-color: rgba(var(--glow-pink-neon-rgb), 0.85);
    transform: scale(1.035);
    box-shadow: 
      0 0 8px rgba(0, 0, 0, 0.85),
      0 0 12px rgba(var(--glow-pink-neon-rgb), 0.55),
      inset 0 0 5px rgba(var(--glow-pink-neon-rgb), 0.25);
  }
}

/* Stage Panels Viewport: Automatically locked to height of tallest panel (Zero Bobbing) */
.stage-tabs-viewport {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 1fr;
  align-items: stretch;
  position: relative;
  margin-top: 18px;
  min-height: 200px;
}

.stage-tab-panel {
  grid-area: 1 / 1 / 2 / 2;
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none !important;
}

.stage-tab-panel.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* 4 Stage Titles (.stage-boxless-title) */
.stage-boxless-title {
  font-family: var(--font-headings) !important;
  text-align: center !important;
  background: linear-gradient(to top, #ffffff 0%, var(--glow-pink-soft) 40%, var(--glow-pink-neon) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(var(--glow-pink-neon-rgb), 0.45)) !important;
  letter-spacing: 1px !important;
  font-size: 22px !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
  line-height: 1.3 !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}

.stage-boxless-title::before,
.stage-boxless-title::after {
  display: none !important;
}

/* Locked Description Footprint (Zero Bobbing on panel, fluid on paragraphs) */
.stage-boxless-unit p,
.stage-boxless-desc,
.stages-feature-enclosure .stage-tab-panel p {
  font-size: 15px !important;
  line-height: 1.65 !important;
  min-height: 0 !important;
  margin: 0 auto 14px auto !important;
  color: #f5ede8 !important;
  max-width: 620px !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.stage-lesson-count {
  font-family: var(--font-headings);
  color: #ff70b8 !important;
  text-shadow: 0 0 8px rgba(var(--glow-pink-neon-rgb), 0.45);
  font-size: 15px;
  font-style: italic;
  letter-spacing: 0.5px;
  margin-top: auto !important;
  padding-top: 14px !important;
  line-height: 1.2 !important;
  text-align: center;
}

.stage-click-hint {
  color: #f981c2;
  font-style: italic;
  letter-spacing: 0.3px;
  text-shadow: 0 0 8px rgba(var(--glow-pink-neon-rgb), 0.35);
}

/* Course Section Call-to-Action & Related Catalysts Ribbon */
.course-cta-title {
  font-size: 26px;
  font-weight: bold;
  color: var(--glow-pink-soft);
  text-shadow: 0 0 12px rgba(var(--glow-pink-neon-rgb), 0.6);
  margin-bottom: 14px;
  font-family: Garamond, serif;
  text-align: center;
}

.list-lead-in {
  text-align: center;
  margin-bottom: 14px;
}

.course-cta-button-wrapper {
  margin-top: 24px;
  text-align: center;
}



.btn-main {
  font-family: var(--font-headings);
  font-size: 18px;
  font-weight: bold;
  padding: 13px 36px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.25s ease;
  background: linear-gradient(135deg, #d47bad 0%, #a23b7a 100%);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 18px rgba(212, 123, 173, 0.45);
  display: inline-block;
}

.btn-main:hover {
  background: linear-gradient(135deg, #e094bf 0%, #b8438b 100%);
  box-shadow: 0 6px 24px rgba(var(--glow-pink-neon-rgb), 0.65);
  color: #ffffff;
}

/* Related Catalysts Ribbon (Between The Path & Course Section) */
.related-catalysts-ribbon {
  width: 96%;
  max-width: 860px;
  margin: 11px auto 32px auto;
  padding: 16px 8px;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-left: none;
  border-right: none;
  border-image: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 25%, 
    rgba(var(--glow-pink-soft-rgb), 0.75) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 75%, 
    transparent 100%
  ) 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Automatically hide the Related Catalysts Ribbon when all .rel-item links inside are commented out */
.related-catalysts-ribbon:not(:has(.rel-item)) {
  display: none !important;
}

.related-catalysts-ribbon .rel-title {
  font-family: var(--font-headings);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--glow-pink-soft);
  font-weight: bold;
  margin: 0;
}

.related-catalysts-ribbon .rel-links {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 55px;
  row-gap: 6px !important;
  flex-wrap: wrap;
  line-height: 1.35;
  width: 100%;
}

.related-catalysts-ribbon .rel-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}

.related-catalysts-ribbon .rel-star {
  position: absolute;
  right: calc(100% + 7px);
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff9cce;
  box-shadow: 0 0 6px rgba(255, 156, 206, 0.75);
  font-size: 0 !important;
  line-height: 0;
  vertical-align: middle;
  user-select: none;
  flex-shrink: 0;
  pointer-events: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.related-catalysts-ribbon .rel-item:hover .rel-star {
  transform: translateY(-50%) scale(1.3);
  box-shadow: 0 0 8px rgba(255, 156, 206, 1);
}

.related-catalysts-ribbon .rel-link {
  color: #ecbcd3 !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(255, 180, 247, 0.45) !important;
  text-underline-offset: 3px;
  font-family: var(--font-reading);
  font-weight: 500;
  transition: all 0.2s ease;
}

.related-catalysts-ribbon .rel-link:visited {
  color: #e5b0f5 !important;
}

.related-catalysts-ribbon .rel-link:hover {
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(255, 180, 247, 0.85);
  text-decoration-color: #ffffff !important;
}

/* ==========================================================================
   11. [JUMP-06] CATALYSTS DIRECTORY, SPECIAL BADGES & FILTER DROPDOWN
   ========================================================================== */
.single-filter-container {
  position: relative;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 6px auto 0px auto;
  text-align: center;
}

.single-filter-container + .course-journey-divider {
  margin: 5px auto 10px auto !important;
  width: 55%;
  max-width: 480px;
}

.filter-by-heading {
  font-family: var(--font-headings);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dimmed);
  margin-bottom: 6px;
  margin-top: -6px;
  text-align: center;
  font-weight: bold;
}

.single-filter-dropdown-wrap {
  position: relative;
  z-index: 1001;
  display: inline-block;
  min-width: 110px;
}

/* ==========================================================================
   11. [JUMP-06] DYNAMIC FILTER (TEXT & UNDERSCORE CATEGORY COLORS)
   ========================================================================== */

/* 1. Base Filter Trigger */
.single-filter-trigger {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  /*border-bottom: 2px solid #ffffff;*/
  outline: none;
  box-shadow: none;
  border-radius: 0;
  padding: 6px 16px;
  color: #ffffff;
  font-family: var(--font-headings);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.25s ease;
  min-width: 110px;
}

.single-filter-trigger:hover {
  filter: brightness(1.2);
}

.single-filter-trigger .arrow-indicator {
  font-size: 13px;
  transition: transform 0.25s ease, color 0.25s ease;
}

.single-filter-dropdown-wrap.open .single-filter-trigger .arrow-indicator {
  transform: rotate(180deg);
}

/* 2. DYNAMIC TRIGGER STYLES (Changes Button Text, Arrow & Underscore to Active Color) */

/* When 'ALL' is selected */
.single-filter-trigger[data-active-filter="all"],
.single-filter-dropdown-wrap[data-active-filter="all"] .single-filter-trigger {
  color: #ffffff;
  border-bottom-color: #ffffff;
  text-shadow: 
    0 0 2px #ffffff,
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(255, 173, 214, 0.5);
  filter: drop-shadow(0 0 3px rgba(var(--glow-pink-soft-rgb), 0.5));
}
.single-filter-trigger[data-active-filter="all"]:hover,
.single-filter-dropdown-wrap[data-active-filter="all"] .single-filter-trigger:hover {
  border-bottom-color: #ffffff;
  text-shadow: 
    0 0 3px #ffffff,
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 14px rgba(255, 173, 214, 0.6);
  filter: drop-shadow(0 0 4px rgba(var(--glow-pink-soft-rgb), 0.6));
}
.single-filter-trigger[data-active-filter="all"] .arrow-indicator,
.single-filter-dropdown-wrap[data-active-filter="all"] .single-filter-trigger .arrow-indicator {
  color: #ffffff;
}

/* When 'KNOWING' is selected */
.single-filter-trigger[data-active-filter="knowing"],
.single-filter-dropdown-wrap[data-active-filter="knowing"] .single-filter-trigger {
  color: #7dd3fc;
  border-bottom-color: #7dd3fc;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.75);
}
.single-filter-trigger[data-active-filter="knowing"] .arrow-indicator,
.single-filter-dropdown-wrap[data-active-filter="knowing"] .single-filter-trigger .arrow-indicator {
  color: #7dd3fc;
}

/* When 'SUFFERING' is selected */
.single-filter-trigger[data-active-filter="suffering"],
.single-filter-dropdown-wrap[data-active-filter="suffering"] .single-filter-trigger {
  color: #ee9dd6;
  border-bottom-color: #ee9dd6;
  text-shadow: 0 0 10px rgba(238, 157, 214, 0.75);
}
.single-filter-dropdown-wrap[data-active-filter="suffering"] .arrow-indicator,
.single-filter-dropdown-wrap[data-active-filter="suffering"] .single-filter-trigger .arrow-indicator {
  color: #ee9dd6;
}

/* When 'SEARCH' is selected */
.single-filter-trigger[data-active-filter="search"],
.single-filter-dropdown-wrap[data-active-filter="search"] .single-filter-trigger {
  color: #ffffff;
  border-bottom-color: #ffffff;
  text-shadow: 
    0 0 2px #ffffff,
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(125, 211, 252, 0.5);
  filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.4));
}
.single-filter-dropdown-wrap[data-active-filter="search"] .arrow-indicator,
.single-filter-dropdown-wrap[data-active-filter="search"] .single-filter-trigger .arrow-indicator {
  color: #ffffff;
}

/* Borderless filter search input in trigger */
.single-filter-trigger .filter-search-input {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: #ffffff;
  font-family: var(--font-headings);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 1.5px;
  width: 140px;
  max-width: 160px;
  text-align: center;
  padding: 0;
  margin: 0;
  caret-color: #7dd3fc;
  text-transform: capitalize;
  -webkit-appearance: none;
  appearance: none;
}

.single-filter-trigger .filter-search-input::placeholder {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  letter-spacing: 1.2px;
}

/* 3. Popover Panel */
.single-filter-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(10, 4, 16, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 6px;
  min-width: 140px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 255, 255, 0.08);
  display: none;
  z-index: 1002;
}

.single-filter-dropdown-wrap.open .single-filter-popover {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 4. Dropdown Options: Base Layout & Permanent Category Colors */
.single-filter-popover .dropdown-option {
  background: transparent;
  border: none;
  border-radius: 4px;
  padding: 8px 14px;
  text-align: center;
  font-family: var(--font-headings);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: none;
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  transition: opacity 0.2s ease, text-shadow 0.2s ease, filter 0.2s ease;
}

/* Default Colors when popover opens (Knowing in Azure/Blue, Suffering in Orchid/Pink) */
.single-filter-popover .dropdown-option[data-filter="all"] {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

.single-filter-popover .dropdown-option[data-filter="knowing"] {
  color: #7dd3fc;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}

.single-filter-popover .dropdown-option[data-filter="suffering"] {
  color: #ee9dd6;
  text-shadow: 0 0 8px rgba(238, 157, 214, 0.5);
}

.single-filter-popover .dropdown-option[data-filter="search"] {
  color: #fff;
  text-shadow: 0 0 8px rgba(203, 213, 225, 0.4);
}

/* 5. Dropdown Options: Hover Highlight ONLY
   Unless the cursor is pointing directly at a word, no underline is shown
   (eliminates any bouncing back to the current active filter). */
.single-filter-popover .dropdown-option:hover {
  font-weight: 700;
  text-decoration: underline;
  filter: brightness(1.25);
}

/* Hover 'All' (EM Dash): No Underline & Subtle Glow */
.single-filter-popover .dropdown-option[data-filter="all"]:hover {
  text-decoration: none;
  color: #ffffff;
  text-shadow: 
    0 0 3px #ffffff,
    0 0 8px rgba(255, 255, 255, 0.85),
    0 0 14px rgba(255, 173, 214, 0.6);
  filter: drop-shadow(0 0 4px rgba(var(--glow-pink-soft-rgb), 0.6));
}

/* Active 'All' (EM Dash): No Underline & Subtle Glow */
.single-filter-popover .dropdown-option.active[data-filter="all"] {
  text-decoration: none;
  color: #ffffff;
  text-shadow: 
    0 0 2px #ffffff,
    0 0 6px rgba(255, 255, 255, 0.8),
    0 0 12px rgba(255, 173, 214, 0.5);
  filter: drop-shadow(0 0 3px rgba(var(--glow-pink-soft-rgb), 0.5));
}

/* Hover 'Knowing': Azure Underline & Radiant Glow */
.single-filter-popover .dropdown-option[data-filter="knowing"]:hover {
  text-decoration-color: #7dd3fc;
  text-shadow: 
    0 0 8px rgba(125, 211, 252, 0.95),
    0 0 18px rgba(56, 189, 248, 0.65);
}

/* Hover 'Suffering': Orchid Underline & Radiant Glow */
.single-filter-popover .dropdown-option[data-filter="suffering"]:hover {
  text-decoration-color: #ee9dd6;
  text-shadow: 
    0 0 8px rgba(238, 157, 214, 0.95),
    0 0 18px rgba(212, 123, 173, 0.65);
}

/* Hover 'Search' (Magnifying Glass Icon): No Underline & Radiant Celestial Glow */
.single-filter-popover .dropdown-option[data-filter="search"] {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #cbd5e1;
  text-decoration: none;
  padding: 8px 14px;
}

.single-filter-popover .dropdown-option[data-filter="search"] .search-glass-icon {
  display: block;
  stroke: currentColor;
  pointer-events: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.single-filter-popover .dropdown-option[data-filter="search"]:hover,
.single-filter-popover .dropdown-option.active[data-filter="search"] {
  text-decoration: none;
  color: #ffffff;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 10px rgba(125, 211, 252, 0.6));
}

.single-filter-popover .dropdown-option[data-filter="search"]:hover .search-glass-icon {
  transform: scale(1.15);
}

/* Directory List & Clean Left-Border Rows */
.directory-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
}

.catalysts-borderless .directory-item,
.directory-list .directory-item {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-left: 3px solid rgba(212, 123, 173, 0.55);
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  padding: 12px 14px 12px 16px;
  margin-bottom: 8px;
  text-align: left;
  transition: border-color 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.catalysts-borderless .directory-item:last-child,
.directory-list .directory-item:last-child {
  margin-bottom: 0;
}

/* Directory List: Direct Title Link Underline on Hover */
.catalysts-borderless .directory-item:hover,
.directory-list .directory-item:hover {
  border-left: 3px solid var(--glow-pink-neon);
  background: transparent;
}

/* Touch & Click Feedback: Immediate Glow Sheen & Inward Spine Illumination on Press */
.catalysts-borderless .directory-item:active,
.directory-list .directory-item:active {
  background: rgba(255, 255, 255, 0.05);
  border-left-color: #ffffff;
  box-shadow: 
    inset 3px 0 8px rgba(255, 255, 255, 0.35),
    inset 6px 0 16px -2px rgba(var(--glow-pink-neon-rgb), 0.30);
  transition-duration: 0.06s;
}

.catalysts-borderless .directory-item.catalyst-knowing:active,
.directory-list .directory-item.catalyst-knowing:active {
  background: rgba(125, 211, 252, 0.07);
  border-left-color: #bae6fd;
  box-shadow: 
    inset 3px 0 8px rgba(255, 255, 255, 0.35),
    inset 6px 0 16px -2px rgba(125, 211, 252, 0.40);
}

/* Lesson Sample: Pure Celestial White Touch / Click Illumination */
.catalysts-borderless .directory-item.catalyst-special-audio:active,
.directory-list .directory-item.catalyst-special-audio:active,
.catalysts-borderless .directory-item.pin1:active,
.directory-list .directory-item.pin1:active,
.catalysts-borderless .directory-item.catalyst-lesson:active,
.directory-list .directory-item.catalyst-lesson:active {
  background: rgba(255, 255, 255, 0.08) !important;
  border-left-color: #ffffff !important;
  box-shadow: 
    inset 3px 0 8px rgba(255, 255, 255, 0.55),
    inset 6px 0 18px -2px rgba(255, 255, 255, 0.35) !important;
}

.catalysts-borderless .directory-item.catalyst-suffering:active,
.directory-list .directory-item.catalyst-suffering:active {
  background: rgba(238, 157, 214, 0.07);
  border-left-color: #f5c2e7;
  box-shadow: 
    inset 3px 0 8px rgba(255, 255, 255, 0.35),
    inset 6px 0 16px -2px rgba(238, 157, 214, 0.40);
}

.catalysts-borderless .directory-item.catalyst-news:active,
.directory-list .directory-item.catalyst-news:active,
.catalysts-borderless .directory-item.catalyst-special-updated:active,
.directory-list .directory-item.catalyst-special-updated:active {
  background: rgba(251, 191, 36, 0.07);
  border-left-color: #fde68a !important;
  box-shadow: 
    inset 3px 0 8px rgba(255, 255, 255, 0.35),
    inset 6px 0 16px -2px rgba(251, 191, 36, 0.40);
}

.catalysts-borderless .directory-item:active a.directory-title::after,
.directory-list .directory-item:active a.directory-title::after {
  width: 100%;
}

.directory-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.directory-title,
.directory-item .directory-title,
.catalysts-borderless .directory-item .directory-title,
.catalysts-borderless .directory-item a.directory-title {
  position: relative;
  display: inline-block;
  font-family: var(--font-headings);
  color: #ffffff;
  font-weight: 800;
  font-size: 22px;
  text-decoration: none;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.9), 0 0 20px rgba(var(--glow-pink-neon-rgb), 0.5);
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.directory-item a.directory-title::after,
.catalysts-borderless .directory-item a.directory-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #ffffff 0%, var(--glow-pink-neon) 60%, rgba(var(--glow-pink-neon-rgb), 0.4) 100%);
  box-shadow: 0 0 4px rgba(var(--glow-pink-neon-rgb), 0.25);
  transition: width 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.directory-item:hover a.directory-title::after,
.catalysts-borderless .directory-item:hover a.directory-title::after {
  width: 100%;
}

.catalysts-borderless .directory-item:hover .directory-title,
.directory-list .directory-item:hover .directory-title {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(var(--glow-pink-neon-rgb), 0.25);
}

.directory-subtitle {
  font-size: 13.5px;
  font-style: italic;
  color: rgba(var(--glow-pink-soft-rgb), 0.65);
  transition: opacity 0.25s ease;
}

.directory-date {
  font-family: var(--font-headings);
  font-size: 14.5px;
  color: var(--text-dimmed);
  white-space: nowrap;
  letter-spacing: 0.5px;
  min-width: 72px;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.catalysts-borderless .directory-item:hover .directory-date,
.directory-list .directory-item:hover .directory-date {
  color: var(--glow-pink-soft) !important;
  text-shadow: 0 0 5px rgba(var(--glow-pink-neon-rgb), 0.2) !important;
}

/* Special Catalyst Styles & Badges (Video, Audio, Sample, News, Updated) */
.catalyst-special-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-reading, 'Merriweather', Garamond, serif);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 2.5px 9px;
  border-radius: 6px;
  margin-left: 10px;
  vertical-align: middle;
  line-height: 1.2;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Right-Side Badges (placed in the date column slot, centered horizontally on date width & vertically with title/subtitle) */
.catalyst-special-tag.tag-right {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 72px !important;
  min-width: 72px !important;
  box-sizing: border-box !important;
  justify-content: center !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

/* Optional wrapper for right-aligned badge slot */
.directory-badge-col {
  display: inline-flex !important;
  align-items: center;
  justify-content: center !important;
  width: 72px !important;
  min-width: 72px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}
.directory-badge-col .catalyst-special-tag {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.directory-item:hover .catalyst-special-tag {
  transform: scale(1.05);
}

.directory-item.catalyst-knowing { border-left: 3px solid #7dd3fc; }
.directory-item.catalyst-knowing:hover { border-left: 3px solid #bae6fd; }
.directory-item.catalyst-knowing a.directory-title::after {
  background: linear-gradient(90deg, #ffffff 0%, #7dd3fc 60%, rgba(125, 211, 252, 0.4) 100%);
  box-shadow: 0 0 4px rgba(125, 211, 252, 0.25);
}
.directory-item.catalyst-knowing .directory-title,
.directory-item.catalyst-knowing a.directory-title {
  color: #7dd3fc;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5);
}
.directory-item.catalyst-knowing:hover .directory-title,
.directory-item.catalyst-knowing:hover a.directory-title {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.5);
}
.catalyst-special-tag.tag-video, .catalyst-badge-video {
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.45);
  box-shadow: 0 0 8px rgba(56, 189, 248, 0.25);
}

/* 1. Pure White Left Border with Soft White Back-Glow */
.directory-item.catalyst-special-audio { 
  border-left: 3px solid #ffffff; 
  
}

.directory-item.catalyst-special-audio:hover { 
  border-left: 3px solid #ffffff; 
 
}

/* 2. White Sliding Underline with Delicate Halo */
.directory-item.catalyst-special-audio a.directory-title::after {
  background: linear-gradient(90deg, #ffffff 0%, #ffffff 70%, rgba(255, 255, 255, 0.4) 100%);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.25);
}

/* 3. Subtle Starlight White Text Glow */
.directory-item.catalyst-special-audio .directory-title,
.directory-item.catalyst-special-audio a.directory-title {
  color: #ffffff;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.55), 0 0 20px rgba(255, 255, 255, 0.25);
}

.directory-item.catalyst-special-audio:hover .directory-title,
.directory-item.catalyst-special-audio:hover a.directory-title {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.catalyst-special-tag.tag-audio, .catalyst-badge-audio,
.catalyst-special-tag.tag-sample, .catalyst-badge-sample {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.3) !important;
}

.directory-item:hover .catalyst-special-tag.tag-audio,
.directory-item:hover .catalyst-special-tag.tag-sample {
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.5) !important;
}

.directory-item.catalyst-suffering { border-left: 3px solid #ee9dd6; }
.directory-item.catalyst-suffering:hover { border-left: 3px solid #f5c2e7; }
.directory-item.catalyst-suffering a.directory-title::after {
  background: linear-gradient(90deg, #ffffff 0%, #ee9dd6 60%, rgba(238, 157, 214, 0.4) 100%);
  box-shadow: 0 0 4px rgba(238, 157, 214, 0.25);
}
.directory-item.catalyst-suffering .directory-title,
.directory-item.catalyst-suffering a.directory-title {
  color: #ee9dd6;
  text-shadow: 0 0 8px rgba(238, 157, 214, 0.5);
}
.directory-item.catalyst-suffering:hover .directory-title,
.directory-item.catalyst-suffering:hover a.directory-title {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(238, 157, 214, 0.5);
}

/* News Badges: Rose Variant & Starlight Gold Variant */
.catalyst-special-tag.tag-news, 
.catalyst-badge-news,
.catalyst-special-tag.tag-news-rose {
  color: #fda4af !important;
  background: rgba(244, 63, 94, 0.12) !important;
  border: 1px solid rgba(244, 63, 94, 0.45) !important;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.25) !important;
}
.directory-item:hover .catalyst-special-tag.tag-news,
.directory-item:hover .catalyst-special-tag.tag-news-rose {
  border-color: rgba(244, 63, 94, 0.75) !important;
  box-shadow: 0 0 14px rgba(244, 63, 94, 0.45) !important;
}

.catalyst-special-tag.tag-news-gold,
.catalyst-special-tag.tag-news-amber,
.catalyst-badge-news-gold {
  color: #fde68a !important;
  background: rgba(251, 191, 36, 0.12) !important;
  border: 1px solid rgba(251, 191, 36, 0.45) !important;
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25) !important;
}
.directory-item:hover .catalyst-special-tag.tag-news-gold,
.directory-item:hover .catalyst-special-tag.tag-news-amber,
.directory-item:hover .catalyst-badge-news-gold {
  border-color: rgba(251, 191, 36, 0.75) !important;
  box-shadow: 0 0 14px rgba(251, 191, 36, 0.45) !important;
}

.directory-item.catalyst-special-updated { border-left: 3px solid #fbbf24 !important; }
.directory-item.catalyst-special-updated:hover { border-left: 3px solid #fde68a !important; }
.directory-item.catalyst-special-updated a.directory-title::after {
  background: linear-gradient(90deg, #ffffff 0%, #fbbf24 60%, rgba(251, 191, 36, 0.4) 100%);
  box-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}
.directory-item.catalyst-special-updated .directory-title,
.directory-item.catalyst-special-updated a.directory-title {
  color: #fbbf24 !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.45) !important;
}
.directory-item.catalyst-special-updated:hover .directory-title,
.directory-item.catalyst-special-updated:hover a.directory-title {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.25) !important;
}
.catalyst-special-tag.tag-updated, .catalyst-badge-updated {
  color: #fde68a;
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.45);
  box-shadow: 0 0 8px rgba(251, 191, 36, 0.25);
}



/* ==========================================================================
   DIRECTORY PAGINATION (SPINE DIVIDERS + CELESTIAL OVERLINE)
   ========================================================================== */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px auto 22px auto;
  font-family: var(--font-headings);
  user-select: none;
  position: relative;
  z-index: 10;
}

/* Page Numbers & "All" Button (Matches .site-nav-primary) */
.pagination-container .page-btn {
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-headings);
  font-size: 17px;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.82);
  padding: 6px 12px 2px 12px;
  letter-spacing: 1.5px;
  line-height: 1.1;
  transition: all 0.25s ease;
}

/* Vertical Spine Dividers ( | ) */
.pagination-container .page-btn:not(:last-child)::before {
  content: "|";
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.25);
  font-weight: 300;
  font-size: 13px;
  pointer-events: none;
  transition: color 0.25s ease;
}

.pagination-container[data-active-filter="knowing"] .page-btn:not(:last-child)::before {
  color: rgba(125, 211, 252, 0.35);
}
.pagination-container[data-active-filter="suffering"] .page-btn:not(:last-child)::before {
  color: rgba(238, 157, 214, 0.35);
}

/* Top Overline Filament (Snug & Centered on Numbers) */
.pagination-container .page-btn::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 50%;
  width: 0%;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.5), 0 0 12px rgba(255, 255, 255, 0.3);
  transition: width 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), left 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease, background 0.25s ease, box-shadow 0.25s ease;
  opacity: 0;
  pointer-events: none;
}

/* Hover State - Default / Unfiltered (Em-Dash) */
.pagination-container .page-btn:hover,
.pagination-container[data-active-filter="all"] .page-btn:hover {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.85);
}
.pagination-container .page-btn:hover::after,
.pagination-container[data-active-filter="all"] .page-btn:hover::after {
  width: 45%;
  left: 27.5%;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
}

/* Hover State - Knowing */
.pagination-container[data-active-filter="knowing"] .page-btn:hover {
  color: #bae6fd !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.65);
}
.pagination-container[data-active-filter="knowing"] .page-btn:hover::after {
  width: 45%;
  left: 27.5%;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, #7dd3fc, transparent);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

/* Hover State - Suffering */
.pagination-container[data-active-filter="suffering"] .page-btn:hover {
  color: #fbdceb !important;
  text-shadow: 0 0 8px rgba(238, 157, 214, 0.65);
}
.pagination-container[data-active-filter="suffering"] .page-btn:hover::after {
  width: 45%;
  left: 27.5%;
  opacity: 0.9;
  background: linear-gradient(90deg, transparent, #ee9dd6, transparent);
  box-shadow: 0 0 6px rgba(238, 157, 214, 0.6);
}

/* Active State - Unfiltered / Em-Dash (Luminous Celestial White) */
.pagination-container .page-btn.active,
.pagination-container[data-active-filter="all"] .page-btn.active {
  color: #ffffff !important;
  text-shadow: 
    0 0 2px #ffffff,
    0 0 6px rgba(255, 255, 255, 0.85),
    0 0 14px rgba(255, 255, 255, 0.45);
}
.pagination-container .page-btn.active::after,
.pagination-container[data-active-filter="all"] .page-btn.active::after {
  width: 55%;
  left: 22.5%;
  opacity: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #ffffff, transparent);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.8), 0 0 12px rgba(255, 255, 255, 0.5);
}

/* Active State - Knowing (Celestial Cyan) */
.pagination-container[data-active-filter="knowing"] .page-btn.active {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.75), 0 0 14px rgba(56, 189, 248, 0.45);
}
.pagination-container[data-active-filter="knowing"] .page-btn.active::after {
  width: 55%;
  left: 22.5%;
  opacity: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #7dd3fc, transparent);
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.7), 0 0 12px rgba(56, 189, 248, 0.45);
}

/* Active State - Suffering (Luminous Rose / Pink) */
.pagination-container[data-active-filter="suffering"] .page-btn.active {
  color: #ee9dd6 !important;
  text-shadow: 0 0 8px rgba(238, 157, 214, 0.75), 0 0 14px rgba(238, 157, 214, 0.45);
}
.pagination-container[data-active-filter="suffering"] .page-btn.active::after {
  width: 55%;
  left: 22.5%;
  opacity: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, #ee9dd6, transparent);
  box-shadow: 0 0 6px rgba(238, 157, 214, 0.7), 0 0 12px rgba(238, 157, 214, 0.45);
}

/* Active State on Hover */
.pagination-container .page-btn.active:hover::after {
  filter: brightness(1.2);
}

/* News Directory Item: Starlight Gold/Yellow Theme in style of knowing/suffering */
.directory-item.catalyst-news { border-left: 3px solid #fbbf24 !important; }
.directory-item.catalyst-news:hover { border-left: 3px solid #fde68a !important; }
.directory-item.catalyst-news a.directory-title::after {
  background: linear-gradient(90deg, #ffffff 0%, #fbbf24 60%, rgba(251, 191, 36, 0.4) 100%) !important;
  box-shadow: 0 0 4px rgba(251, 191, 36, 0.25) !important;
}
.directory-item.catalyst-news .directory-title,
.directory-item.catalyst-news a.directory-title {
  color: #fde68a !important;
  text-shadow: 0 0 10px rgba(251, 191, 36, 0.45) !important;
}
.directory-item.catalyst-news:hover .directory-title,
.directory-item.catalyst-news:hover a.directory-title {
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(251, 191, 36, 0.25) !important;
}

/* Badge Visibility Controllers */
.hide-all-badges .catalyst-special-tag,
.hide-badges .catalyst-special-tag { display: none !important; }
.hide-video-badges .tag-video     { display: none !important; }
.hide-audio-badges .tag-audio     { display: none !important; }
.hide-sample-badges .tag-sample,
.hide-sample-badges .tag-audio    { display: none !important; }
.hide-news-badges .tag-news,
.hide-news-badges .tag-news-gold,
.hide-news-badges .tag-news-rose  { display: none !important; }
.hide-updated-badges .tag-updated { display: none !important; }

/* ==========================================================================
   12. [JUMP-07] LATEST NEWS CARD (.directory-news-item & .latest-news-card)
   ========================================================================== */
.directory-news-item,
.latest-news-card {
  cursor: default !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 20px 42px !important;
  background: transparent !important;
  margin: 0 auto 14px auto;
  transition: all 0.25s ease;
  max-width: 760px;
}

.directory-news-item.news-permanent-highlight {
  background: rgba(var(--glow-pink-soft-rgb), 0.04) !important;
  border-left: 2px solid rgba(var(--glow-pink-soft-rgb), 0.85) !important;
  border-right: 2px solid rgba(var(--glow-pink-soft-rgb), 0.85) !important;
  box-shadow: 0 0 16px rgba(var(--glow-pink-neon-rgb), 0.2), inset 0 0 20px rgba(var(--glow-pink-soft-rgb), 0.03) !important;
  padding: 13px 18px !important;
  margin: 0 auto 6px auto;
  transition: none !important;
}

.directory-news-item.news-border-groove {
  border-left: 3px groove rgba(var(--glow-pink-soft-rgb), 0.7) !important;
  border-right: 3px groove rgba(var(--glow-pink-soft-rgb), 0.7) !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.latest-news-card .directory-title,
#newsArticleItem .directory-title,
.directory-news-item .directory-title {
  text-shadow: none !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 19px !important;
  letter-spacing: 0.3px;
  display: inline-block;
  text-align: center;
}

.latest-news-card .directory-subtitle,
#newsArticleItem .directory-subtitle,
.directory-news-item .directory-subtitle,
.directory-news-item p {
  color: #ffffff !important;
  opacity: 0.95 !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  text-shadow: none !important;
  display: block;
  text-align: center;
  margin-top: 6px;
  padding: 0 18px;
}

/* ==========================================================================
   13. [JUMP-08] CELESTIAL BACKGROUND LAYERS (Sunspots / Bubbles & Stars)
   ==========================================================================
   All Stars Veil coordinates, Celestial Sunspots coordinates, Footer Bubbles,
   and Parallax Carriers are maintained in "cosmos.css" to protect coordinate
   arrays from refactoring and AI simplification.
   "cosmos.css" is loaded automatically via @import url("cosmos.css") at line 1.
   ========================================================================== */

/* ==========================================================================
   14. REUSABLE SITE-WIDE COMPONENTS & MODULAR MASTER FOOTER
   ========================================================================== */
.infinity-divider-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 32px auto;
  line-height: 1;
}

.infinity-divider-icon {
  display: inline-block;
  opacity: 0.85;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.65));
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.infinity-divider-wrap:hover .infinity-divider-icon {
  opacity: 1;
  transform: scale(1.1);
  filter: drop-shadow(0 0 14px rgba(var(--glow-pink-neon-rgb), 0.8));
}

/* Single Starlight Divider Line (Single variant of Related Catalysts Ribbon gradient border) */
.footer-divider-line {
  width: 96%;
  max-width: 860px;
  margin: 20px auto 26px auto;
  height: 1px;
  border: none;
  background: linear-gradient(
    90deg, 
    transparent 0%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 25%, 
    rgba(var(--glow-pink-soft-rgb), 0.75) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 75%, 
    transparent 100%
  );
}

.callout-box {
  background: rgba(14, 6, 20, 0.65);
  border-top: 2px solid var(--glow-pink-neon);
  border-bottom: 2px solid var(--glow-pink-neon);
  border-radius: 8px;
  padding: 18px 24px;
  margin: 22px auto;
  max-width: 680px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.callout-box p {
  font-size: 16px;
  font-style: italic;
  margin: 0;
  color: var(--glow-pink-soft);
  text-align: center;
}

.callout-box2 {
  background: rgba(18, 5, 24, 0.55);
  border: 1px solid rgba(212, 123, 173, 0.4);
  border-radius: 12px;
/*  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);*/
  padding: 22px 28px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(212, 123, 173, 0.08);
  margin: 24px auto;
  max-width: 600px;
  text-align: center;
}

.void-dimension-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 10px auto 20px auto;
}

.void-dimension-tag span {
  font-family: var(--font-telemetry, 'Space Mono', monospace);
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #f472b6;
}

.void-dimension-tag img {
  filter: invert(1) drop-shadow(0 0 8px rgba(var(--glow-pink-neon-rgb), 0.85));
}




/* Modular Site Footer (Far Left Privacy, Far Right Contact, Centered Copyright) */
.site-master-footer,
footer.footer-wheels {
  width: 96% !important;
  max-width: 860px !important;
  margin: 6px auto 38px auto !important;
  padding: 0 4px !important;
  position: relative !important;
  z-index: 2 !important;
  box-sizing: border-box !important;
  display: block !important;
  text-align: center;
}

/* Note: Desktop Finale Bubbles (Phases 3 & 4) are maintained in cosmos.css */


.footer-links-row,
.footer-links-cluster {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  flex-wrap: wrap;
}

.footer-wheel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  gap: 10px;
  font-family: var(--font-headings);
  font-size: 16px;
  font-weight: bold;
  color: #ffffff;
  text-decoration: none;
  transition: filter 0.25s ease;
}

.footer-wheel span {
  color: var(--glow-pink-soft);
  letter-spacing: 0.5px;
}

.footer-wheel:hover,
.footer-wheel:hover span {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.9);
}

/* Celestial Twinkles for Center News Wheel (✧ News ✧) */
:is(.footer-wheel[href*="news"], .footer-wheel.news)::before,
:is(.footer-wheel[href*="news"], .footer-wheel.news)::after {
  content: "✧";
  font-family: var(--font-headings), serif;
  font-size: 13px;
  color: #ff9cce !important;
  opacity: 1 !important;
  transition: transform 0.25s ease, opacity 0.25s ease, text-shadow 0.25s ease;
  line-height: 1;
  display: inline-block;
}

:is(.footer-wheel[href*="news"], .footer-wheel.news):hover::before {
  opacity: 1;
  transform: scale(1.25) rotate(-10deg);
  text-shadow: 0 0 10px rgba(255, 156, 206, 0.95);
}

:is(.footer-wheel[href*="news"], .footer-wheel.news):hover::after {
  opacity: 1;
  transform: scale(1.25) rotate(10deg);
  text-shadow: 0 0 10px rgba(255, 156, 206, 0.95);
}

.footer-sprite {
  background-image: url(../_images/othersprites.png);
  display: inline-block;
  height: 40px;
  width: 40px;
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 8px rgba(212, 123, 173, 0.6));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.footer-sprite:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 16px rgba(var(--glow-pink-neon-rgb), 0.95));
}

.footer-sprite.privacy       { background-position: top; }
.footer-sprite.privacy:hover { background-position: bottom; }
.footer-sprite.mail          { background-position: left top; }
.footer-sprite.mail:hover    { background-position: left bottom; }

.footer-copyright-wrap,
.footer-copyright-cluster,
.footer-center-gap {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin: 22px auto 0 auto !important;
  padding: 0 !important;
  clear: both !important;
}

.footer-copyright-wrap .copyright-text,
.footer-copyright-cluster .copyright-text,
.copyright-text {
  display: block !important;
  text-align: center !important;
  margin: 0 auto !important;
  width: 100% !important;
  font-family: var(--font-headings), serif !important;
  font-size: 13.5px !important;
  color: var(--text-dimmed) !important;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
  padding-top: 11px;
}

.copyright-text a {
  color: var(--glow-pink-soft);
  text-decoration: none;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.copyright-text a:hover {
  color: #fff;
  text-shadow: 0 0 8px rgba(var(--glow-pink-neon-rgb), 0.8);
}

/* ==========================================================================
   15. [JUMP-09] UNIVERSAL CONTENT LISTS (UL & OL)
   ========================================================================== */
.article-reading-container ul:not(.directory-list):not(.site-nav-primary):not(.catalyst),
.article-reading-container ol:not(.directory-list),
.Rootbox ul:not(.directory-list):not(.site-nav-primary):not(.catalyst),
.Rootbox ol:not(.directory-list),
.glass-panel ul:not(.directory-list):not(.site-nav-primary):not(.catalyst),
.glass-panel ol:not(.directory-list) {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--text-reading);
  max-width: 600px;
  margin: 0 auto 18px auto;
  padding-left: 0 !important;
  text-align: left;
}

/* Content Lists inside standard Reading Containers: strictly flush with 600px paragraph lane */
.article-reading-container ul:not(.directory-list):not(.site-nav-primary):not(.catalyst),
.catalyst-article ul:not(.directory-list):not(.site-nav-primary):not(.catalyst),
.article-reading-container ol:not(.directory-list),
.catalyst-article ol:not(.directory-list) {
  max-width: 600px;
  box-sizing: border-box;
  padding-left: 0 !important;
  list-style: none !important;
}

.article-reading-container ul:not(.directory-list):not(.site-nav-primary):not(.catalyst) li,
.catalyst-article ul:not(.directory-list):not(.site-nav-primary):not(.catalyst) li,
.Rootbox ul:not(.directory-list):not(.site-nav-primary):not(.catalyst) li,
.glass-panel ul:not(.directory-list):not(.site-nav-primary):not(.catalyst) li {
  margin-bottom: 12px;
  position: relative;
}

/* Universal Content Lists: Remove default bullets and numbers from lists in article containers */
.article-reading-container :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst),
.catalyst-article :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst),
.Rootbox :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst),
.glass-panel :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst) {
  list-style: none !important;
}

.article-reading-container :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst) > li,
.catalyst-article :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst) > li,
.Rootbox :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst) > li,
.glass-panel :is(ol, ul):not(.directory-list):not(.site-nav-primary):not(.catalyst) > li {
  list-style: none !important;
  font-size: 16.5px;
  line-height: 1.85;
  margin-bottom: 12px;
  position: relative;
}

/* ==========================================================================
   ARTICLE LIST MARKERS: .stars, .numbers, .bullets (Works on both <ol> and <ul>)
   ========================================================================== */

/* 1. <ol class="stars"> or <ul class="stars"> (✦ Starlight Four-Pointed Star) */
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.stars, .star, .ol-opt-stars, .ul-opt-stars) {
  list-style: none !important;
  padding-left: 0 !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.stars, .star, .ol-opt-stars, .ul-opt-stars) > li {
  position: relative !important;
  list-style: none !important;
  padding-left: 28px !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.stars, .star, .ol-opt-stars, .ul-opt-stars) > li::before {
  content: "✦";
  position: absolute;
  left: 2px;
  top: -1px;
  color: var(--glow-pink-neon, #ff70b8);
  font-size: 14px;
  line-height: 1.85;
  text-shadow: 0 0 6px rgba(var(--glow-pink-neon-rgb, 255, 112, 184), 0.8), 0 0 12px rgba(var(--glow-pink-neon-rgb, 255, 112, 184), 0.4);
}

/* Classic Five-Pointed Star variant: <ol class="stars-5"> or <ol class="classic-stars"> */
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.stars-5, .star-5, .stars5, .classic-stars) > li::before {
  content: "★";
  font-size: 13px;
  top: -2px;
}

/* 2. <ol class="numbers"> or <ul class="numbers"> (Glowing Starlight Numbers: 1. 2. 3.) */
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.numbers, .number, .ol-opt-numbers) {
  list-style: none !important;
  counter-reset: ol-num-counter !important;
  padding-left: 0 !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.numbers, .number, .ol-opt-numbers) > li {
  position: relative !important;
  list-style: none !important;
  counter-increment: ol-num-counter !important;
  padding-left: 32px !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.numbers, .number, .ol-opt-numbers) > li::before {
  content: counter(ol-num-counter) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-headings, 'Merriweather', serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--glow-pink-neon, #ff70b8);
  text-shadow: 0 0 6px rgba(var(--glow-pink-neon-rgb, 255, 112, 184), 0.5);
}

/* 3. <ol class="bullets"> or <ul class="bullets"> (• Luminous Starlight Bullets) */
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.bullets, .bullet, .ol-opt-bullets, .ul-opt-bullets) {
  list-style: none !important;
  padding-left: 0 !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.bullets, .bullet, .ol-opt-bullets, .ul-opt-bullets) > li {
  position: relative !important;
  list-style: none !important;
  padding-left: 26px !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.bullets, .bullet, .ol-opt-bullets, .ul-opt-bullets) > li::before {
  content: "•";
  position: absolute;
  left: 3px;
  top: -1px;
  color: var(--glow-pink-neon, #ff70b8);
  font-size: 18px;
  line-height: 1.6;
  text-shadow: 0 0 8px rgba(var(--glow-pink-neon-rgb, 255, 112, 184), 0.6);
}

/* 4. Additional List Styles from Options: Roman, Bracket, Badge */
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.roman, .ol-opt-roman) {
  list-style: none !important;
  counter-reset: ol-roman-counter !important;
  padding-left: 0 !important;
}
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.roman, .ol-opt-roman) > li {
  position: relative !important;
  list-style: none !important;
  counter-increment: ol-roman-counter !important;
  padding-left: 36px !important;
}
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.roman, .ol-opt-roman) > li::before {
  content: counter(ol-roman-counter, upper-roman) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-headings, 'Merriweather', serif);
  font-weight: bold;
  color: #FFE1F0;
  width: 28px;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.bracket, .ol-opt-bracket) {
  list-style: none !important;
  counter-reset: ol-bracket-counter !important;
  padding-left: 0 !important;
}
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.bracket, .ol-opt-bracket) > li {
  position: relative !important;
  list-style: none !important;
  counter-increment: ol-bracket-counter !important;
  padding-left: 36px !important;
}
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.bracket, .ol-opt-bracket) > li::before {
  content: "[" counter(ol-bracket-counter) "]";
  position: absolute;
  left: 0;
  top: 0;
  color: #FFE1F0;
  font-family: var(--font-headings, 'Merriweather', serif);
  font-size: 14px;
  font-weight: bold;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.badge, .ol-opt-badge) {
  list-style: none !important;
  counter-reset: ol-badge-counter !important;
  padding-left: 0 !important;
}
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.badge, .ol-opt-badge) > li {
  position: relative !important;
  list-style: none !important;
  counter-increment: ol-badge-counter !important;
  padding-left: 38px !important;
}
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.badge, .ol-opt-badge) > li::before {
  content: counter(ol-badge-counter);
  position: absolute;
  left: 0;
  top: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #ff70b8;
  background: rgba(255, 112, 184, 0.2);
  color: #FFE1F0;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 0 0 6px rgba(255, 112, 184, 0.8);
}

/* 5. List Color Modifiers (.azure, .orchid, .gold, .white) */
:is(ol, ul):is(.stars, .numbers, .bullets, .star, .number, .bullet).azure > li::before {
  color: #7dd3fc !important;
  text-shadow: 0 0 8px rgba(125, 211, 252, 0.75) !important;
}
:is(ol, ul):is(.stars, .numbers, .bullets, .star, .number, .bullet).orchid > li::before {
  color: #ee9dd6 !important;
  text-shadow: 0 0 8px rgba(238, 157, 214, 0.75) !important;
}
:is(ol, ul):is(.stars, .numbers, .bullets, .star, .number, .bullet):is(.gold, .amber) > li::before {
  color: #fde68a !important;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.75) !important;
}
:is(ol, ul):is(.stars, .numbers, .bullets, .star, .number, .bullet).white > li::before {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8) !important;
}

/* ==========================================================================
   8 QUOTES / FACTS CALLOUT STYLING OPTIONS (For Inline Quotes & Key Facts)
   - Default (Style 1 ★): Fat Curly Quotes flanking left (“) and right (”)
   - Also applies automatically to .quotation and .Rootbox.quotation
   - Switch between all 8 styles by adding any class below:
     1. .bigquote                      (Default ★: Fat Left & Right Curly Quotes)
     2. .callout-opt-floating-glass    (Illuminated Floating Glass Panel)
     3. .callout-opt-editorial-lane    (Left & Right Starlight Margin Lane)
     4. .callout-opt-aphorism          (Top & Bottom Hairlines with Central ✦)
     5. .callout-opt-butterfly-flanked (Dual Butterfly Flanked Quote)
     6. .callout-opt-minimal-accent    (Minimal Left Glowing Pink Line)
     7. .callout-opt-dual-hairline     (Top & Bottom Starlight Hairlines)
     8. .callout-opt-butterfly-frame   (Subtle Glass Box with Central ✦)
   ========================================================================== */

/* Style 1 (Default ★): Fat Ornamental Left & Right Curly Quotes (“ ... ”) (.bigquote) */
.bigquote,
.quotation,
.Rootbox.quotation,
.orange.quotation {
  position: relative;
  max-width: 680px !important;
  margin: 36px auto !important;
  padding: 26px 52px !important;
  text-align: center !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
/*  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;*/
  overflow: visible !important;
}

.bigquote p,
.quotation p,
.Rootbox.quotation p {
  font-family: var(--font-reading);
  font-size: 18px !important;
  font-style: italic;
  color: var(--glow-pink-soft) !important;
  line-height: 1.8 !important;
  margin: 0 auto !important;
  text-align: center !important;
  text-shadow: 0 0 12px rgba(var(--glow-pink-neon-rgb), 0.35);
}

/* Subtle glow for any text inside the curly quotes container */
.bigquote p,
.bigquote p.lakequote,
.bigquote :is(p, span, b, strong, em, i) {
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8), 0 0 18px rgba(var(--glow-pink-neon-rgb), 0.4) !important;
}

.bigquote::before,
.quotation::before,
.Rootbox.quotation::before,
.bigquote::after,
.quotation::after,
.Rootbox.quotation::after {
  position: absolute !important;
  background: none !important;
  font-family: Georgia, Garamond, "Times New Roman", serif;
  font-size: 76px;
  font-weight: bold;
  line-height: 1;
  color: rgba(var(--glow-pink-neon-rgb), 0.55);
  text-shadow: 0 0 16px rgba(var(--glow-pink-neon-rgb), 0.45);
  pointer-events: none;
  opacity: 1 !important;
}

.bigquote::before,
.quotation::before,
.Rootbox.quotation::before {
  content: "“" !important;
  top: -12px !important;
  left: 2px !important;
  right: auto !important;
  bottom: auto !important;
}

.bigquote::after,
.quotation::after,
.Rootbox.quotation::after {
  content: "”" !important;
  bottom: -52px !important;
  right: 2px !important;
  left: auto !important;
  top: auto !important;
}

/* ==========================================================================
   15B. [JUMP-09B] SPECIAL ARTICLE CALLOUT CLASSES (.thoughtbox, .negativebox, .whitelist, .halo)
   - .thoughtbox   : Unified Thought Cloud Box for Self-Declarations (on <ol>, <ul>, or <div>)
   - .negativebox  : Margin Lane Frame for Negative Ideas Formula (on <div>, <ol>, or <ul>)
   - .whitelist    : White Theme Left-Border Lane (on <div>, <ol>, or <ul>)
   - .halo         : Celestial White Halo for Powerful Ending Lines (on <p> or <div>)
   ========================================================================== */

/* ==========================================================================
   EXPLAINBOX (2-Column Layout + Spectrum List)
   ========================================================================== */
.explainbox {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 600px;
  margin: 24px auto;
  box-sizing: border-box;
  text-align: left;
}

.explainbox .col {
  background: rgba(14, 5, 20, 0.45);
  border-left: 2.5px solid var(--glow-pink-neon, #ff70b8);
  padding: 16px 18px;
  border-radius: 0 6px 6px 0;
}

.explainbox .col.outward {
  border-left-color: #38bdf8;
}

.explainbox .col b {
  font-family: var(--font-headings, Garamond, serif);
  font-size: 18px;
  color: #ff70b8;
  display: block;
  margin-bottom: 4px;
}

.explainbox .col.outward b {
  color: #7dd3fc;
}

.explainbox .col i {
  font-family: var(--font-headings, Garamond, serif);
  font-style: italic;
  font-size: 18px;
  color: #ffe1f0;
  display: block;
  margin-bottom: 8px;
}

.explainbox .col p {
  font-size: 16.5px;
  line-height: 1.85;
  color: #ffffff;
  margin: 0;
}

/* Spectrum list below the columns */
.explainbox-list {
  max-width: 600px;
  margin: 22px auto;
  padding: 14px 16px;
}

.explainbox-list p {
  font-size: 16.5px;
  line-height: 1.85;
  color: #f5ede8;
  margin: 0 0 14px 0;
}

.explainbox-list p:last-child {
  margin-bottom: 0;
}

:is(.negativebox, .bluebox).explainbox-list p b {
  margin-right: 4px;
}

.negativebox:not(.blue):not(.bluetype).explainbox-list p b {
  color: #ff70b8 !important;
}

:is(.negativebox.blue, .negativebox.bluetype, .bluebox).explainbox-list p b {
  color: #93d7f9 !important;
  text-shadow: 0 0 10px rgba(113, 203, 255, 0.45) !important;
}

@media (max-width: 640px) {
  .explainbox {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}




/* ==========================================================================
   PURE SPINE ILLUMINATION (.bluelist, .purplelist / .pinklist, .whitelist)
   Zero container borders, 1px razor left spine, eastward starlight wash.
   .purplelist and .pinklist are interchangeable aliases.
   ========================================================================== */

.bluelist,
.purplelist,
.pinklist,
.whitelist {
  position: relative;
  max-width: 600px;
  margin: 24px auto;
  padding: 12px 0 12px 20px; /* 20px indents title & bullets away from the line */
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  box-sizing: border-box;
}

/* 1. THE LEFT SPINE: 1px razor filament only (Zero top/right/bottom box) */
.bluelist::before,
.purplelist::before,
.pinklist::before,
.whitelist::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px; /* 1px razor line, matching website's 1px dividers */
  pointer-events: none;
}

/* 2. THE EASTWARD LIGHT WASH: Smooth fade covering 100% of the paragraph width */
.bluelist::after,
.purplelist::after,
.pinklist::after,
.whitelist::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1px;
  width: 20%; /* Stretches across the full 100% width of the paragraph column */
  pointer-events: none;
  z-index: 0;
  /* Harmonize the wash with the spine's tapered ends */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%);
}

/* Ensure text and bullets stay clearly on top of the wash */
.bluelist > *,
.purplelist > *,
.pinklist > *,
.whitelist > * {
  position: relative;
  z-index: 1;
}

/* --- Cyan / Outward Palette --- */
.bluelist::before {
  /* Ultra-delicate 1px tapered starlight gradient matching .chapter-divider */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(56, 189, 248, 0.4) 15%,
    #38bdf8 50%,
    rgba(56, 189, 248, 0.4) 85%,
    transparent 100%
  );
  filter: drop-shadow(0 0 2px rgba(56, 189, 248, 0.7));
}
.bluelist::after {
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.13) 0%, rgba(56, 189, 248, 0.05) 50%, rgba(56, 189, 248, 0.015) 80%, transparent 100%);
}

/* --- Rose-Pink / Inward Palette (.purplelist, .pinklist) --- */
.purplelist::before,
.pinklist::before {
  /* Ultra-delicate 1px tapered starlight gradient matching .chapter-divider */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 112, 184, 0.4) 15%,
    #ff70b8 50%,
    rgba(255, 112, 184, 0.4) 85%,
    transparent 100%
  );
  filter: drop-shadow(0 0 2px rgba(255, 112, 184, 0.7));
}
.purplelist::after,
.pinklist::after {
  background: linear-gradient(90deg, rgba(255, 112, 184, 0.13) 0%, rgba(255, 112, 184, 0.05) 50%, rgba(255, 112, 184, 0.015) 80%, transparent 100%);
}

/* --- White / Alabaster Palette (.whitelist) --- */
.whitelist::before {
  /* Ultra-delicate 1px tapered starlight gradient matching .chapter-divider */
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 15%,
    #ffffff 50%,
    rgba(255, 255, 255, 0.4) 85%,
    transparent 100%
  );
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
}
.whitelist::after {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.04) 50%, rgba(255, 255, 255, 0.01) 80%, transparent 100%);
}

/* --- Titles & Headers (Direct child above list OR inside <ol>/<ul>) --- */
:is(.bluelist, .purplelist, .pinklist, .whitelist) > b,
:is(.bluelist, .purplelist, .pinklist, .whitelist) > strong,
:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(ul, ol) > b,
:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(ul, ol) > strong {
  display: block;
  font-family: var(--font-headings, Garamond, serif);
  font-size: 19px;
  margin-bottom: 10px;
  text-align: inherit;
}

:is(.bluelist, p.bluelist) > :is(b, strong),
.bluelist :is(ul, ol) > :is(b, strong) {
  color: #bae6fd;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.4);
}

:is(.purplelist, .pinklist, p.purplelist, p.pinklist) > :is(b, strong),
:is(.purplelist, .pinklist) :is(ul, ol) > :is(b, strong) {
  color: #ffe1f0;
  text-shadow: 0 0 8px rgba(255, 112, 184, 0.4);
}

:is(.whitelist, p.whitelist) > :is(b, strong),
.whitelist :is(ul, ol) > :is(b, strong) {
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

/* Explicit color type overrides on titles & bold within all lists */
:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(b, strong, p, span):is(.bluetype, .bluletype) {
  color: #93d7f9 !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.5) !important;
}

:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(b, strong, p, span):is(.pinktype, .purpletype) {
  color: #f0a3c8 !important;
  text-shadow: 0 0 8px rgba(255, 112, 184, 0.5) !important;
}

:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(b, strong, p, span).violettype {
  color: #ff70b8 !important;
  text-shadow: 0 0 8px rgba(255, 112, 184, 0.6) !important;
}

:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(b, strong, p, span):is(.whitetype, .whiteprint) {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* --- Paragraphs inside .bluelist, .purplelist, .pinklist & .whitelist (or applied directly to <p>) --- */
:is(.bluelist, .purplelist, .pinklist, .whitelist) p,
p.bluelist,
p.purplelist,
p.pinklist,
p.whitelist {
  font-family: var(--font-reading) !important;
  font-size: 16.5px !important;
  line-height: 1.85 !important;
  letter-spacing: 0.2px !important;
  color: #f5ede8 !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  text-align: inherit;
}

:is(.bluelist, .purplelist, .pinklist, .whitelist) p:last-child {
  margin-bottom: 0 !important;
}

/* --- Inline Bold / Strong inside Paragraphs or List Items --- */
:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(p, li) :is(b, strong),
:is(p.bluelist, p.purplelist, p.pinklist, p.whitelist) :is(b, strong) {
  display: inline !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
}

:is(.purplelist, .pinklist) :is(p, li) :is(b, strong),
:is(p.purplelist, p.pinklist) :is(b, strong) {
  color: #ffe1f0 !important;
  text-shadow: 0 0 8px rgba(255, 112, 184, 0.45) !important;
}

.bluelist :is(p, li) :is(b, strong),
p.bluelist :is(b, strong) {
  color: #bae6fd !important;
  text-shadow: 0 0 8px rgba(56, 189, 248, 0.45) !important;
}

.whitelist :is(p, li) :is(b, strong),
p.whitelist :is(b, strong) {
  color: #ffffff !important;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.6) !important;
}

/* --- Optional Centered Alignment (.center or .text-center) --- */
:is(.bluelist, .purplelist, .pinklist, .whitelist).center,
:is(.bluelist, .purplelist, .pinklist, .whitelist).text-center,
:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(p, b, strong).center,
:is(.bluelist, .purplelist, .pinklist, .whitelist).center :is(p, b, strong, li),
p.bluelist.center,
p.purplelist.center,
p.pinklist.center,
p.whitelist.center {
  text-align: center !important;
}

/* --- List Items & Glowing Bullet Points --- */
:is(.bluelist, .purplelist, .pinklist, .whitelist) ul,
:is(.bluelist, .purplelist, .pinklist, .whitelist) ol {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

:is(.bluelist, .purplelist, .pinklist, .whitelist) :is(ul, ol) > li,
:is(.bluelist, .purplelist, .pinklist, .whitelist) li {
  line-height: 1.75;
  color: #f5ede8;
  margin-bottom: 7px !important;
  position: relative;
  padding-left: 18px !important;
  text-align: left !important;
}

:is(.bluelist, .purplelist, .pinklist, .whitelist) li:last-child {
  margin-bottom: 0 !important;
}

.bluelist li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #38bdf8;
  text-shadow: 0 0 6px rgba(56, 189, 248, 0.7);
}

:is(.purplelist, .pinklist) li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ff70b8;
  text-shadow: 0 0 6px rgba(255, 112, 184, 0.7);
}

.whitelist li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.9), 0 0 12px rgba(255, 255, 255, 0.5);
}


/* ==========================================================================
   LAKE APHORISM FRAME & SEPARATE QUOTE
   ========================================================================== */

/* 1. The Standalone Centered Quote (No Borders) */
p.lakequote {
  font-family: var(--font-headings, Garamond, serif) !important;
  font-size: 19px !important;
  font-style: italic !important;
  font-weight: 500 !important;
  color: #ffffff !important;
  text-align: center !important;
  text-shadow: 0 0 10px rgba(255, 112, 184, 0.5) !important;
  max-width: 600px !important;
  margin: 32px auto 32px auto !important;
  line-height: 1.6 !important;
}

/* Equalize gaps: when .lakequote is housed inside .bigquote, zero out standalone margins so top & bottom gaps match */
.bigquote p.lakequote {
  margin: 0 auto !important;
}

/* 2. The Original Lake Aphorism Frame (Top & Bottom Hairlines) */
.st2 {
  position: relative;
  max-width: 600px;
  margin: 28px auto;
  padding: 20px 14px;
  border: none !important;
  text-align: left !important;
}

/* Top & Bottom Celestial Gradient Hairlines (Matching .chapter-divider needle taper) */
.st2::before,
.st2::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg, 
    rgba(var(--glow-pink-neon-rgb), 0) 0%, 
    rgba(var(--glow-pink-neon-rgb), 0.4) 25%, 
    rgba(var(--glow-pink-soft-rgb), 0.75) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.4) 75%, 
    rgba(var(--glow-pink-neon-rgb), 0) 100%
  ) !important;
  box-shadow: none !important;
  pointer-events: none;
}

.st2::before {
  top: 0;
}

.st2::after {
  bottom: 0;
}

/* Lead-in Sentence inside the Frame */
.st2 .lead {
  font-size: 16px;
  color: #ffe1f0;
  margin-bottom: 14px !important;
  font-weight: 600;
  
}

/* Pearl List inside the Frame */
.st2 ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

.st2 li {
  position: relative !important;
  padding-left: 22px !important;
  margin-bottom: 10px !important;

  line-height: 1.8;
  color: #f5ede8;
  text-align: left !important;
}

.st2 li:last-child {
  margin-bottom: 0 !important;
}

/* Ensure equal top & bottom gap inside .st2 regardless of child elements */
.st2 > :first-child,
.st2 p:first-child {
  margin-top: 0 !important;
}

.st2 > :last-child,
.st2 p:last-child {
  margin-bottom: 0 !important;
}

/* Luminous Starlight Pearl (Centered on Line 1) */
.st2 li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc((1.8em - 6px) / 2);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 6px #ff70b8, 0 0 12px #ff70b8;
}

/* ==========================================================================
   PEARL LIST UTILITY (.pearl, .pearl2, .bluepearl)
   Starlight pearl bullets for <ol> or <ul> lists (from .st2)
   - .pearl: Pink/rose starlight glow (#ff70b8)
   - .pearl2 / .bluepearl: Blue sapphire starlight glow (#71cbff)
   ========================================================================== */
:is(ol, ul):is(.pearl, .pearl2, .bluepearl),
:is(.pearl, .pearl2, .bluepearl) {
  list-style: none !important;
  padding: 0 !important;
}

:is(ol, ul):is(.pearl, .pearl2, .bluepearl) > li,
:is(.pearl, .pearl2, .bluepearl) li,
:is(p, li):is(.pearl, .pearl2, .bluepearl) {
  position: relative !important;
  list-style: none !important;
  padding-left: 22px !important;
  margin-bottom: 10px !important;
  text-align: left !important;
}

:is(ol, ul):is(.pearl, .pearl2, .bluepearl) > li:last-child,
:is(.pearl, .pearl2, .bluepearl) li:last-child,
:is(p, li):is(.pearl, .pearl2, .bluepearl):last-child {
  margin-bottom: 0 !important;
}

/* Original Pink Starlight Pearl (.pearl) */
:is(ol, ul).pearl > li::before,
.pearl li::before,
p.pearl::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: calc((1.8em - 6px) / 2) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px #ff70b8, 0 0 12px #ff70b8 !important;
}

/* Blue Sapphire Pearl (.pearl2, .bluepearl) */
:is(ol, ul):is(.pearl2, .bluepearl) > li::before,
:is(.pearl2, .bluepearl) li::before,
:is(p, li):is(.pearl2, .bluepearl)::before {
  content: "" !important;
  position: absolute !important;
  left: 2px !important;
  top: calc((1.8em - 6px) / 2) !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px #71cbff, 0 0 12px #71cbff !important;
}

/* ==========================================================================
   CENTER-ALIGNED LIST & CONTAINER MODIFIER (.centerlist / .listcenter)
   Centers lead-in text, paragraphs, and list items while keeping bullets directly beside words
   ========================================================================== */
.centerlist,
.listcenter,
.st2.centerlist,
.st2.listcenter,
.negativebox.centerlist,
.negativebox.listcenter {
  text-align: center !important;
}

.centerlist p,
.listcenter p,
.st2.centerlist p,
.st2.listcenter p,
.negativebox.centerlist p,
.negativebox.listcenter p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.centerlist .lead,
.listcenter .lead,
.st2.centerlist .lead,
.st2.listcenter .lead {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.centerlist, .listcenter),
:is(.centerlist, .listcenter) :is(ul, ol),
:is(ul, ol):is(.centerlist, .listcenter),
.st2.centerlist ul,
.st2.listcenter ul,
.negativebox.centerlist ul,
.negativebox.listcenter ul {
  display: block !important;
  width: 100% !important;
  max-width: 600px !important;
  margin: 18px auto !important;
  padding: 0 !important;
  padding-left: 0 !important;
  text-align: center !important;
  list-style: none !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.centerlist, .listcenter) > li,
:is(.centerlist, .listcenter) li,
:is(ul, ol):is(.centerlist, .listcenter) > li,
.st2.centerlist li,
.st2.listcenter li {
  text-align: center !important;
  padding-left: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 12px !important;
  display: block !important;
  width: 100% !important;
  max-width: 600px !important;
  box-sizing: border-box !important;
}

:is(.centerlist, .listcenter) li:last-child,
:is(ul, ol):is(.centerlist, .listcenter) > li:last-child {
  margin-bottom: 0 !important;
}

:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul):is(.centerlist, .listcenter) > li::before,
:is(.centerlist, .listcenter) li::before,
:is(ul, ol):is(.centerlist, .listcenter) > li::before,
.st2.centerlist li::before,
.st2.listcenter li::before {
  content: "" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  position: static !important;
  margin-right: 9px !important;
  margin-bottom: 2px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px #ff70b8, 0 0 12px #ff70b8 !important;
}

/* In .negativebox, list items don't have bullets so they center completely without left indentation */
.negativebox.centerlist li,
.negativebox.listcenter li {
  padding-left: 0 !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.negativebox.centerlist li::before,
.negativebox.listcenter li::before {
  content: none !important;
}

/* When .pearl or .pearl2 is added to .negativebox.centerlist, enable centered pearl bullets */
.negativebox.centerlist:is(.pearl, .pearl2, .bluepearl) :is(p, li),
.negativebox.centerlist :is(p, li):is(.pearl, .pearl2, .bluepearl) {
  text-align: center !important;
  padding-left: 0 !important;
}

.negativebox.centerlist.pearl :is(p, li)::before,
.negativebox.centerlist :is(p, li).pearl::before {
  content: "" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
  margin-bottom: 2px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px #ff70b8, 0 0 12px #ff70b8 !important;
}

.negativebox.centerlist:is(.pearl2, .bluepearl) :is(p, li)::before,
.negativebox.centerlist :is(p, li):is(.pearl2, .bluepearl)::before {
  content: "" !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
  margin-bottom: 2px !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px #71cbff, 0 0 12px #71cbff !important;
}



/* 1. .thoughtbox — Unified Thought Cloud Box (Self-Declarations & Enclosed Paragraphs) */
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul, div).thoughtbox,
.thoughtbox {
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  box-sizing: border-box !important;
  margin: 18px auto 22px auto !important;
  padding: 20px 28px !important;
  background: radial-gradient(ellipse at center, rgba(var(--glow-pink-neon-rgb), 0.09) 0%, rgba(14, 6, 22, 0.55) 100%) !important;
  border: 1px solid rgba(var(--glow-pink-soft-rgb), 0.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
  list-style: none !important;
}
/* Shared Base Styling for Smudge Backdrops */
.background,
.background2 {
  display: block;
  width: 100%;
  max-width: 600px;
  text-align: left;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  background: radial-gradient(
    ellipse at center,
    rgba(168, 85, 247, 0.13) 0%,
    rgba(147, 51, 234, 0.06) 40%,
    transparent 72%
  ) !important;
}

/* .background: Stylized Standalone Smudge (Extra Breathing Room for Solitary Callouts) */
.background {
  margin: 20px auto 22px auto !important;
  padding: 14px 0 !important;
}

/* .background2: Paragraph-Flow Smudge (Standard Paragraph Rhythm for Consecutive Lines & Flow) */
.background2 {
  margin: 0 auto 18px auto !important;
  padding: 0 !important;
}


:is(.Rootbox, .glass-panel, .article-reading-container, .catalyst-article, #introContainer, #myDiarySection, body) .thoughtbox,
:is(.Rootbox, .glass-panel, .article-reading-container, .catalyst-article, #introContainer, #myDiarySection, body) .thoughtbox p,
.thoughtbox,
.thoughtbox p,
.thoughtbox li {
  font-size: 17.5px !important;
  line-height: 1.85 !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.35) !important;
  text-align: center !important;
}

.thoughtbox p {
  margin: 0 auto 12px auto !important;
  max-width: 100% !important;
}

.thoughtbox li {
  margin: 0 auto 10px auto !important;
  list-style: none !important;
  padding-left: 0 !important;
}

.thoughtbox li:last-child,
.thoughtbox p:last-child {
  margin-bottom: 0 !important;
}

.thoughtbox :is(b, strong) {
  font-size: inherit !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.5) !important;
}

.thoughtbox :is(i, em) {
  font-size: inherit !important;
  font-style: italic !important;
  color: #ffffff !important;
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.5) !important;
}

/* Optional left-alignment modifier for thoughtbox paragraphs */
.thoughtbox.left,
.thoughtbox.left p,
.thoughtbox.text-left,
.thoughtbox.text-left p {
  text-align: left !important;
}

/* 1C. .thoughtbox.cracked — Subtle Cracked Mirror Modifier */
:is(.article-reading-container, .catalyst-article, .Rootbox, .glass-panel, body) :is(ol, ul, div).thoughtbox.cracked,
.thoughtbox.cracked {
  position: relative !important;
  overflow: hidden !important;
}

.thoughtbox.cracked::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  z-index: 1 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 520 220' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='cglow' x='-20%25' y='-20%25' width='140%25' height='140%25'%3E%3CfeDropShadow dx='0' dy='0' stdDeviation='1.2' flood-color='%23f981c2' flood-opacity='0.45'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23cglow)' fill='none' stroke='%23ffffff' stroke-width='0.85' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke' opacity='0.45'%3E%3Cpath d='M520,24 L472,38 L440,32 L395,58 L340,68 L290,102 L235,110 L175,148 L110,162 L60,192 L0,205'/%3E%3Cpath d='M395,58 L410,96 L402,138 L424,182 L416,220' opacity='0.5'/%3E%3Cpath d='M290,102 L282,70 L254,52 L246,0' opacity='0.45'/%3E%3Cpath d='M175,148 L162,185 L170,220' opacity='0.35'/%3E%3Cpath d='M0,36 L42,52 L72,46 L108,70 L130,68' opacity='0.45'/%3E%3Cpath d='M72,46 L82,22 L68,0' opacity='0.3'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  opacity: 0.3 !important;
}

.thoughtbox.cracked > * {
  position: relative !important;
  z-index: 2 !important;
}

/* 2. .negativebox & .bluebox — Left Glowing Margin Lane Frame (Negative Ideas / Inquiries) */
.negativebox,
.bluebox {
  width: 100% !important;
  max-width: 600px !important;
  box-sizing: border-box !important;
  margin: 22px auto !important;
  padding: 14px 16px 14px 12px !important;
  border: none !important;
  border-left: 2.5px solid var(--glow-pink-neon) !important;
  outline: none !important;
  box-shadow: none !important;
  background: linear-gradient(90deg, rgba(var(--glow-pink-neon-rgb), 0.06) 0%, rgba(var(--glow-pink-neon-rgb), 0.02) 30%, transparent 70%) !important;
  list-style: none !important;
  text-align: left !important;
}

/* Blue Variant: Triggered by adding .blue, .bluetype, or using .bluebox */
.bluebox,
.negativebox.blue,
.negativebox.bluetype {
  border-left-color: var(--course-accent, #71cbff) !important;
  background: linear-gradient(90deg, rgba(113, 203, 255, 0.08) 0%, rgba(113, 203, 255, 0.02) 30%, transparent 70%) !important;
}

.negativebox p,
.negativebox li,
.bluebox p,
.bluebox li {
  line-height: 1.85 !important;
  color: var(--glow-pink-soft) !important;
  text-shadow: 0 0 12px rgba(var(--glow-pink-neon-rgb), 0.45) !important;
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

:is(.bluebox, .negativebox.blue, .negativebox.bluetype) p,
:is(.bluebox, .negativebox.blue, .negativebox.bluetype) li {
  color: #f5ede8 !important;
  text-shadow: 0 0 12px rgba(113, 203, 255, 0.35) !important;
}

.negativebox ul,
.negativebox ol,
.bluebox ul,
.bluebox ol {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  list-style: none !important;
  text-align: left !important;
}

/* Pearl Bullet Support for .negativebox (applies to both <p> and <li>) */
:is(.negativebox, .bluebox):is(.pearl, .pearl2, .bluepearl) :is(p, li),
:is(.negativebox, .bluebox) :is(p, li):is(.pearl, .pearl2, .bluepearl) {
  list-style: none !important;
  padding-left: 0 !important;
}

.negativebox :is(p, li).center,
.negativebox.center :is(p, li),
.bluebox :is(p, li).center,
.bluebox.center :is(p, li) {
  text-align: center !important;
}

.negativebox.pearl :is(p, li)::before,
.negativebox :is(p, li).pearl::before,
.bluebox.pearl :is(p, li)::before,
.bluebox :is(p, li).pearl::before {
  content: "" !important;
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px #ff70b8, 0 0 12px #ff70b8 !important;
  margin-right: 10px !important;
  margin-bottom: 2px !important;
}

:is(.negativebox, .bluebox):is(.pearl2, .bluepearl) :is(p, li)::before,
:is(.negativebox, .bluebox) :is(p, li):is(.pearl2, .bluepearl)::before,
:is(.bluebox, .negativebox.blue, .negativebox.bluetype).pearl :is(p, li)::before,
:is(.bluebox, .negativebox.blue, .negativebox.bluetype) :is(p, li).pearl::before {
  content: "" !important;
  position: static !important;
  display: inline-block !important;
  vertical-align: middle !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 6px #71cbff, 0 0 12px #71cbff !important;
  margin-right: 10px !important;
  margin-bottom: 2px !important;
}

.negativebox :is(.whitetype, .whiteprint),
.bluebox :is(.whitetype, .whiteprint) {
  color: #FFFFFF !important;
  text-shadow: none !important;
}

.negativebox p b,
.negativebox b {
  color: #ff70b8 !important;
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.45) !important;
}

:is(.bluebox, .negativebox.blue, .negativebox.bluetype) p b,
:is(.bluebox, .negativebox.blue, .negativebox.bluetype) b {
  color: #93d7f9 !important;
  text-shadow: 0 0 10px rgba(113, 203, 255, 0.45) !important;
}

/* Universal .nogap utility: eliminates margins & tightens line-height for flush layout */
.nogap,
p.nogap {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  line-height: 1.35 !important;
}

.negativebox :is(b, strong) {
  font-size: inherit !important;
  font-weight: 700 !important;
  color: #ff70b8 !important;
  text-shadow: 0 0 12px rgba(var(--glow-pink-neon-rgb), 0.5) !important;
}

:is(.bluebox, .negativebox.blue, .negativebox.bluetype) :is(b, strong) {
  font-size: inherit !important;
  font-weight: 700 !important;
  color: #93d7f9 !important;
  text-shadow: 0 0 12px rgba(113, 203, 255, 0.5) !important;
}

.negativebox p:last-child,
.negativebox li:last-child,
.bluebox p:last-child,
.bluebox li:last-child {
  margin-bottom: 0 !important;
}

/* ==========================================================================
   2A. SELF DISCOVERY (DUAL-SPECTRUM ATMOSPHERIC AURA) (.selfdiscovery)
   ========================================================================== */
.selfdiscovery {
  width: 100% !important;
  max-width: 600px !important;
  margin: 28px auto !important;
  padding: 32px 26px 30px 26px !important;
  box-sizing: border-box !important;
  text-align: center !important;
  position: relative;
  border: none !important;
  border-radius: 4px;
  background: rgba(10, 4, 15, 0.48);
}

/* Top-Left Ice Cyan Pin & 250px Gossamer Glow Filament */
.selfdiscovery::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 250px;
  pointer-events: none;
  background: 
    radial-gradient(ellipse 95% 95% at 0 0, rgba(56, 189, 248, 0.065) 0%, rgba(56, 189, 248, 0.02) 45%, rgba(56, 189, 248, 0.005) 75%, transparent 100%),
    linear-gradient(90deg, 
      #ffffff 0px, 
      #ffffff 8px, 
      #38bdf8 18px, 
      rgba(56, 189, 248, 0.5) 45px, 
      rgba(56, 189, 248, 0.22) 100px, 
      rgba(56, 189, 248, 0.08) 170px, 
      rgba(56, 189, 248, 0.02) 215px, 
      transparent 250px
    ) top left / 100% 1px no-repeat,
    linear-gradient(180deg, 
      #ffffff 0px, 
      #ffffff 8px, 
      #38bdf8 18px, 
      rgba(56, 189, 248, 0.5) 45px, 
      rgba(56, 189, 248, 0.22) 100px, 
      rgba(56, 189, 248, 0.08) 170px, 
      rgba(56, 189, 248, 0.02) 215px, 
      transparent 250px
    ) top left / 1px 100% no-repeat,
    radial-gradient(circle at 0 0, #ffffff 0%, rgba(56, 189, 248, 0.75) 2px, transparent 4px) top left / 5px 5px no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(56, 189, 248, 0.5));
}

/* Bottom-Right Neon Pink Pin & 250px Gossamer Glow Filament */
.selfdiscovery::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 250px;
  height: 250px;
  pointer-events: none;
  background: 
    radial-gradient(ellipse 95% 95% at 100% 100%, rgba(255, 112, 184, 0.065) 0%, rgba(255, 112, 184, 0.02) 45%, rgba(255, 112, 184, 0.005) 75%, transparent 100%),
    linear-gradient(270deg, 
      #ffffff 0px, 
      #ffffff 8px, 
      #ff70b8 18px, 
      rgba(255, 112, 184, 0.5) 45px, 
      rgba(255, 112, 184, 0.22) 100px, 
      rgba(255, 112, 184, 0.08) 170px, 
      rgba(255, 112, 184, 0.02) 215px, 
      transparent 250px
    ) bottom right / 100% 1px no-repeat,
    linear-gradient(0deg, 
      #ffffff 0px, 
      #ffffff 8px, 
      #ff70b8 18px, 
      rgba(255, 112, 184, 0.5) 45px, 
      rgba(255, 112, 184, 0.22) 100px, 
      rgba(255, 112, 184, 0.08) 170px, 
      rgba(255, 112, 184, 0.02) 215px, 
      transparent 250px
    ) bottom right / 1px 100% no-repeat,
    radial-gradient(circle at 100% 100%, #ffffff 0%, rgba(255, 112, 184, 0.75) 2px, transparent 4px) bottom right / 5px 5px no-repeat;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 6px rgba(255, 112, 184, 0.5));
}

/* Section Title */
.selfdiscovery .discovery-title {
  font-family: var(--font-headings, Garamond, serif);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #ffffff;
  text-align: center;
  margin: 0 auto 20px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-shadow: 
    0 0 4px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.45),
    0 0 18px rgba(255, 112, 184, 0.25);
}

.selfdiscovery .discovery-star {
  font-size: 14px;
  color: #ffffff;
  text-shadow: 
    0 0 5px rgba(255, 255, 255, 0.85),
    0 0 12px rgba(255, 112, 184, 0.4);
  line-height: 1;
}

/* Centered Reading Body */
.selfdiscovery p {
  font-family: var(--font-reading, 'Merriweather', Garamond, serif) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.2px !important;
  color: #f1e4ec !important;
  margin: 0 auto 14px auto !important;
  text-align: center !important;
  text-shadow: none !important;
  width: 100% !important;
}

.selfdiscovery p:last-child {
  margin-bottom: 0 !important;
}

/* Inner Voice Quote (Harmonized Merriweather Italic) */
.selfdiscovery .inner-voice {
  font-family: var(--font-reading, 'Merriweather', serif) !important;
  font-style: italic !important;
  font-size: 15px !important;
  color: #ffe1f0 !important;
  letter-spacing: 0.2px !important;
}

/* Negative Island */
.selfdiscovery .negative-island {
  width: 100% !important;
  max-width: 520px;
  margin: 12px auto 16px auto !important;
  padding: 11px 18px;
  border-radius: 8px;
  text-align: center !important;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(255, 112, 184, 0.09) 0%, transparent 85%);
}

.selfdiscovery .negative-island p {
  font-family: var(--font-reading, 'Merriweather', serif) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ff8ecb !important;
  text-align: center !important;
  margin: 0 auto !important;
  text-shadow: 0 0 4px rgba(255, 112, 184, 0.3) !important;
}

/* Positive Island (Cyan) */
.selfdiscovery .positive-island {
  width: 100% !important;
  max-width: 520px;
  margin: 14px auto 16px auto !important;
  padding: 11px 18px;
  border-radius: 8px;
  text-align: center !important;
  background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(113, 203, 255, 0.08) 0%, transparent 85%);
}

.selfdiscovery .positive-island p {
  font-family: var(--font-reading, 'Merriweather', serif) !important;
  font-size: 16.5px !important;
  font-style: italic !important;
  font-weight: 700 !important;
  color: #93d7f9 !important;
  text-align: center !important;
  margin: 0 auto !important;
  text-shadow: 
    0 0 4px rgba(113, 203, 255, 0.6),
    0 0 12px rgba(113, 203, 255, 0.3) !important;
}

/* Conclusion: 16.5px Clean Bold Weight */
.selfdiscovery .sufferings-lead {
  width: 100% !important;
  margin-top: 18px !important;
  padding: 10px 16px;
  border-radius: 6px;
  background: rgba(255, 112, 184, 0.05);
  text-align: center !important;
}

.selfdiscovery .sufferings-lead p {
  font-size: 15px !important;
  color: #ffe6f2 !important;
  text-align: center !important;
  margin: 0 auto !important;
}

.selfdiscovery .sufferings-lead p b,
.selfdiscovery .sufferings-lead p strong {
  font-size: 16.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  color: #ffffff !important;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.4) !important;
}

/* 2B. .whitelist — Unified White Theme Pure Spine Lane
   (Maintained above under PURE SPINE ILLUMINATION alongside .bluelist & .purplelist) */

/* 3. .halo — Celestial White Halo (Powerful Ending Proclamation) */
.halo,
p.halo,
p.halo b,
p.halo strong,
div.halo,
div.halo b,
div.halo strong {
  font-family: var(--font-headings) !important;
  font-size: 25px !important;
  font-weight: bold !important;
  color: #ffffff !important;
  letter-spacing: 0.8px !important;
  text-shadow: 0 0 16px rgba(255, 255, 255, 0.9), 0 0 32px rgba(var(--glow-pink-neon-rgb), 0.75) !important;
  margin: 24px auto !important;
  text-align: center !important;
}

/* ==========================================================================
   15C. [JUMP-09C] KIT NEWSLETTER & CAPTCHA SURFACE GUARANTEE
   Fixes why Kit's Captcha / Guard window and reCAPTCHA badge appeared
   beneath page containers:
   1. Google's .grecaptcha-badge is injected at the end of <body> with
      `position: fixed` and NO z-index (auto -> 0), which placed it BEHIND
      `<main class="site-wrapper">` (z-index: 1).
   2. Kit's quarantine / Captcha verification window (`.formkit-overlay` /
      `.seva-overlay`) uses nested CSS `&[data-active="true"]` inside ck.5.js
      and needs an explicit top-level `z-index: 2147483647 !important` and
      `opacity: 1 !important` when active so it always surfaces above all
      containers and the top navigation bar.
   ========================================================================== */
#newsletterSection,
.glass-panel:has(.followme),
.glass-panel:has(.formkit-form) {
  overflow: visible !important;
  position: relative !important;
  z-index: 25 !important;
}

/* Symmetrical, Balanced Infinity Glyph (@font-face Unicode-Range U+221E) */
@font-face {
  font-family: 'InfinityBalance';
  src: local('Lucida Grande'), local('Segoe UI Symbol'), local('Cambria Math'), local('Arial');
  unicode-range: U+221E;
}
@font-face {
  font-family: 'InfinityBalance';
  font-style: italic;
  src: local('Lucida Grande'), local('Segoe UI Symbol'), local('Cambria Math'), local('Arial');
  unicode-range: U+221E;
}

/* Newsletter Title: Nav Pink & Cream Gradient (White bottom to Nav Pink top) */
h2.newsletter-gradient,
h2.card-title.newsletter-gradient {
  font-family: 'InfinityBalance', var(--font-headings) !important;
  background: linear-gradient(to top, #ffffff 0%, var(--glow-pink-soft) 40%, var(--glow-pink-neon) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(var(--glow-pink-neon-rgb), 0.45)) !important;
}

.followme,
.formkit-form,
.formkit-fields,
.formkit-field,
[data-uid="c20fc5f509"] {
  position: relative !important;
  z-index: 30 !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Hide floating Google reCAPTCHA badge (protection stays active) */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* 2. Elevate Kit's Captcha / Quarantine Guard overlay, modal & challenge popup windows above all containers & nav */
body > div:has(iframe[src*="recaptcha"]),
body > div:has(iframe[title*="recaptcha" i]),
.seva-overlay,
.formkit-overlay,
.seva-modal,
.formkit-modal,
.seva-modal.guard,
.formkit-modal.guard,
.seva-modal > iframe,
.formkit-modal > iframe,
div[style*="z-index: 2000000000"],
.g-recaptcha,
.g-recaptcha-bubble-arrow,
iframe[src*="recaptcha"],
iframe[src*="turnstile"],
iframe[src*="hcaptcha"],
.formkit-slide-in {
  z-index: 2147483647 !important;
  pointer-events: auto !important;
}

.seva-overlay,
.formkit-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
}

.seva-overlay[data-active="true"],
.formkit-overlay[data-active="true"] {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.seva-modal,
.formkit-modal,
.seva-modal.guard,
.formkit-modal.guard,
.seva-modal > iframe,
.formkit-modal > iframe {
  position: relative !important;
}

.seva-modal[data-active="true"],
.formkit-modal[data-active="true"] {
  opacity: 1 !important;
  margin-top: 0 !important;
  visibility: visible !important;
}

/* Starlight Visual Pause Divider */
.starlight-divider {
  border: 0;
  height: 1px;
  max-width: 240px;
  margin: 38px auto;
  background: radial-gradient(ellipse at center, rgba(var(--glow-pink-neon-rgb), 0.6) 0%, transparent 80%);
  position: relative;
}

.starlight-divider::after {
  content: "✦";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--glow-pink-soft);
  font-size: 10px;
  background: #09030d;
  padding: 0 8px;
  text-shadow: 0 0 6px rgba(var(--glow-pink-neon-rgb), 0.8);
}

/* Reading Progress Filament */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--glow-pink-neon) 0%, var(--glow-pink-soft) 100%);
  box-shadow: 0 0 8px rgba(var(--glow-pink-neon-rgb), 0.8);
  z-index: 99999;
  pointer-events: none;
  will-change: transform;
}

/* Opening Welcome Greeting */
.intro-greeting {
  display: table;
  margin: 0 auto 24px auto !important;
  text-align: center !important;
  position: relative;
  padding-bottom: 10px;
  font-size: 19px;
  color: #ffffff;
}

.intro-greeting::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% + 40px);
  max-width: 120px;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(
    90deg, 
    rgba(var(--glow-pink-neon-rgb), 0) 0%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 20%, 
    rgba(var(--glow-pink-soft-rgb), 0.85) 50%, 
    rgba(var(--glow-pink-neon-rgb), 0.35) 80%, 
    rgba(var(--glow-pink-neon-rgb), 0) 100%
  );
}

/* Dedicated Stages Box for Chapter VII */
.stagesbox {
  max-width: 520px;
  margin: 20px auto 24px auto;
  padding: 20px 28px;
  background: radial-gradient(ellipse at center, rgba(var(--glow-pink-neon-rgb), 0.09) 0%, rgba(14, 6, 22, 0.55) 100%);
  border: 1px solid rgba(var(--glow-pink-soft-rgb), 0.28);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  text-align: center;
  font-style: normal;
}

.stagesbox p {
  margin: 0 auto 10px auto;
  font-size: 17px;
  font-style: normal;
  background: linear-gradient(to top, #ffffff 0%, var(--glow-pink-soft) 40%, var(--glow-pink-neon) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 8px rgba(var(--glow-pink-neon-rgb), 0.45));
  text-align: center;
}

.stagesbox p:last-child {
  margin-bottom: 0;
}

.stagesbox strong,
.stagesbox b {
  font-style: normal;
}

/* ==========================================================================
   17. LEGAL & POLICY PAGES: NEAT & FLUSH DOCUMENT STYLING
   ========================================================================== */
.page-legal .article-reading-container h2,
.legal-container h2,
.legal-article h2 {
  font-family: var(--font-headings);
  font-size: 22px;
  font-weight: 700;
  color: var(--glow-pink-soft);
  letter-spacing: 0.8px;
  text-align: left;
  width: 100%;
  max-width: 600px;
  margin: 38px auto 14px auto;
  padding: 0 0 10px 0;
  display: block;
  border-bottom: 1px solid rgba(var(--glow-pink-neon-rgb), 0.28);
  position: relative;
  text-shadow: 0 0 10px rgba(var(--glow-pink-neon-rgb), 0.35);
  box-sizing: border-box;
}

.page-legal .article-reading-container h2::before,
.page-legal .article-reading-container h2::after,
.legal-container h2::before,
.legal-container h2::after,
.legal-article h2::before,
.legal-article h2::after {
  display: none;
}

.page-legal .article-reading-container h2:first-of-type,
.legal-container h2:first-of-type,
.legal-article h2:first-of-type {
  margin-top: 28px;
}

.page-legal .article-reading-container p,
.legal-container p,
.legal-article p {
  max-width: 600px;
  margin: 0 auto 18px auto;
  text-align: left;
  line-height: 1.85;
  letter-spacing: 0.2px;
}

.page-legal .article-reading-container ul,
.page-legal .article-reading-container ol,
.legal-container ul,
.legal-container ol,
.legal-article ul,
.legal-article ol {
  max-width: 600px;
  margin: 0 auto 20px auto;
  padding-left: 24px;
  box-sizing: border-box;
  text-align: left;
  line-height: 1.85;
}

.page-legal .article-reading-container ul li,
.page-legal .article-reading-container ol li,
.legal-container ul li,
.legal-container ol li,
.legal-article ul li,
.legal-article ol li {
  margin-bottom: 12px;
}

/* ==========================================================================
   16. [JUMP-10] RESPONSIVE TABLET & MOBILE SCALING
   ========================================================================== */

@media (max-width: 1200px) {
  :root {
    --user-wash-mult: 0.00;
  }
}

@media (max-width: 768px) {
  :root {
    --container-darkness: var(--mobile-container-darkness, 0.10);
    --mobile-glow-left: 0.5;
    --mobile-glow-right: 0.0;
    --user-wash-mult: 0.08;
  }

  /* Note: Mobile Celestial Top & Footer Bubbles are maintained in cosmos.css */

  /* Disable heavy background-attachment: fixed on mobile to eliminate Chrome scroll jitter */
  body:has(:is(.catalyst-article, .directory-list, .course-boxless-container, .legal-container, .page-legal)) {
    background-attachment: scroll !important;
  }

  .site-nav {
    padding: 8px 0 0 0;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(14, 5, 20, 0.92) !important;
  }
  .site-nav.nav-scrolled {
    background: rgba(10, 3, 15, 0.97) !important;
    padding-bottom: 8px !important;
  }
  .site-nav-primary {
    gap: 16px !important;
  }
  .site-nav-secondary {
    height: 26px !important;
    line-height: 26px !important;
    margin-top: 10px !important;
    overflow: visible !important;
  }
  .site-nav.nav-scrolled .site-nav-secondary {
    height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
  }

  .site-wrapper,
  .page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 50px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobile Full-Bleed Flush Containers */
  .glass-panel,
  #introContainer,
  #myDiarySection,
  .Rootbox,
  .article-reading-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 22px !important;
    padding: 24px 18px !important;
    border-radius: 0 !important;
    border-right: none !important;
    box-shadow: 
      /* Left Spine Inset Glow */
      inset calc(3px * var(--mobile-glow-left, 1.1)) 0 calc(8px * var(--mobile-glow-left, 1.1)) rgba(255, 255, 255, calc(0.40 * var(--mobile-glow-left, 1.1))),
      inset calc(6px * var(--mobile-glow-left, 1.1)) 0 calc(18px * var(--mobile-glow-left, 1.1)) -2px rgba(var(--course-glow-rgb, var(--glow-pink-neon-rgb)), calc(0.45 * var(--mobile-glow-left, 1.1))),
      /* Right Edge: Pure Diffuse Ambient Whisper Glow (No hard border line) */
      inset calc(-2px * var(--mobile-glow-right, 1.0)) 0 calc(6px * var(--mobile-glow-right, 1.0)) rgba(var(--course-glow-rgb, var(--glow-pink-neon-rgb)), calc(0.13 * var(--mobile-glow-right, 1.0))) !important;
  }

  /* Single Left Double-Spine on Mobile: Self-Transformation & Newsletter Boxes (Pure White) */
  .white,
  .exercise,
  #newsletterSection,
  section#newsletterSection,
  #course,
  aside#course,
  .wholealbumcatalystwrap {
    border-left: 6px double #efedff !important;
    border-right: none !important;
    border-radius: 0 !important;
    padding: 26px 18px !important;
    margin-bottom: 22px !important;
    margin-top: 18px !important;
    box-shadow: 
      /* Left Double-Spine Inset Glow */
      inset calc(3px * var(--mobile-glow-left, 1.1)) 0 calc(8px * var(--mobile-glow-left, 1.1)) rgba(239, 237, 255, calc(0.55 * var(--mobile-glow-left, 1.1))),
      inset calc(6px * var(--mobile-glow-left, 1.1)) 0 calc(18px * var(--mobile-glow-left, 1.1)) -2px rgba(239, 237, 255, calc(0.40 * var(--mobile-glow-left, 1.1))),
      /* Right Edge: Pure Diffuse Ambient Whisper Glow (No hard border line) */
      inset calc(-2px * var(--mobile-glow-right, 1.0)) 0 calc(6px * var(--mobile-glow-right, 1.0)) rgba(239, 237, 255, calc(0.13 * var(--mobile-glow-right, 1.0))) !important;
  }

  /* 4-Stage Journey: Hide decorative side spines on mobile */
  .stages-feature-enclosure::before,
  .stages-feature-enclosure::after {
    display: none !important;
  }

  .stage-boxless-unit {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Master Course Box on Mobile */
  #courseUnifiedBox {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 24px 0 !important;
    border-radius: 0 !important;
    border-right: none !important;
    box-shadow:
      /* Left Spine Inset Glow */
      inset calc(3px * var(--mobile-glow-left, 1.1)) 0 calc(8px * var(--mobile-glow-left, 1.1)) rgba(255, 255, 255, calc(0.48 * var(--course-spine-glow, 0.5))),
      inset calc(6px * var(--mobile-glow-left, 1.1)) 0 calc(18px * var(--mobile-glow-left, 1.1)) -2px rgba(255, 240, 250, calc(0.35 * var(--course-spine-glow, 0.5))),
      /* Right Edge: Pure Diffuse Ambient Whisper Glow (No hard border line) */
      inset calc(-2px * var(--mobile-glow-right, 1.0)) 0 calc(6px * var(--mobile-glow-right, 1.0)) rgba(255, 240, 250, calc(0.13 * var(--mobile-glow-right, 1.0))) !important;
  }

  #partJourney > h2,
  #partJourney > p,
  #partOverview,
  #partMembership {
    padding-left: 18px !important;
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  .course-journey-divider {
    margin-left: 24px !important;
    margin-right: 18px !important;
  }

  .brand-title {
    font-size: 32px !important;
  }
  .brand-tagline {
    font-size: 17px !important;
  }
  h1.page-title {
    font-size: 36px !important;
  }

  /* ==========================================================================
     MOBILE VIEW EXPANDED READING ROOM:
     Shift left-border callouts (.bluelist, .purplelist, .whitelist, .negativebox, .bluebox)
     and pearl bullet lists (.pearl) slightly to the left (no longer flush with <p>),
     maximizing line length and reading comfort on compact mobile screens.
     ========================================================================== */
  .bluelist,
  .purplelist,
  .pinklist,
  .whitelist {
    margin-left: -10px !important;
    margin-right: 0 !important;
    width: calc(100% + 10px) !important;
    max-width: calc(100% + 10px) !important;
    padding-left: 14px !important;
  }

  .bluelist li,
  .purplelist li,
  .pinklist li,
  .whitelist li,
  :is(.bluelist, .purplelist, .pinklist, .whitelist) :is(ul, ol) > li {
    padding-left: 14px !important;
  }

  .negativebox,
  .bluebox {
    margin-left: -10px !important;
    margin-right: 0 !important;
    width: calc(100% + 10px) !important;
    max-width: calc(100% + 10px) !important;
    padding-left: 10px !important;
  }

  :is(ol, ul):is(.pearl, .pearl2, .bluepearl),
  :is(.pearl, .pearl2, .bluepearl):not(.negativebox):not(.bluebox),
  p:is(.pearl, .pearl2, .bluepearl) {
    margin-left: -10px !important;
    margin-right: 0 !important;
    width: calc(100% + 10px) !important;
    max-width: calc(100% + 10px) !important;
  }

  :is(ol, ul):is(.pearl, .pearl2, .bluepearl) > li,
  :is(.pearl, .pearl2, .bluepearl):not(.negativebox):not(.bluebox) li,
  p:is(.pearl, .pearl2, .bluepearl) {
    padding-left: 16px !important;
  }

  :is(ol, ul):is(.pearl, .pearl2, .bluepearl) > li::before,
  :is(.pearl, .pearl2, .bluepearl):not(.negativebox):not(.bluebox) li::before,
  p:is(.pearl, .pearl2, .bluepearl)::before {
    left: 0 !important;
  }
}

@media (max-width: 680px) {
  /* True natural 100% full-width enclosure */
  .stages-feature-enclosure {
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 16px 0 !important;
    padding: 22px 18px 32px 24px !important;
    box-sizing: border-box !important;
    position: relative !important;
    background: 
      radial-gradient(
        ellipse 95% 55% at 0% 100%,
        rgba(var(--glow-pink-soft-rgb), 0.2) 0%,
        rgba(var(--glow-pink-neon-rgb), 0.09) 45%,
        transparent 80%
      ),
      radial-gradient(
        ellipse 95% 55% at 100% 0%,
        rgba(var(--glow-pink-soft-rgb), 0.2) 0%,
        rgba(var(--glow-pink-neon-rgb), 0.09) 45%,
        transparent 80%
      ) !important;
  }

  /* Comet Line: Strictly spans between centers of Orb I and Orb IV */
  .stage-tabs-track-wrap {
    margin: 20px 0 26px 0 !important;
    padding: 0 !important;
    width: 100% !important;
    position: relative !important;
  }
  .stage-tabs-track-wrap::before {
    display: block !important;
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 25px !important;
    right: 25px !important;
    height: 1.5px !important;
    background: linear-gradient(
      90deg, 
      rgba(var(--glow-pink-neon-rgb), 0.35) 0%, 
      rgba(var(--glow-pink-soft-rgb), 0.95) 50%, 
      rgba(var(--glow-pink-neon-rgb), 0.35) 100%
    ) !important;
    box-shadow: 0 0 8px rgba(var(--glow-pink-neon-rgb), 0.6), 0 0 14px rgba(255, 255, 255, 0.4) !important;
    z-index: 1 !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
  }

  /* Evenly positioned 4 Orbs */
  .stage-tabs-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .stage-tab-btn {
    flex: 0 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
    position: relative !important;
    z-index: 2 !important;
  }

  .stage-tab-btn .orbital-title {
    display: none !important;
  }

  /* Four orbs slightly bigger in size for mobile touch UX with soft, elegant glow */
  .stage-tab-btn .orbital-circle {
    width: 50px !important;
    height: 50px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    border: 1.5px solid rgba(var(--glow-pink-neon-rgb), 0.45) !important;
    background: #08020a !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 3 !important;
    box-shadow: 
      0 0 8px rgba(0, 0, 0, 0.8), 
      0 0 5px rgba(var(--glow-pink-neon-rgb), 0.22);
  }
  .stage-tab-btn.active .orbital-circle {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #09030e !important;
    transform: scale(1.06) !important;
    z-index: 4 !important;
    box-shadow: 
      0 0 0 2px rgba(var(--glow-pink-neon-rgb), 0.35),
      0 0 10px rgba(255, 255, 255, 0.75),
      0 0 14px rgba(var(--glow-pink-neon-rgb), 0.45) !important;
  }

  .stage-tab-btn .orbital-circle .orb-butterfly-icon {
    width: 28px !important;
    height: 28px !important;
  }

  .stage-boxless-title {
    display: block !important;
    font-size: clamp(17px, 4.8vw, 21px) !important;
    line-height: 1.35 !important;
    -webkit-box-decoration-break: clone !important;
    box-decoration-break: clone !important;
    word-wrap: break-word !important;
    max-width: 100% !important;
    text-align: center !important;
    margin-top: 14px !important;
    margin-bottom: 8px !important;
  }

  .stage-boxless-unit p,
  .stage-boxless-desc {
    font-size: 15px !important;
    line-height: 1.65 !important;
    min-height: 0 !important;
    margin: 0 auto 14px auto !important;
  }
}

@media (max-width: 600px) {
  /* Mobile Single-Row Navigation: Hide redundant Layer 2 to maximize vertical reading bandwidth */
  .site-nav {
    padding: 8px 0 8px 0 !important;
  }
  .site-nav-secondary {
    display: none !important;
  }
  .site-wrapper,
  .page-container {
    padding-top: 44px !important;
  }

  .directory-subtitle {
    display: none !important;
  }
  .butterfly-icon {
    width: 38px;
  }

  /* Catalyst Article Containers on Mobile:
     Adjust 'min-height' below to change the height of the article containers (e.g. 54px, 58px, 62px) */
  .directory-list {
    gap: 3px !important;
  }
  .catalysts-borderless .directory-item,
  .directory-list .directory-item {
    margin-bottom: 0 !important;
    min-height: 58px !important;
  }

  /* Related Catalysts Ribbon on Mobile: One clean line per article (stacked vertically) */
  .related-catalysts-ribbon {
    padding: 16px 12px !important;
    gap: 10px !important;
  }
  .related-catalysts-ribbon .rel-title {
    font-size: 14px !important;
    letter-spacing: 2px !important;
  }
  .related-catalysts-ribbon .rel-links {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .related-catalysts-ribbon .rel-item {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3px 0 !important;
    font-size: 16.5px !important;
  }
  .related-catalysts-ribbon .rel-star {
    width: 6px !important;
    height: 6px !important;
    right: calc(100% + 8px) !important;
  }

  /* Modular Site Footer on Mobile: Perfectly balanced, level single-row alignment */
  .site-master-footer,
  footer.footer-wheels {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 14px !important;
    margin: 16px auto 32px auto !important;
    box-sizing: border-box !important;
  }

  .footer-links-row,
  .footer-links-cluster {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 0 auto 14px auto !important;
    padding: 0 !important;
  }

  .footer-wheel {
    font-size: 16px !important;
    gap: 7px !important;
    min-height: 42px !important;
    white-space: nowrap !important;
    flex: 1 1 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s ease, filter 0.25s ease;
  }

  .footer-wheel:active {
    transform: scale(0.95);
  }

  .footer-wheel:first-child {
    justify-content: flex-start !important;
  }
  .footer-wheel:nth-child(2) {
    justify-content: center !important;
  }
  .footer-wheel:last-child {
    justify-content: flex-end !important;
  }

  .footer-sprite {
    width: 32px !important;
    height: 32px !important;
    background-size: 96px 64px !important;
    flex-shrink: 0 !important;
  }

  .footer-sprite.privacy {
    background-position: center top !important;
  }
  .footer-sprite.privacy:hover {
    background-position: center bottom !important;
  }
  .footer-sprite.mail {
    background-position: left top !important;
  }
  .footer-sprite.mail:hover {
    background-position: left bottom !important;
  }

  .footer-copyright-wrap,
  .footer-copyright-cluster,
  .footer-center-gap {
    margin-top: 14px !important;
  }

  .footer-copyright-wrap .copyright-text,
  .footer-copyright-cluster .copyright-text,
  .copyright-text {
    font-size: 14px !important;
    padding-top: 6px !important;
  }
}

@media (max-width: 480px) {
  .site-nav-primary {
    gap: 8px !important;
  }
  .site-nav-primary li:first-child,
  .site-nav-primary li:last-child {
    min-width: 74px;
  }
  .site-nav-primary a {
    padding: 0 2px !important;
  }
  .site-nav-primary li:first-child a::before {
    left: -28px;
  }
  .site-nav-primary li:last-child a::before {
    right: -28px;
  }
  .site-wrapper,
  .page-container {
    padding-top: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .brand-title {
    font-size: 26px !important;
  }
  .brand-tagline {
    font-size: 14.5px !important;
  }
  h1.page-title {
    font-size: 30px !important;
  }
  .hero-subtitle,
  .page-subtitle {
    font-size: 18px !important;
    line-height: 1.45 !important;
  }
}