:root { --bg: #0B1020; --lavender: #C8A2FF; --rose: #E1B2C6; --gold: #FFE6A8; --muted: #A7AEC6; --text: #F1F4FF; --shadow-8: 0 0 8px; --shadow-18: 0 0 18px; --radius-16: 16px; --radius-32: 32px; --e1: cubic-bezier(.2,.6,.2,1); --g-glow-lav: 0 0 8px rgba(200,162,255,.8), 0 0 18px rgba(200,162,255,.45); --g-glow-rose: 0 0 8px rgba(225,178,198,.8), 0 0 18px rgba(225,178,198,.45); --g-glow-gold: 0 0 8px rgba(255,230,168,.85), 0 0 18px rgba(255,230,168,.55); --space-8: 8px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-48: 48px; --space-64: 64px; --primary-bg: #0B1020; --secondary-bg: #1B2536; --accent-bg: #0F1521; --card-bg: rgba(30, 41, 59, 0.7); --text-primary: #F1F4FF; --text-secondary: #A7AEC6; --text-light: rgba(241, 244, 255, 0.7); --accent-primary: #E1B2C6; --accent-secondary: #C8A2FF; --accent-tertiary: #FFE6A8; --border-light: rgba(255, 255, 255, 0.1); --shadow-light: rgba(0, 0, 0, 0.15); --shadow-medium: rgba(0, 0, 0, 0.25); --shadow-heavy: rgba(0, 0, 0, 0.4); --gradient-primary: linear-gradient(135deg, #0B1020 0%, #1B2536 100%); --gradient-accent: linear-gradient(135deg, #E1B2C6 0%, #C8A2FF 100%); --glow-color: rgba(225, 178, 198, 0.6); }
[data-theme="dark"] { --primary-bg: #0B0F20; --secondary-bg: #141B2E; --accent-bg: #1E2A47; --card-bg: #253354; --text-primary: #E8E0E8; --text-secondary: #C5B5C5; --text-light: #A390A3; --accent-primary: #8B6F9E; --accent-secondary: #7A5F8F; --accent-tertiary: #6B5080; --border-light: #3A4A66; --shadow-light: rgba(139, 111, 158, 0.2); --shadow-medium: rgba(122, 95, 143, 0.3); --shadow-heavy: rgba(122, 95, 143, 0.5); --gradient-primary: linear-gradient(135deg, #0B0F20 0%, #141B2E 100%); --gradient-accent: linear-gradient(135deg, #8B6F9E 0%, #7A5F8F 100%); --glow-color: rgba(139, 111, 158, 0.8); }


/* ===== STARS BACKGROUND ===== */
.stars-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Ensure hero content is above stars but stars are visible */
.hero-content {
  position: relative;
  z-index: 10;
}

.star {
  position: absolute;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  animation: twinkle 3s ease-in-out infinite;
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.6);
}

.star-far {
  animation: twinkle 4s ease-in-out infinite;
  opacity: 0.4;
}

.star-mid {
  animation: twinkle 3.5s ease-in-out infinite;
  opacity: 0.7;
}

.star-near {
  animation: twinkle 2.5s ease-in-out infinite;
  opacity: 1;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

/* Mobile-specific star adjustments */
@media (max-width: 768px) {
  .star {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 6px rgba(255, 255, 255, 0.8) !important;
  }
  
  .star-far {
    opacity: 0.6 !important;
  }
  
  .star-mid {
    opacity: 0.8 !important;
  }
  
  .star-near {
    opacity: 1 !important;
  }
  
  @keyframes twinkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
  }
}

/* ===== CELESTIAL SCROLLBAR ===== */
/* Custom scrollbar for webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: linear-gradient(180deg, 
    rgba(11, 16, 32, 0.6) 0%,
    rgba(27, 37, 54, 0.4) 50%,
    rgba(11, 16, 32, 0.6) 100%);
  border-radius: 10px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(232, 180, 203, 0.4) 0%,
    rgba(200, 162, 255, 0.5) 30%,
    rgba(186, 148, 224, 0.6) 70%,
    rgba(225, 178, 198, 0.4) 100%);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 
    0 2px 6px rgba(225, 178, 198, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(232, 180, 203, 0.6) 0%,
    rgba(200, 162, 255, 0.7) 30%,
    rgba(186, 148, 224, 0.8) 70%,
    rgba(225, 178, 198, 0.6) 100%);
  box-shadow: 
    0 3px 8px rgba(225, 178, 198, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 12px rgba(232, 180, 203, 0.2);
}

::-webkit-scrollbar-thumb:active {
  background: linear-gradient(180deg,
    rgba(232, 180, 203, 0.7) 0%,
    rgba(200, 162, 255, 0.8) 30%,
    rgba(186, 148, 224, 0.9) 70%,
    rgba(225, 178, 198, 0.7) 100%);
}

::-webkit-scrollbar-corner {
  background: rgba(11, 16, 32, 0.6);
}

/* Firefox scrollbar styling */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(225, 178, 198, 0.5) rgba(11, 16, 32, 0.6);
}

/* Enhanced scrollbar for specific containers */
.task-list::-webkit-scrollbar-thumb,
.notepad-content::-webkit-scrollbar-thumb,
.memory-details::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(232, 180, 203, 0.3) 20%,
    rgba(200, 162, 255, 0.4) 50%,
    rgba(186, 148, 224, 0.5) 80%,
    rgba(255, 255, 255, 0.1) 100%);
  backdrop-filter: blur(4px);
}

.task-list::-webkit-scrollbar-thumb:hover,
.notepad-content::-webkit-scrollbar-thumb:hover,
.memory-details::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.2) 0%,
    rgba(232, 180, 203, 0.5) 20%,
    rgba(200, 162, 255, 0.6) 50%,
    rgba(186, 148, 224, 0.7) 80%,
    rgba(255, 255, 255, 0.2) 100%);
  box-shadow: 
    0 0 8px rgba(225, 178, 198, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ===== NIGHTLY CHECKLIST ===== */
.nightly-checklist {
  position: absolute;
  top: 12px;
  right: 12px;
  width: fit-content;
  max-width: 340px;
  z-index: 1000;
  transition: all 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.checklist-toggle {
  position: relative;
  z-index: 1001;
}

.checklist-ribbon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: radial-gradient(circle at 35% 35%, 
    rgba(255, 255, 255, 0.06) 0%, 
    rgba(232, 180, 203, 0.04) 40%,
    rgba(200, 162, 255, 0.02) 100%);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.2, 0.6, 0.2, 1);
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  opacity: 1.0;
}

.checklist-ribbon:hover {
  background: radial-gradient(circle at 35% 35%, 
    rgba(255, 255, 255, 0.15) 0%, 
    rgba(232, 180, 203, 0.12) 40%,
    rgba(200, 162, 255, 0.08) 100%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
  box-shadow: 
    0 4px 12px rgba(232, 180, 203, 0.15),
    0 0 20px rgba(225, 178, 198, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  opacity: 0.8;
}

.checklist-ribbon:active {
  transform: scale(0.98);
}

.checklist-ribbon:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(232, 180, 203, 0.6), 0 4px 16px rgba(232, 180, 203, 0.15);
}

.checklist-ribbon svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.checklist-card {
  background: 
    linear-gradient(145deg, rgba(11, 16, 32, 0.85), rgba(27, 37, 54, 0.8)),
    radial-gradient(ellipse at top, rgba(225, 178, 198, 0.08), transparent 50%);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid;
  border-image: linear-gradient(180deg, rgba(232, 210, 255, 0.45), rgba(255, 196, 220, 0.35)) 1;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  width: 340px;
  max-width: calc(100vw - 48px);
  padding: 20px;
  transform: translateY(-20px) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
  position: absolute;
  top: 50px;
  right: 0;
}

.nightly-checklist.open .checklist-card {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

.checklist-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.checklist-date .date-label {
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
  margin-right: 8px;
}

.checklist-date .formatted-date {
  font-size: 15px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.progress-crescent {
  position: relative;
  width: 24px;
  height: 24px;
}

.progress-crescent .crescent-bg {
  color: rgba(255, 255, 255, 0.3);
}

.progress-crescent .crescent-fill {
  color: var(--accent-primary);
  transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
  filter: drop-shadow(0 0 6px rgba(225, 178, 198, 0.6));
}

.checklist-body {
  margin-bottom: 16px;
}

.task-list {
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.task-item {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 8px;
  min-height: 48px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
  user-select: none;
}

.task-item:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(225, 178, 198, 0.3);
  transform: translateY(-1px);
}

.task-item.completed {
  background: rgba(225, 178, 198, 0.1);
  border-color: rgba(225, 178, 198, 0.3);
}

.task-checkbox {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  position: relative;
  flex-shrink: 0;
}

.checkbox-crescent,
.checkbox-star {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: all 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.checkbox-crescent {
  color: rgba(255, 255, 255, 0.4);
  opacity: 1;
}

.checkbox-star {
  color: var(--accent-primary);
  opacity: 0;
  transform: scale(0.8);
  filter: drop-shadow(0 0 4px rgba(225, 178, 198, 0.8));
}

.task-item.completed .checkbox-crescent {
  opacity: 0;
}

.task-item.completed .checkbox-star {
  opacity: 1;
  transform: scale(1);
  color: #FFE64D !important;
  filter: drop-shadow(0 0 4px rgba(255, 230, 77, 0.8)) !important;
}

.task-label {
  flex: 1;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-primary);
  word-wrap: break-word;
  transition: color 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.task-item.completed .task-label {
  color: var(--text-secondary);
}

.task-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.task-item:hover .task-actions {
  opacity: 0.3;
}

.drag-handle,
.delete-task-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
  color: rgba(255, 255, 255, 0.15);
  font-size: 12px;
  opacity: 1;
  background: transparent;
  border: none;
}

.drag-handle:hover,
.delete-task-btn:hover {
  background: transparent;
  color: rgba(255, 255, 255, 0.4);
  transform: scale(1.05);
}

.add-task-container {
  margin-top: 12px;
}

.add-task-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px dashed rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  color: var(--text-secondary);
  font-size: 15px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.add-task-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(225, 178, 198, 0.5);
  color: var(--text-primary);
}

.add-task-input-container {
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(225, 178, 198, 0.4);
  border-radius: 12px;
}

.add-task-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-primary);
  font-size: 15px;
  margin-bottom: 12px;
}

.add-task-input::placeholder {
  color: var(--text-secondary);
}

.add-task-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.save-task-btn,
.cancel-task-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.save-task-btn {
  background: rgba(225, 178, 198, 0.2);
  color: var(--accent-primary);
}

.save-task-btn:hover {
  background: rgba(225, 178, 198, 0.3);
}

.cancel-task-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
}

.cancel-task-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: var(--text-primary);
}

.checklist-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.reset-tonight-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.2, 0.6, 0.2, 1);
}

.reset-tonight-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text-primary);
}

.streak-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, rgba(255, 230, 168, 0.2), rgba(255, 196, 220, 0.2));
  border: 1px solid rgba(255, 230, 168, 0.3);
  border-radius: 12px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--accent-tertiary);
}

.streak-icon {
  font-size: 12px;
}


.sparkle-burst {
  position: absolute;
  pointer-events: none;
  color: var(--accent-primary);
  font-size: 12px;
  animation: burst 0.4s cubic-bezier(0.2, 0.6, 0.2, 1) forwards;
}

@keyframes burst {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.8) rotate(360deg);
    opacity: 0;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .nightly-checklist {
    margin: 24px 16px;
    width: calc(100% - 32px);
    max-width: none;
  }
  
  .checklist-card {
    width: 100%;
    max-width: none;
  }
  
  .checklist-toggle {
    position: relative;
    top: auto;
    right: auto;
    margin-bottom: 8px;
    display: flex;
    justify-content: flex-end;
  }
  
  .checklist-footer {
    flex-direction: column;
    align-items: stretch;
  }
  
  .reset-tonight-btn {
    order: 2;
    margin-top: 8px;
  }
  
  .streak-container {
    order: 1;
    align-self: center;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .checklist-card,
  .task-item,
  .checkbox-crescent,
  .checkbox-star {
    transition: none;
  }
  
  .sparkle-burst {
    display: none;
  }
}

* { margin: 0px; padding: 0px; box-sizing: border-box; }
html, body { 
  height: auto; 
  min-height: 100vh;
}
body { 
  font-family: Inter, sans-serif; 
  line-height: 1.6; 
  color: var(--text-primary); 
  background: linear-gradient(135deg, rgb(11, 15, 32) 0%, rgb(20, 27, 46) 50%, rgb(30, 42, 71) 100%); 
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background 0.6s ease; 
  overflow-x: hidden;
  margin: 0;
  padding: 0;
}

.main-content { 
  padding: 0; 
  background: transparent;
  min-height: 100vh;
}

/* Ensure elements after main don't create extra space and background consistency */
body > *:not(main) { position: absolute; }

/* Ensure main extends properly */
main {
  background: transparent;
  min-height: 100vh;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Black background mode */
body.black-bg { 
  background: linear-gradient(135deg, rgb(0, 0, 0) 0%, rgb(10, 10, 10) 50%, rgb(20, 20, 20) 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Background Color Toggle - ABSOLUTE POSITION ON PAGE */
#bgToggle,
.bg-color-toggle {
  position: absolute !important;
  top: 20px !important;
  left: 20px !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  right: auto !important;
  bottom: auto !important;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.2, 0.6, 0.2, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.bg-color-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.bg-color-toggle:active {
  transform: translateY(0);
}

.toggle-icon {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.bg-color-toggle:hover .toggle-icon {
  transform: scale(1.1);
}
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; padding: 2rem; background: transparent; }
.color-picker-container { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; padding: 4px; transition: 0.3s; display: none; }
.color-picker-container:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.hero-color-picker { width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer; background: none; }
.hero-color-picker::-webkit-color-swatch-wrapper { padding: 0px; border: none; border-radius: 50%; }
.hero-color-picker::-webkit-color-swatch { border: none; border-radius: 50%; }
.hero-content { text-align: center; max-width: 600px; animation: 1.5s ease-out 0s 1 normal none running fadeInUp; position: relative; z-index: 2; }
.hero-title { font-family: "Playfair Display", serif; font-size: clamp(2.5rem, 5vw, 3.8rem); font-weight: 700; background-image: linear-gradient(135deg, rgba(255, 182, 193, 0.95) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(186, 148, 224, 0.9) 70%, rgba(255, 160, 122, 0.95) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 200%; animation: 2s ease-out 0.5s 1 normal both running smoothFadeIn, 12s ease-in-out 2.5s infinite normal none running gentleGradientShift; margin-bottom: 1.5rem; line-height: 1.2; position: relative; }
[data-theme="dark"] .hero-title { text-shadow: rgba(232, 180, 203, 0.3) 0px 0px 20px, rgba(186, 148, 224, 0.2) 0px 0px 40px, rgba(0, 0, 0, 0.5) 2px 2px 4px; }
.hero-subtitle { font-size: clamp(1.1rem, 3vw, 1.4rem); background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 3rem; font-weight: 300; letter-spacing: 0.5px; opacity: 0; animation: 1s ease-out 2s 1 normal both running fadeIn, 6s ease-in-out 0s infinite normal none running subtleGradientShift; }
/* Simple glass pill */
.glass-btn{
  --bg: rgba(255,255,255,.07);         /* glass fill */
  --bg-hover: rgba(255,255,255,.10);
  --border: rgba(255,255,255,.18);     /* hairline */
  --shadow: rgba(10, 8, 26, .28);      /* soft lift */
  --focus: #cdb8ff;                    /* your lilac */

  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:52px;
  padding:0 22px;
  border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)) , var(--bg);
  border:1px solid var(--border);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
          backdrop-filter: blur(8px) saturate(120%);
  color:#fff;
  font-weight:700;
  letter-spacing:-0.2px;
  text-shadow:0 1px 0 rgba(0,0,0,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16),
              0 8px 24px var(--shadow);
  transition: transform .14s cubic-bezier(.2,.6,.2,1),
              background-color .14s cubic-bezier(.2,.6,.2,1),
              box-shadow .14s cubic-bezier(.2,.6,.2,1);
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: 1.2rem;
  opacity: 0;
  animation: 1s ease-out 3s 1 normal both running fadeInUp;
}

/* Hover / Active / Focus */
.glass-btn:hover{
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) , var(--bg-hover);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18),
              0 12px 30px var(--shadow);
}
.glass-btn:active{ transform: translateY(0); }
.glass-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 4px color-mix(in oklab, var(--focus) 55%, transparent),
    0 8px 24px var(--shadow),
    inset 0 1px 0 rgba(255,255,255,.16);
}

/* Smaller on mobile */
@media (max-width:480px){
  .glass-btn{ height:48px; padding:0 18px; font-size:.98rem; }
}

/* Birthday Cake */
.birthday-cake-container {
  position: absolute;
  top: 150px;
  left: 50%;
  margin-left: -60px;
  animation: gentleFloat 3s ease-in-out infinite;
  z-index: 10;
  pointer-events: auto;
}

.birthday-cake {
  max-width: 120px;
  height: auto;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.3));
}

.candle-flame {
  position: absolute;
  font-size: 0.9rem;
  cursor: pointer;
  z-index: 15;
  transition: all 0.3s ease;
  animation: flicker 1.5s ease-in-out infinite alternate;
  user-select: none;
}

.candle-flame:hover {
  transform: scale(1.2);
  filter: brightness(1.3);
}

.candle-flame.extinguished {
  opacity: 0;
  transform: scale(0.5);
  pointer-events: none;
}

/* Position flames on the candles - LOCKED IN PERFECT POSITION - DO NOT CHANGE */
.flame-3 {
  top: -5.1%;
  left: 34.3%;
}

.flame-0 {
  top: -5.2%;
  left: 54.9%;
}

/* Floating animation */
@keyframes gentleFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* Flame flicker animation */
@keyframes flicker {
  0% {
    transform: rotate(-1deg) scale(1);
  }
  100% {
    transform: rotate(1deg) scale(1.05);
  }
}

/* Magical disappear animation */
.birthday-cake-container.disappearing {
  animation: magicalDisappear 2s ease-in-out forwards;
}

@keyframes magicalDisappear {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    filter: brightness(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1) rotate(5deg);
    filter: brightness(1.5) blur(2px);
  }
  100% {
    opacity: 0;
    transform: scale(0.3) rotate(15deg);
    filter: brightness(2) blur(8px);
  }
}

/* Sparkle effects for magical disappear */
.cake-sparkle {
  position: absolute;
  color: #FFD700;
  font-size: 1rem;
  pointer-events: none;
  animation: sparkleFloat 1.5s ease-out forwards;
  z-index: 20;
}

@keyframes sparkleFloat {
  0% {
    opacity: 1;
    transform: scale(0.5) translateY(0px);
  }
  100% {
    opacity: 0;
    transform: scale(1.5) translateY(-50px);
  }
}

/* Smoke animation for extinguished flames */
@keyframes smokeFloat {
  0% {
    opacity: 1;
    transform: scale(0.8) translateY(0px);
  }
  100% {
    opacity: 0;
    transform: scale(1.8) translateY(-40px);
  }
}
.chapter-navigation { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; flex-wrap: wrap; gap: 2rem; }
.section-title { font-family: "Playfair Display", serif; font-size: clamp(2rem, 4vw, 2.8rem); background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat: ; background-attachment: ; background-origin: ; background-color: ; background-clip: text; -webkit-text-fill-color: transparent; margin: 0px; }
.nav-controls { display: flex; align-items: center; gap: 2rem; }
.surprise-btn { cursor: pointer; position: absolute; left: 0px; background: none !important; border: none !important; color: rgba(255, 215, 100, 0.8) !important; font-size: 1.5rem !important; padding: 0.5rem !important; border-radius: 50% !important; transition: 0.4s !important; text-shadow: rgba(255, 215, 100, 0.4) 0px 0px 6px, rgba(255, 215, 100, 0.2) 0px 0px 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 40px !important; box-shadow: none !important; backdrop-filter: none !important; }
.surprise-btn:hover { color: rgb(255, 215, 100) !important; transform: scale(1.1) !important; text-shadow: rgba(255, 215, 100, 0.8) 0px 0px 8px, rgba(255, 215, 100, 0.4) 0px 0px 16px, rgba(255, 215, 100, 0.2) 0px 0px 24px !important; }
.surprise-btn:active { transform: scale(1.05) !important; }
.chapter-counter { font-size: 1.1rem; color: var(--text-secondary); font-weight: 500; display: none; }
.carousel-container { position: relative; display: flex; align-items: center; gap: 1rem; margin-bottom: 0; justify-content: center; }
.carousel-wrapper { flex: 1 1 0%; max-width: 850px; overflow: hidden; border-radius: 25px; box-shadow: 0 10px 40px var(--shadow-light); }
.carousel-track { display: flex; transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.carousel-nav { background: none; border: none; border-radius: 0px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.4s; color: rgba(232, 180, 203, 0.7); font-size: 1.8rem; text-shadow: rgba(232, 180, 203, 0.4) 0px 0px 6px, rgba(232, 180, 203, 0.2) 0px 0px 12px; box-shadow: none; backdrop-filter: none; }
.carousel-nav:hover { color: rgb(232, 180, 203); transform: scale(1.1); text-shadow: rgba(232, 180, 203, 0.8) 0px 0px 8px, rgba(232, 180, 203, 0.4) 0px 0px 16px, rgba(232, 180, 203, 0.2) 0px 0px 24px; }
.carousel-nav:disabled { opacity: 0.3; cursor: not-allowed; transform: none; color: rgba(232, 180, 203, 0.3); text-shadow: none; }
.chapter-slide { min-width: 100%; background: none; border-radius: 0px; padding: 2rem; border: none; box-shadow: none; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; backdrop-filter: none; }
.chapter-title { font-family: "Playfair Display", serif; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 600; margin-bottom: 1rem; background: linear-gradient(135deg, rgba(255, 182, 193, 0.95) 0%, rgba(255, 255, 255, 0.9) 30%, rgba(186, 148, 224, 0.9) 70%, rgba(255, 160, 122, 0.95) 100%) text; -webkit-text-fill-color: transparent; line-height: 1.1; letter-spacing: -0.01em; text-align: center; opacity: 0; animation: 0.8s ease-out 0.3s 1 normal forwards running slideInFade; text-shadow: rgba(255, 182, 193, 0.3) 0px 0px 20px; position: relative; z-index: 3; }
.chapter-subtitle { font-family: Inter, sans-serif; color: rgba(186, 148, 224, 0.8); margin-bottom: 1.5rem; font-size: clamp(1.1rem, 2.5vw, 1.4rem); font-weight: 300; text-align: center; opacity: 0; animation: 0.8s ease-out 0.6s 1 normal forwards running slideInFade; text-shadow: rgba(186, 148, 224, 0.3) 0px 0px 15px; letter-spacing: 0.5px; position: relative; z-index: 3; }
.modern-audio-player { width: 100%; max-width: 520px; background: none; backdrop-filter: none; border: none; border-radius: 0px; padding: 2rem 1rem; margin-bottom: 2rem; box-shadow: none; position: relative; overflow: visible; }
.modern-audio-player::before { display: none; }
[data-theme="dark"] .modern-audio-player { background: none; border: none; }
.play-button-container { display: flex; justify-content: center; align-items: center; margin-bottom: 6rem; margin-top: 4rem; position: relative; z-index: 2; height: 280px; width: 100%; padding: 2rem; }
.main-play-btn { width: 120px; height: 120px; border-radius: 50%; background: linear-gradient(135deg, rgba(255, 182, 193, 0.95) 0%, rgba(255, 160, 122, 0.95) 25%, rgba(186, 148, 224, 0.95) 50%, rgba(232, 180, 203, 0.95) 75%, rgba(255, 182, 193, 0.95) 100%); border: 2px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; }
.main-play-btn:hover { transform: translate(-50%, -50%) scale(1.05); }
.orbital-stars { display: none; }
.orbital-star { position: absolute; width: 4px; height: 4px; border-radius: 50%; opacity: 0.6; }
.orbital-star-1 { background: rgba(255, 182, 193, 0.6); animation: 12s linear 0s infinite normal none running orbit-1; top: 20px; left: 50%; transform-origin: 0px 80px; }
.orbital-star-2 { background: rgba(186, 148, 224, 0.6); animation: 16s linear 0s infinite reverse none running orbit-2; top: 50%; right: 15px; transform-origin: -85px 0px; }
.play-icon, .pause-icon { width: 24px; height: 24px; position: relative; display: flex; align-items: center; justify-content: center; }
.play-icon::before { content: ""; width: 0px; height: 0px; border-left: 12px solid rgba(255, 255, 255, 0.95); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 4px); }
.pause-icon::before, .pause-icon::after { content: ""; width: 3px; height: 12px; background: rgba(255, 255, 255, 0.95); border-radius: 1px; filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 1px 2px); }
.pause-icon::before { margin-right: 3px; }
.pause-icon::after { margin-left: 3px; }
.main-play-btn::before { display: none; }
.main-play-btn.playing { animation: auto ease 0s 1 normal none running none; box-shadow: none; }
.main-play-btn.playing::before { opacity: 1; animation: 3s ease-in-out 0s infinite normal none running dreamyGlow; }
.progress-orbit { display: none !important; visibility: hidden !important; opacity: 0 !important; }
.progress-orbit::after { display: none !important; }
.skip-controls { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 320px; height: 120px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; z-index: 2; }
.skip-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.15); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: scale(0.8); pointer-events: none; position: relative; }
.skip-btn.forward::before { content: ""; width: 0px; height: 0px; border-left: 8px solid rgba(232, 180, 203, 0.8); border-top: 6px solid transparent; border-bottom: 6px solid transparent; margin-right: 2px; }
.skip-btn.forward::after { content: ""; width: 2px; height: 12px; background: rgba(232, 180, 203, 0.8); border-radius: 1px; }
.skip-btn.backward::before { content: ""; width: 2px; height: 12px; background: rgba(232, 180, 203, 0.8); border-radius: 1px; margin-right: 2px; }
.skip-btn.backward::after { content: ""; width: 0px; height: 0px; border-right: 8px solid rgba(232, 180, 203, 0.8); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.play-button-container:hover .skip-btn { opacity: 1; transform: scale(1); pointer-events: auto; }
.skip-btn:hover { background: rgba(232, 180, 203, 0.15); color: rgb(232, 180, 203); transform: scale(1.1); box-shadow: rgba(139, 111, 158, 0.2) 0px 8px 20px; }
.time-display { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-bottom: 1.5rem; font-size: 0.9rem; background: linear-gradient(90deg, rgba(255, 182, 193, 0.7) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(186, 148, 224, 0.7) 100%) text; -webkit-text-fill-color: transparent; font-weight: 300; letter-spacing: 1px; position: relative; text-shadow: rgba(255, 182, 193, 0.2) 0px 0px 20px; opacity: 0; animation: 0.8s ease-out 0.9s 1 normal forwards running slideInFade; }
.time-display::before { content: ""; width: 3px; height: 3px; background: radial-gradient(circle, rgba(255, 182, 193, 0.8) 0%, rgba(186, 148, 224, 0.6) 50%, transparent 100%); border-radius: 50%; box-shadow: rgba(255, 182, 193, 0.5) 0px 0px 10px; animation: 3s ease-in-out 0s infinite normal none running twinkle; }
.chapter-dots { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; margin-bottom: 2rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(232, 180, 203, 0.3); cursor: pointer; transition: 0.4s; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 4px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; }
.dot.active { background: rgba(232, 180, 203, 0.8); border: 1px solid rgba(232, 180, 203, 0.9); transform: scale(1.4); box-shadow: rgba(232, 180, 203, 0.6) 0px 0px 8px, rgba(232, 180, 203, 0.3) 0px 0px 16px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset; }
.dot:hover { background: rgba(232, 180, 203, 0.5); border: 1px solid rgba(232, 180, 203, 0.7); transform: scale(1.2); box-shadow: rgba(232, 180, 203, 0.4) 0px 0px 6px, rgba(232, 180, 203, 0.2) 0px 0px 12px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; }
.transcript-section { width: 100%; max-width: 600px; margin-top: 2rem; }
.transcript-toggle { background: rgba(255, 255, 255, 0.06); backdrop-filter: blur(15px); border: 1px solid rgba(232, 180, 203, 0.15); color: rgba(232, 180, 203, 0.8); cursor: pointer; font-size: 0.95rem; font-weight: 400; margin-bottom: 1.5rem; padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; gap: 0.8rem; transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1); border-radius: 25px; width: 100%; max-width: 280px; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; opacity: 0.8; }
.transcript-toggle::before { content: ""; position: absolute; top: 0px; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent); transition: left 0.5s; }
.transcript-toggle:hover::before { left: 100%; }
.transcript-toggle:hover { background: rgba(232, 180, 203, 0.12); color: rgb(232, 180, 203); transform: translateY(-2px); box-shadow: rgba(139, 111, 158, 0.2) 0px 8px 25px; border-color: rgba(232, 180, 203, 0.3); opacity: 1; }
.transcript-toggle .arrow { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 0.8rem; }
.transcript-toggle:hover .arrow { animation: 0.6s ease-in-out 0s 1 normal none running gentleBounce; }
.transcript-content { background: var(--accent-bg); border-radius: 15px; padding: 2rem; font-size: 1rem; line-height: 1.8; color: var(--text-secondary); display: none; animation: 0.5s ease-out 0s 1 normal none running fadeIn; }
.transcript-content.show { display: block; }
.notepad-modal { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px); display: none; z-index: 2000; animation: 0.3s ease-out 0s 1 normal none running fadeIn; }
.notepad-modal.show { display: flex; align-items: center; justify-content: center; }
.notepad-content { background: var(--card-bg); border-radius: 25px; width: 90%; max-width: 600px; max-height: 80vh; overflow: hidden; box-shadow: 0 20px 60px var(--shadow-heavy); animation: 0.4s ease-out 0s 1 normal none running slideInUp; }
.notepad-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 2rem; border-bottom: 1px solid var(--border-light); }
.notepad-header h3 { font-family: "Playfair Display", serif; font-size: 1.5rem; color: var(--text-primary); margin: 0px; }
.close-btn { background: none; border: none; font-size: 2rem; color: var(--text-light); cursor: pointer; transition: color 0.3s; padding: 0px; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.close-btn:hover { color: var(--accent-primary); background: var(--accent-bg); }
.notepad-tabs { display: flex; border-bottom: 1px solid var(--border-light); }
.tab-btn { flex: 1 1 0%; background: none; border: none; padding: 1rem 1.5rem; cursor: pointer; color: var(--text-secondary); transition: 0.3s; font-size: 1rem; }
.tab-btn.active { color: var(--accent-primary); background: var(--accent-bg); }
.tab-btn:hover { background: var(--accent-bg); }
.notepad-body { padding: 2rem; min-height: 300px; }
.notes-tab textarea { width: 100%; min-height: 200px; background: var(--secondary-bg); border: 1px solid var(--border-light); border-radius: 15px; padding: 1.5rem; font-family: Inter, sans-serif; font-size: 1rem; color: var(--text-primary); resize: vertical; transition: border-color 0.3s; }
.notes-tab textarea:focus { outline: none; border-color: var(--accent-primary); }
.notepad-btn { position: fixed; bottom: 30px; right: 2rem; width: 60px; height: 60px; border-radius: 50%; background: var(--gradient-accent); border: none; font-size: 1.5rem; cursor: pointer; box-shadow: 0 8px 25px var(--shadow-medium); transition: 0.3s; z-index: 1500; animation: 3s ease-in-out 0s infinite normal none running float, 10s ease-in-out 0s infinite normal none running heartPulse; }
.notepad-btn:hover { transform: scale(1.1); box-shadow: 0 12px 35px var(--shadow-heavy); }

/* Mobile-specific fixes */
@media (max-width: 768px) {
  .notepad-btn { display: none !important; }
  
  /* Prevent horizontal overflow on mobile and ensure dark theme */
  body { 
    overflow-x: hidden; 
    min-height: 100vh;
    position: relative;
    background: var(--primary-bg) !important;
    color: var(--text-primary) !important;
  }
  
  /* MOBILE CHAPTER NAVIGATION: Complete override */
  .carousel-container {
    width: 100vw;
    height: auto;
    overflow: hidden !important; /* No scrolling */
    position: relative;
    scroll-snap-type: none !important; /* Disable scroll snap */
    scroll-behavior: auto !important;
    touch-action: pan-y; /* Only allow vertical scrolling on page */
  }
  
  .carousel-wrapper {
    display: block !important; /* Override flex */
    width: 100%;
    height: 100%;
    min-height: 70vh;
  }
  
  .chapter-slide {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: 100vw !important;
    position: relative !important;
    box-sizing: border-box;
    padding: 2rem 1rem;
    display: none; /* Hide by default - shown by JS */
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .chapter-slide.mobile-active {
    display: flex !important;
    opacity: 1 !important;
  }
  
  /* Hide navigation arrows on mobile, keep dots visible */
  .carousel-nav {
    display: none;
  }
  
  /* Ensure chapter navigation dots are visible and positioned well */
  .chapter-navigation {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
  }
  
  /* Make chapter dots more touch-friendly on mobile */
  .chapter-dot {
    width: 12px;
    height: 12px;
    margin: 0 8px;
  }
  
  /* Ensure hero section fits properly but preserve desktop functionality */
  .hero {
    min-height: 100vh;
    width: 100vw;
    background: var(--primary-bg) !important;
  }
  
  /* Fix main content width */
  .main-content {
    width: 100vw;
    max-width: 100vw;
    overflow-x: hidden;
  }
  
  
  /* Ensure hero title and button are still visible */
  .hero-content {
    position: relative;
    z-index: 10;
  }
  
}
.sound-control { position: fixed; right: var(--space-32); bottom: 50%; transform: translateY(50%); z-index: 100; }
.ambient-dropdown, .music-dropdown { position: relative; }
.ambient-btn, .music-btn { background: var(--card-bg); border: 2px solid var(--border-light); border-radius: 50%; width: 44px; height: 44px; cursor: pointer; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px var(--shadow-light); backdrop-filter: blur(10px); font-size: 1.1rem; color: var(--text-secondary); position: relative; overflow: hidden; }
.ambient-glow, .music-glow { position: absolute; inset: 0px; border-radius: 50%; background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%); opacity: 0; transition: opacity 0.4s; animation: 3s ease-in-out 0s infinite normal none running gentlePulse; }
.ambient-btn:hover, .music-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 25px var(--shadow-medium); }
.ambient-btn:hover .ambient-glow, .ambient-btn.active .ambient-glow, .music-btn:hover .music-glow, .music-btn.active .music-glow { opacity: 0.4; }
.ambient-btn.active, .music-btn.active { color: white; box-shadow: 0 6px 20px var(--shadow-light), 0 0 15px var(--glow-color); }
.ambient-menu, .music-menu { position: absolute; bottom: 70px; right: 0px; background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 16px; padding: 0.8rem; min-width: 200px; box-shadow: 0 8px 32px var(--shadow-heavy); backdrop-filter: blur(20px); opacity: 0; visibility: hidden; transform: translateY(10px); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.ambient-menu.show, .music-menu.show { opacity: 1; visibility: visible; transform: translateY(0px); }
.ambient-option, .music-option { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; cursor: pointer; border-radius: 12px; transition: 0.2s; font-size: 0.9rem; color: var(--text-primary); }
.ambient-option:hover, .music-option:hover { background: var(--accent-bg); transform: translateX(4px); }
.ambient-option.active, .music-option.active { background: var(--accent-primary); color: white; }
.ambient-volume-control, .music-volume-control { display: flex; align-items: center; gap: 0.8rem; padding: 0.8rem; margin-bottom: 0.5rem; border-bottom: 1px solid var(--border-light); font-size: 0.8rem; }
.volume-slider { flex: 1 1 0%; height: 8px; background: var(--border-light); border-radius: 4px; outline: none; appearance: none; cursor: pointer; touch-action: none; }
.volume-slider::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: var(--accent-color); border-radius: 50%; cursor: pointer; box-shadow: rgba(232, 180, 203, 0.4) 0px 2px 8px; transition: 0.2s; }
.volume-slider::-webkit-slider-thumb:hover { transform: scale(1.2); box-shadow: rgba(232, 180, 203, 0.6) 0px 4px 12px; }
.volume-percent { min-width: 35px; text-align: right; color: var(--text-secondary); font-size: 0.75rem; }
.sound-btn { position: relative; width: 56px; height: 56px; border: none; border-radius: 50%; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 140ms cubic-bezier(0.2, 0.6, 0.2, 1); }
@media (max-width: 768px) {
  .sound-btn { width: 52px; height: 52px; }
}
.sound-btn:hover { transform: scale(1.03); }
.sound-btn:active { transform: scale(0.97); }
.sound-btn:focus-visible { outline: none; }
.sound-btn:focus-visible::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(200, 162, 255, 0.6); pointer-events: none; }
.sound-orb { width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.02)); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: var(--g-glow-lav); transition: 140ms cubic-bezier(0.2, 0.6, 0.2, 1); position: relative; }
@media (max-width: 768px) {
  .sound-orb { width: 48px; height: 48px; }
}
.sound-btn:hover .sound-orb { box-shadow: var(--g-glow-lav),
    0 0 26px rgba(200,162,255,.33); }
.sound-btn:active .sound-orb { box-shadow: inset 0 2px 4px rgba(0,0,0,0.2),
    var(--g-glow-lav); }
.sound-btn.active .sound-orb { box-shadow: var(--g-glow-lav), 0 0 24px rgba(200,162,255,.3); }
.sound-orb::before { content: ""; position: absolute; width: 4px; height: 4px; background: white; border-radius: 50%; box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 8px; opacity: 0; transition: opacity 300ms; pointer-events: none; }
.sound-btn.playing .sound-orb { 
  animation: pulseGlow 2.5s ease-in-out infinite;
}
.sound-btn.playing .sound-orb::before { opacity: 1; animation: 6s linear 0s infinite normal none running orbitSparkle; }
@keyframes orbitSparkle { 
  0% { transform: rotate(0deg) translateX(30px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(30px) rotate(-360deg); }
}
@keyframes pulseGlow {
  0%, 100% { 
    box-shadow: var(--g-glow-lav), 0 0 24px rgba(200,162,255,.3); 
  }
  50% { 
    box-shadow: var(--g-glow-lav), 
                0 0 32px rgba(200,162,255,.5), 
                0 0 48px rgba(200,162,255,.2); 
  }
}
@media (max-width: 768px) {
  @keyframes orbitSparkle { 
  0% { transform: rotate(0deg) translateX(28px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
}
}
@media (prefers-reduced-motion: reduce) {
  .sound-btn.playing .sound-orb { 
    animation: none; 
    box-shadow: var(--g-glow-lav), 0 0 28px rgba(200,162,255,.4); 
  }
  .sound-btn.playing .sound-orb::before { animation: auto ease 0s 1 normal none running none; opacity: 0.6; top: -2px; right: -2px; transform: none; }
}
.sound-popover-card { width: 400px; padding: 24px; border-radius: 24px; background: padding-box rgba(255, 255, 255, 0.06); backdrop-filter: blur(22px); border: 1px solid transparent; box-shadow: rgba(0, 0, 0, 0.2) 0px 24px 48px, rgba(200, 162, 255, 0.1) 0px 0px 0px 1px; opacity: 0; transform: scale(0.98); transition: 140ms cubic-bezier(0.2, 0.6, 0.2, 1); position: relative; }
@media (max-width: 480px) {
  .sound-popover-card { width: 92vw; max-width: 420px; }
}
.sound-popover.show .sound-popover-card { opacity: 1; transform: scale(1); }
.sound-popover-card::before { content: ""; position: absolute; inset: 0px; border-radius: 24px; padding: 1px; background: linear-gradient(135deg, rgba(200, 162, 255, 0.3) 0%, rgba(225, 178, 198, 0.3) 100%); mask: linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px) content-box subtract, linear-gradient(rgb(255, 255, 255) 0px, rgb(255, 255, 255) 0px); pointer-events: none; }
.sound-popover-caret { position: absolute; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(200, 162, 255, 0.1); transform: rotate(45deg); right: -4px; top: 50%; margin-top: -4px; }
.sound-tabs { display: flex; background: rgba(255, 255, 255, 0.08); padding: 4px; border-radius: 999px; height: 36px; margin-bottom: 24px; position: relative; }
.tab-pill { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0px 16px; border-radius: 999px; cursor: pointer; font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.5); transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1); position: relative; border: none; background: transparent; }
.tab-pill:hover { color: rgba(255, 255, 255, 0.8); }
.tab-pill:focus-visible { outline: none; box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 0px 2px; }
.tab-pill.active { color: white; background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%); box-shadow: rgba(200, 162, 255, 0.3) 0px 2px 8px, rgba(225, 178, 198, 0.2) 0px 1px 3px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; }
.tab-pill.active .tab-icon { opacity: 1; }
.tab-icon { opacity: 0.8; transition: opacity 200ms; }
.sound-panel { display: none; }
.sound-panel.active { display: block; }
.volume-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.custom-slider { flex: 1 1 0%; position: relative; height: 24px; display: flex; align-items: center; cursor: pointer; user-select: none; }
.slider-track { position: absolute; left: 0px; right: 0px; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 1px; box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px inset, rgba(200, 162, 255, 0.1) 0px 0px 4px; }
.slider-fill { position: absolute; left: 0px; height: 2px; background: linear-gradient(90deg, var(--lavender) 0%, var(--rose) 100%); border-radius: 1px; box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 6px; transition: width 120ms; }
.slider-thumb { position: absolute; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%); box-shadow: rgba(200, 162, 255, 0.4) 0px 2px 8px, rgba(0, 0, 0, 0.2) 0px 1px 3px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; cursor: pointer; transform: translate(-50%, -50%); top: 50%; display: flex; align-items: center; justify-content: center; color: white; transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1); }
.slider-thumb:hover { transform: translate(-50%, -50%) scale(1.15); box-shadow: rgba(200, 162, 255, 0.5) 0px 4px 16px, rgba(0, 0, 0, 0.3) 0px 2px 6px, rgba(255, 255, 255, 0.4) 0px 1px 0px inset; }
.slider-thumb:active { transform: translate(-50%, -50%) scale(0.95); }
.slider-thumb:focus-visible { outline: none; box-shadow: rgba(200, 162, 255, 0.4) 0px 2px 8px, rgba(200, 162, 255, 0.6) 0px 0px 0px 2px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; }
.slider-thumb svg { animation: 3s ease-in-out 0s infinite normal none running gentle-star-twinkle; filter: drop-shadow(rgba(255, 255, 255, 0.5) 0px 0px 2px); }
@keyframes gentle-star-twinkle { 
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50% { opacity: 0.8; transform: scale(1.1) rotate(5deg); }
}
.volume-badge { min-width: 40px; height: 24px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; color: rgba(255, 255, 255, 0.9); font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; backdrop-filter: blur(8px); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.preset-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.preset-chip { height: 28px; padding: 0px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7); font-family: Inter, sans-serif; font-size: 12px; font-weight: 500; cursor: pointer; display: flex; align-items: center; transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1); user-select: none; }
.preset-chip:hover { color: white; background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.preset-chip:focus-visible { outline: none; box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 0px 2px; }
.preset-chip.active { color: white; background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%); border-color: transparent; box-shadow: rgba(200, 162, 255, 0.3) 0px 2px 8px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; }
.sound-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
@media (max-width: 768px) {
  .sound-list { grid-template-columns: 1fr; }
}
.sound-row { position: relative; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); cursor: pointer; transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1); display: flex; align-items: center; padding: 0px 12px; gap: 10px; overflow: hidden; }
.sound-row:hover { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.15); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.sound-row:hover .micro-play-btn { opacity: 1; transform: scale(1); }
.sound-row:focus-visible { outline: none; box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 0px 2px; }
.glow-ring { position: absolute; inset: -2px; border-radius: inherit; background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%); opacity: 0; z-index: -1; transition: opacity 200ms; }
.sound-row.selected .glow-ring { opacity: 0.4; }
.sound-row.selected { background: rgba(200, 162, 255, 0.08); border-color: rgba(200, 162, 255, 0.3); box-shadow: rgba(200, 162, 255, 0.2) 0px 0px 16px, rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.sound-glyph { font-size: 16px; flex-shrink: 0; opacity: 0.9; }
.sound-label { flex: 1 1 0%; color: rgba(255, 255, 255, 0.9); font-size: 14px; font-weight: 500; font-family: Inter, sans-serif; }
.micro-play-btn { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.6); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1); opacity: 0; transform: scale(0.9); backdrop-filter: blur(8px); }
.micro-play-btn:hover { background: rgba(225, 178, 198, 0.15); border-color: rgba(225, 178, 198, 0.3); color: white; transform: scale(1.05); box-shadow: rgba(225, 178, 198, 0.2) 0px 4px 12px; }
.sound-row.selected .micro-play-btn { opacity: 1; transform: scale(1); background: rgba(225, 178, 198, 0.2); border-color: rgba(225, 178, 198, 0.4); color: white; }
.play-icon, .stop-icon { transition: opacity 200ms; }
.sound-row:not(.playing) .stop-icon, .sound-row.playing .play-icon { display: none; }
.eq-shimmer { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: flex; align-items: end; gap: 2px; opacity: 0; transition: opacity 200ms; pointer-events: none; }
.sound-row.selected .eq-shimmer { opacity: 1; }
.eq-bar { width: 2px; background: linear-gradient(to top, var(--lavender), var(--rose)); border-radius: 1px; animation: 1.4s ease-in-out 0s infinite normal none running eq-shimmer-animation; box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 3px; }
.eq-bar:nth-child(1) { height: 6px; animation-delay: 0ms; }
.eq-bar:nth-child(2) { height: 10px; animation-delay: 200ms; }
.eq-bar:nth-child(3) { height: 4px; animation-delay: 400ms; }
@keyframes eq-shimmer-animation { 
  0%, 100% { transform: scaleY(1); opacity: 0.6; }
  50% { transform: scaleY(1.5); opacity: 1; }
}
.duck-section { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 16px; margin-top: 24px; }
.duck-switch { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.switch-track { width: 36px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); position: relative; transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1); }
.switch-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.9); transition: 200ms cubic-bezier(0.2, 0.6, 0.2, 1); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }
.duck-switch[data-enabled="true"] .switch-track { background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%); border-color: transparent; box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 8px; }
.duck-switch[data-enabled="true"] .switch-knob { transform: translateX(16px); background: white; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; }
.duck-switch:focus-visible { outline: none; }
.duck-switch:focus-visible .switch-track { box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 8px, rgba(200, 162, 255, 0.3) 0px 0px 0px 2px; }
.duck-label { color: rgba(255, 255, 255, 0.9); font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; }
.custom-slider:focus-visible { outline: none; }
.custom-slider:focus-visible .slider-track { box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 2px inset, rgba(200, 162, 255, 0.1) 0px 0px 4px, rgba(200, 162, 255, 0.3) 0px 0px 0px 2px; }
@media (prefers-reduced-motion: reduce) {
  .slider-thumb svg, .eq-bar { animation: auto ease 0s 1 normal none running none !important; }
  .sound-row:hover, .preset-chip:hover, .micro-play-btn:hover { transform: none !important; }
}
@media (max-width: 768px) {
  .preset-chips { gap: 6px; }
  .preset-chip { height: 26px; padding: 0px 10px; font-size: 11px; }
  .sound-row { height: 44px; }
}
.sound-option.active { background: rgba(255, 255, 255, 0.06); }
.option-toggle { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); position: relative; transition: all var(--transition-fast) ease; }
.option-toggle.active { border-color: var(--lavender); box-shadow: rgba(200, 162, 255, 0.3) 0px 0px 8px; }
.option-toggle.active::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--lavender); transform: translate(-50%, -50%); box-shadow: rgba(200, 162, 255, 0.5) 0px 0px 4px; }
.focus-mode { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); z-index: 500; opacity: 0; visibility: hidden; transition: all var(--transition-med) ease; pointer-events: none; }
.focus-mode.active { opacity: 1; visibility: visible; }
.focus-mode-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: var(--text); pointer-events: auto; }
.focus-mode h2 { font-family: "Playfair Display", serif; font-size: 2rem; font-weight: 400; margin-bottom: var(--space-16); opacity: 0.9; }
.focus-mode .chapter-info { font-size: 1.1rem; opacity: 0.7; margin-bottom: var(--space-24); }
.focus-mode .playback-progress { width: 300px; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 2px; margin: 0 auto var(--space-16); position: relative; overflow: hidden; }
.focus-mode .playback-fill { height: 100%; background: var(--lavender); border-radius: 2px; box-shadow: var(--g-glow-lav); transition: width 0.5s; }
.focus-mode .time-display { font-size: 0.9rem; opacity: 0.6; margin-bottom: var(--space-24); }
.focus-exit { position: absolute; top: var(--space-24); right: var(--space-24); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast) ease; color: var(--text); font-size: 18px; }
.focus-exit:hover { background: rgba(255, 255, 255, 0.2); transform: scale(1.1); }
body.focus-mode-active .whisper-input-container, body.focus-mode-active .sound-control, body.focus-mode-active .chapter-navigation { opacity: 0.3; pointer-events: none; transition: opacity var(--transition-med) ease; }
body.focus-mode-active .notepad-btn { opacity: 0.3; pointer-events: none; transition: opacity var(--transition-med) ease; }
body.focus-mode-active .sticky-player { opacity: 0.8; }
.floating-whispers-container { position: fixed; top: 0px; left: 0px; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; overflow: hidden; }
.floating-whisper { position: absolute; padding: 0px; font-size: 0.85rem; max-width: 180px; overflow-wrap: break-word; word-break: break-word; font-family: "Playfair Display", serif; font-weight: 300; line-height: 1.2; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; text-align: center; background: none; border: none; box-shadow: none; pointer-events: none; opacity: 0; }
.floating-whisper.moon { color: rgba(232, 180, 203, 0.9); text-shadow: rgba(232, 180, 203, 0.4) 0px 0px 6px, rgba(232, 180, 203, 0.2) 0px 0px 10px; }
.floating-whisper.star { color: rgba(255, 235, 100, 0.9); text-shadow: rgba(255, 235, 100, 0.3) 0px 0px 4px, rgba(255, 235, 100, 0.15) 0px 0px 8px; box-shadow: none !important; filter: none !important; background: none !important; backdrop-filter: none !important; }
.floating-whisper::before { content: ""; position: absolute; inset: -2px; background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%) 0% 0% / 200% 200%; animation: 3s ease-in-out 0s infinite normal none running shimmer; border-radius: var(--radius-8); pointer-events: none; opacity: 0; }
.floating-whisper.moon::before { background: linear-gradient(45deg, transparent 30%, rgba(232, 180, 203, 0.15) 50%, transparent 70%); }
.floating-whisper.star::before { background: linear-gradient(45deg, transparent 30%, rgba(255, 235, 100, 0.12) 50%, transparent 70%); }
.floating-whisper:hover::before, .floating-whisper.shimmer-active::before { opacity: 1; }
@keyframes shimmer { 
  0% { background-position: -200% -200%; }
  100% { background-position: 200% 200%; }
}
.whisper-input-container { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; background: transparent; backdrop-filter: none; border: none; border-radius: 40px; padding: 0.8rem 2rem; box-shadow: none; transition: 0.4s; width: auto; max-width: 600px; z-index: 100; }
.whisper-input-container:focus-within { background: transparent; backdrop-filter: blur(20px); box-shadow: rgba(255, 255, 255, 0.03) 0px 0px 30px; }
.user-toggle { background: none; border: none; font-size: 1rem; cursor: pointer; padding: 0.2rem; border-radius: 50%; opacity: 0.4; transition: 0.4s; position: relative; filter: blur(0.5px); }
.user-toggle:hover { opacity: 0.7; filter: blur(0px); text-shadow: rgba(255, 255, 255, 0.3) 0px 0px 8px; }
.user-toggle.star-mode { animation: 2s ease-in-out 0s infinite normal none running starPulse; }
.user-toggle:not(.star-mode) { animation: 2s ease-in-out 0s infinite normal none running moonPulse; }
.whisper-input { flex: 1 1 0%; background: transparent; border: none; outline: none; color: rgba(255, 255, 255, 0.7); font-family: Inter, sans-serif; font-size: 0.85rem; font-weight: 300; padding: 0.4rem 0px; text-rendering: optimizelegibility; -webkit-font-smoothing: antialiased; }
.whisper-input::placeholder { color: rgba(255, 255, 255, 0.2); font-style: italic; font-size: 0.75rem; font-weight: 200; letter-spacing: 0.5px; }
.send-btn, .auto-toggle { background: none; border: none; font-size: 0.9rem; cursor: pointer; padding: 0.2rem; border-radius: 50%; opacity: 0.3; transition: 0.4s; filter: blur(0.5px); }
.send-btn:hover, .auto-toggle:hover { opacity: 0.6; filter: blur(0px); text-shadow: rgba(255, 255, 255, 0.3) 0px 0px 8px; }
.auto-toggle { font-size: 0.8rem; margin-left: 0.5rem; }
.auto-toggle.disabled { opacity: 0.15; }
@keyframes whisperAppear { 
  0% { opacity: 0; transform: translateY(20px) scale(0.8); filter: brightness(0.5) blur(2px); }
  20% { opacity: 0.6; transform: translateY(0px) scale(1.05); filter: brightness(1.2) blur(0px); }
  40% { opacity: 0.9; transform: scale(1); filter: brightness(1) blur(0px); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0px); }
}
@keyframes whisperFloat { 
  0% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  25% { transform: translateX(var(--drift-x1)) translateY(var(--drift-y1)) rotate(var(--drift-rot1)); }
  50% { transform: translateX(var(--drift-x2)) translateY(var(--drift-y2)) rotate(var(--drift-rot2)); }
  75% { transform: translateX(var(--drift-x3)) translateY(var(--drift-y3)) rotate(var(--drift-rot3)); }
  100% { transform: translateX(var(--drift-x1)) translateY(var(--drift-y1)) rotate(var(--drift-rot1)); }
}
@keyframes whisperFadeOut { 
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  50% { opacity: 0.3; transform: scale(0.95); filter: brightness(1.3); }
  100% { opacity: 0; transform: scale(0.8); filter: brightness(0.5) blur(1px); }
}
@keyframes whisperSparkle { 
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.5) drop-shadow(currentcolor 0px 0px 15px); }
}
@keyframes magicalFadeOut { 
  0% { opacity: 1; transform: scale(1); filter: brightness(1); }
  25% { opacity: 0.8; transform: scale(1.1); filter: brightness(1.5) blur(0px); }
  50% { opacity: 0.6; transform: scale(1.2); filter: brightness(2) blur(1px); }
  75% { opacity: 0.3; transform: scale(1.3); filter: brightness(2.5) blur(2px); }
  100% { opacity: 0; transform: scale(1.5); filter: brightness(3) blur(4px); }
}
@keyframes messageDissolved { 
  0% { opacity: 1; transform: scale(1) translateY(0px); }
  50% { opacity: 0.3; transform: scale(0.8) translateY(-20px); }
  100% { opacity: 0; transform: scale(0.5) translateY(-40px); filter: blur(3px); }
}
@keyframes moonPulse { 
  0%, 100% { filter: drop-shadow(rgba(232, 180, 203, 0.5) 0px 0px 5px); }
  50% { filter: drop-shadow(rgba(232, 180, 203, 0.8) 0px 0px 15px); }
}
@keyframes starPulse { 
  0%, 100% { filter: drop-shadow(rgba(255, 215, 0, 0.5) 0px 0px 5px); }
  50% { filter: drop-shadow(rgba(255, 215, 0, 0.8) 0px 0px 15px); }
}
.sparkle-particle { position: absolute; width: 4px; height: 4px; background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%); border-radius: 50%; pointer-events: none; animation: 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards running sparkleFloat; }
@keyframes sparkleFloat { 
  0% { opacity: 1; transform: scale(1) translateY(0px) translateX(0px); }
  100% { opacity: 0; transform: scale(0.3) translateY(var(--spark-y)) translateX(var(--spark-x)); }
}
@media (max-width: 768px) {
  .floating-whisper { font-size: 0.7rem; max-width: 180px; }
  .whisper-input-container { bottom: 1rem; padding: 0.6rem 1.5rem; gap: 0.5rem; max-width: 90vw; }
  .whisper-input { font-size: 0.75rem; }
  .whisper-input::placeholder { font-size: 0.7rem; }
  .user-toggle, .send-btn, .auto-toggle { font-size: 0.8rem; opacity: 0.25; }
  .user-toggle:hover, .send-btn:hover, .auto-toggle:hover { opacity: 0.5; }
}
.gallery-popup { position: absolute; top: 80px; left: 0px; width: 320px; max-height: 400px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.15) 0px 25px 50px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; padding: 1.5rem; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.gallery-popup.show { opacity: 1; visibility: visible; transform: translateY(0px) scale(1); }
.gallery-carousel-container { position: relative; margin-bottom: 1rem; }
.sound-popover-portal { position: absolute; top: 0px; left: 0px; z-index: 2000; pointer-events: none; }
.sound-popover-portal .sound-popover { width: 380px; max-height: 85vh; background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%); backdrop-filter: blur(24px); border-width: 1px; border-style: solid; border-color: initial; border-image: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(232, 180, 203, 0.2) 50%, rgba(255, 255, 255, 0.1) 100%) 1 / 1 / 0 stretch; border-radius: 24px; box-shadow: rgba(0, 0, 0, 0.15) 0px 32px 64px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; padding: 2rem; opacity: 0; visibility: hidden; transform: translateY(20px) scale(0.95); transition: 400ms cubic-bezier(0.4, 0, 0.2, 1); pointer-events: auto; position: static; overflow-y: auto; }
.sound-popover-portal .sound-popover.show { opacity: 1; visibility: visible; transform: translateY(0px) scale(1); }
.sound-popover::before { content: ""; position: absolute; width: 16px; height: 16px; background: inherit; border: inherit; transform: rotate(45deg); z-index: -1; }
.sound-popover[data-caret="top"]::before { top: -8px; left: 50%; margin-left: -8px; border-bottom: none; border-right: none; }
.sound-popover[data-caret="bottom"]::before { bottom: -8px; left: 50%; margin-left: -8px; border-top: none; border-left: none; }
.sound-popover[data-caret="left"]::before { left: -8px; top: 50%; margin-top: -8px; border-top: none; border-right: none; }
.sound-popover[data-caret="right"]::before { right: -8px; top: 50%; margin-top: -8px; border-bottom: none; border-left: none; }
.carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); height: 100%; }
.carousel-item { min-width: 100%; height: 100%; position: relative; }
.carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery-popup .carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.2rem; color: white; backdrop-filter: blur(10px); transition: 0.3s; z-index: 10; }
.gallery-popup .carousel-nav:hover { background: rgba(255, 255, 255, 0.3); transform: translateY(-50%) scale(1.1); }
.gallery-popup .carousel-nav:disabled { opacity: 0.3; cursor: not-allowed; transform: translateY(-50%) scale(0.9); }
.gallery-popup .carousel-prev { left: 10px; }
.gallery-popup .carousel-next { right: 10px; }
.gallery-info { display: none; }
.image-caption p { font-family: Inter, sans-serif; font-size: 0.85rem; color: var(--text-secondary); margin: 0px; opacity: 0.9; line-height: 1.4; }
@media (max-width: 768px) {
  .gallery-camera-control { bottom: 20px; left: 20px; }
  .camera-btn { width: 50px; height: 50px; }
  .camera-icon { font-size: 1.3rem; }
  .gallery-popup { width: calc(-40px + 100vw); max-width: 350px; }
  .gallery-carousel { height: 200px; }
}
.envelope-btn { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid transparent; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(22px); color: var(--lavender); cursor: pointer; transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; justify-content: center; }
.envelope-btn:hover { transform: scale(1.04); background: rgba(255, 255, 255, 0.12); }
.envelope-btn:focus-visible { outline: none; box-shadow: rgba(200, 162, 255, 0.4) 0px 0px 0px 2px; }
.lavender-halo { position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(circle, rgba(200, 162, 255, 0.15) 0%, transparent 70%); animation: 4s ease-in-out 0s infinite alternate none running haloGlow; pointer-events: none; }
@keyframes haloGlow { 
  0% { opacity: 0.3; transform: scale(0.9); }
  100% { opacity: 0.6; transform: scale(1.1); }
}
.unread-badge { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, rgb(255, 215, 0) 0%, rgb(255, 237, 78) 100%); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: rgb(26, 26, 26); opacity: 0; transform: scale(0); transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); }
.unread-badge.visible { opacity: 1; transform: scale(1); }
.compose-drawer { position: fixed; bottom: 88px; left: 24px; width: 360px; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(22px); border-width: 1px; border-style: solid; border-color: initial; border-image: linear-gradient(135deg, rgba(200, 162, 255, 0.3) 0%, rgba(225, 178, 198, 0.2) 100%) 1 / 1 / 0 stretch; box-shadow: rgba(0, 0, 0, 0.2) 0px 16px 32px, rgba(200, 162, 255, 0.1) 0px 0px 24px; opacity: 0; visibility: hidden; transform: translateY(16px) scale(0.96); transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); z-index: 1600; }
.compose-drawer.open { opacity: 1; visibility: visible; transform: translateY(0px) scale(1); }
.compose-card { padding: 24px; }
.compose-card h3 { margin: 0px 0px 16px; font-size: 1.1rem; font-weight: 500; color: var(--lavender); text-align: center; }
.compose-content { margin-bottom: 16px; }
#letterTextarea { width: 100%; min-height: 80px; padding: 12px 16px; border: 1px solid rgba(200, 162, 255, 0.2); border-radius: 16px; background: rgba(255, 255, 255, 0.08); color: white; font-family: Inter, sans-serif; font-size: 0.9rem; line-height: 1.4; resize: none; outline: none; box-sizing: border-box; transition: 180ms; }
#letterTextarea:focus { border-color: var(--lavender); background: rgba(255, 255, 255, 0.12); box-shadow: rgba(200, 162, 255, 0.3) 0px 0px 0px 1px; }
#letterTextarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.char-counter { text-align: right; font-size: 0.75rem; color: rgba(255, 255, 255, 0.5); margin-top: 8px; }
.compose-actions { display: flex; gap: 8px; align-items: center; }
.emoji-btn { width: 32px; height: 32px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: var(--lavender); cursor: pointer; transition: 180ms; display: flex; align-items: center; justify-content: center; font-size: 0.9rem; }
.emoji-btn:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.05); }
.send-letter-btn { flex: 1 1 0%; height: 32px; border-radius: 16px; border: none; background: linear-gradient(135deg, var(--lavender) 0%, var(--rose) 100%); color: white; font-family: Inter, sans-serif; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: 180ms; }
.send-letter-btn:hover { transform: translateY(-1px); box-shadow: rgba(200, 162, 255, 0.3) 0px 4px 12px; }
.send-letter-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.user-toggle-btn { height: 32px; padding: 0px 12px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: var(--lavender); font-family: Inter, sans-serif; font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: 180ms; display: flex; align-items: center; gap: 4px; }
.user-toggle-btn:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.05); }
.user-toggle-btn.her-mode { background: rgba(255, 215, 0, 0.8); border-color: rgb(255, 215, 0); color: rgb(0, 0, 0); font-weight: 600; }
.floating-letters-layer { position: fixed; inset: 0px; pointer-events: none; z-index: 50; }
.letter-token { position: absolute; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; pointer-events: auto; transition: transform 180ms; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.letter-token:hover { transform: scale(1.1); }
.letter-token:focus-visible { outline: none; box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 0px 2px; }
.letter-token.from-you { background: rgba(200, 162, 255, 0.2); border: 1px solid rgba(200, 162, 255, 0.4); box-shadow: rgba(200, 162, 255, 0.3) 0px 0px 12px; color: var(--lavender); }
.letter-token.from-her { background: rgba(255, 215, 0, 0.2); border: 1px solid rgba(255, 215, 0, 0.4); box-shadow: rgba(255, 215, 0, 0.3) 0px 0px 12px; color: rgb(255, 215, 0); }
.letter-token.unread { animation: 3.5s ease-in-out 0s infinite normal none running gentleBob; }
.letter-token.unread.from-you { box-shadow: rgba(200, 162, 255, 0.5) 0px 0px 20px; }
.letter-token.unread.from-her { box-shadow: rgba(255, 215, 0, 0.5) 0px 0px 20px; }
@keyframes gentleBob { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
}
.letter-token.read { opacity: 0.8; }
.letter-token.read.from-you { box-shadow: rgba(200, 162, 255, 0.2) 0px 0px 8px; }
.letter-token.read.from-her { box-shadow: rgba(255, 215, 0, 0.2) 0px 0px 8px; }
.letter-modal { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 2000; opacity: 0; visibility: hidden; transition: 220ms; }
.letter-modal.open { opacity: 1; visibility: visible; }
.letter-card { width: 90vw; max-width: 360px; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 240, 252, 0.95) 100%); backdrop-filter: blur(22px); border: 1px solid rgba(200, 162, 255, 0.3); box-shadow: rgba(0, 0, 0, 0.3) 0px 24px 48px; transform: scale(0.9); transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); color: rgb(42, 42, 42); }
.letter-modal.open .letter-card { transform: scale(1); }
.bookmark-ribbon { position: absolute; top: -2px; right: 16px; width: 32px; height: 40px; background: linear-gradient(135deg, var(--rose) 0%, var(--lavender) 100%); border: none; cursor: pointer; border-radius: 0px 0px 4px 4px; display: flex; align-items: center; justify-content: center; color: white; transition: 200ms; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 8px; z-index: 10; }
.bookmark-ribbon:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px; }
.bookmark-ribbon.pinned { background: linear-gradient(135deg, var(--gold) 0%, #ffb347 100%); box-shadow: rgba(255, 230, 168, 0.6) 0px 0px 8px, rgba(0, 0, 0, 0.15) 0px 4px 8px; }
.bookmark-ribbon.pinned svg { fill: currentcolor; }
.bottom-controls { 
  display: flex; 
  align-items: flex-start; 
  gap: 20px; 
  margin: 24px 0px 0px 24px;
  background: transparent;
  position: relative;
  z-index: 100;
}
.mini-keepsake-shelf { position: relative; width: 240px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-16); box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px, rgba(0, 0, 0, 0.05) 0px 2px 8px; z-index: 1000; transform: translateX(-100%); opacity: 0; visibility: hidden; transition: all 300ms var(--e1); max-height: 120px; }
.mini-keepsake-shelf.visible { transform: translateX(0px); opacity: 1; visibility: visible; }
.shelf-header { padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: flex; align-items: center; justify-content: space-between; }
.shelf-title { display: flex; align-items: center; gap: 8px; color: var(--lavender); font-family: Inter, sans-serif; font-size: 0.9rem; font-weight: 500; }
.shelf-icon { color: var(--rose); }
.keepsakes-count { background: linear-gradient(135deg, var(--gold) 0%, #ffb347 100%); color: white; font-size: 0.75rem; font-weight: 600; padding: 2px 6px; border-radius: 10px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; box-shadow: rgba(255, 230, 168, 0.4) 0px 0px 8px; }
.shelf-expand-btn { width: 24px; height: 24px; border: none; background: rgba(255, 255, 255, 0.1); color: var(--muted); border-radius: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 180ms; }
.shelf-expand-btn:hover { background: rgba(255, 255, 255, 0.2); color: var(--lavender); transform: scale(1.05); }
.shelf-content { padding: 6px 12px 12px; }
.keepsake-thumbnails { display: flex; gap: 8px; flex-wrap: wrap; max-height: 120px; overflow-y: auto; }
.empty-shelf-message { color: rgba(255, 255, 255, 0.5); font-size: 0.8rem; font-style: italic; text-align: center; padding: 16px 8px; width: 100%; }
.keepsake-thumbnail { width: 64px; height: 48px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 6px; cursor: pointer; transition: 180ms; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.keepsake-thumbnail:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.keepsake-thumbnail .sender-dot { width: 12px; height: 12px; border-radius: 6px; background: var(--lavender); position: absolute; top: 4px; left: 4px; }
.keepsake-thumbnail.from-you .sender-dot { background: var(--gold); }
.keepsake-thumbnail .preview-text { font-size: 0.6rem; color: rgba(255, 255, 255, 0.7); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-top: 12px; }
.keepsake-thumbnail .timestamp { font-size: 0.55rem; color: rgba(255, 255, 255, 0.4); margin-top: auto; }
.more-keepsakes-indicator { width: 64px; height: 48px; background: linear-gradient(135deg, var(--gold) 0%, #ffb347 100%); border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.8rem; transition: 180ms; box-shadow: rgba(255, 230, 168, 0.4) 0px 0px 8px; }
.more-keepsakes-indicator:hover { transform: translateY(-2px) scale(1.05); box-shadow: rgba(255, 230, 168, 0.6) 0px 4px 12px; }
.floating-letters-system.has-keepsakes .mini-keepsake-shelf, .floating-letters-system.compose-open .mini-keepsake-shelf { transform: translateX(0px); opacity: 1; visibility: visible; }
@media (max-width: 768px) {
  .mini-keepsake-shelf { width: 240px; left: 72px; bottom: 16px; }
  .keepsake-thumbnail { width: 56px; height: 42px; }
}
.keepsakes-library-modal { position: fixed; inset: 0px; z-index: 2500; opacity: 0; visibility: hidden; transition: all 300ms var(--e1); }
.keepsakes-library-modal.open { opacity: 1; visibility: visible; }
.library-backdrop { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(12px); }
.library-container { position: absolute; inset: 0px; display: flex; flex-direction: column; max-width: 1200px; margin: 0px auto; padding: 40px; transform: scale(0.95); transition: all 300ms var(--e1); }
.keepsakes-library-modal.open .library-container { transform: scale(1); }
.library-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
.library-title-section h2 { color: var(--lavender); font-family: "Playfair Display", serif; font-size: 2.5rem; font-weight: 600; margin: 0px 0px 8px; text-shadow: rgba(200, 162, 255, 0.3) 0px 0px 20px; }
.library-subtitle { color: rgba(255, 255, 255, 0.7); font-family: Inter, sans-serif; font-size: 1rem; font-style: italic; }
.library-controls { display: flex; align-items: center; gap: 20px; }
.library-stats { color: var(--gold); font-family: Inter, sans-serif; font-weight: 500; background: linear-gradient(135deg, rgba(255, 230, 168, 0.1) 0%, rgba(255, 230, 168, 0.05) 100%); border: 1px solid rgba(255, 230, 168, 0.2); border-radius: 20px; padding: 8px 16px; font-size: 0.9rem; }
.library-close-btn { width: 44px; height: 44px; border: none; background: rgba(255, 255, 255, 0.1); border-radius: 22px; color: var(--muted); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 180ms; }
.library-close-btn:hover { background: rgba(255, 100, 100, 0.2); color: rgb(255, 100, 100); transform: scale(1.05); }
.library-content { flex: 1 1 0%; overflow: hidden; display: flex; flex-direction: column; }
.library-toolbar { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; }
.search-box { position: relative; flex: 1 1 0%; min-width: 280px; }
.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: rgba(255, 255, 255, 0.4); pointer-events: none; }
.search-box input { width: 100%; height: 44px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 22px; padding: 0px 20px 0px 44px; color: var(--text); font-family: Inter, sans-serif; font-size: 0.9rem; transition: 180ms; }
.search-box input:focus { outline: none; border-color: var(--lavender); background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%); box-shadow: rgba(200, 162, 255, 0.2) 0px 0px 0px 3px; }
.search-box input::placeholder { color: rgba(255, 255, 255, 0.4); }
.sort-controls { display: flex; align-items: center; gap: 12px; }
.sort-label { color: rgba(255, 255, 255, 0.7); font-family: Inter, sans-serif; font-size: 0.9rem; white-space: nowrap; }
.sort-select { background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; padding: 8px 12px; color: var(--text); font-family: Inter, sans-serif; font-size: 0.85rem; cursor: pointer; min-width: 140px; }
.sort-select:focus { outline: none; border-color: var(--lavender); }
.masonry-grid { flex: 1 1 0%; overflow-y: auto; padding: 8px; columns: 3; column-gap: 20px; column-fill: balance; }
@media (max-width: 1024px) {
  .masonry-grid { columns: 2; }
}
@media (max-width: 768px) {
  .masonry-grid { columns: 1; }
  .library-container { padding: 20px; }
  .library-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .library-title-section h2 { font-size: 2rem; }
  .library-toolbar { flex-direction: column; align-items: stretch; gap: 16px; }
  .search-box { min-width: unset; }
}
.library-keepsake-card { background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: var(--radius-16); padding: 20px; margin-bottom: 20px; break-inside: avoid; cursor: pointer; transition: 200ms; position: relative; }
.library-keepsake-card:hover { transform: translateY(-4px); background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%); box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 32px; }
.library-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.library-sender-info { display: flex; align-items: center; gap: 12px; }
.library-sender-avatar { width: 36px; height: 36px; border-radius: 18px; background: var(--lavender); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 1rem; }
.library-sender-avatar.from-you { background: var(--gold); }
.library-sender-details { display: flex; flex-direction: column; }
.library-sender-name { color: var(--text); font-family: Inter, sans-serif; font-weight: 500; font-size: 0.9rem; }
.library-timestamp { color: rgba(255, 255, 255, 0.5); font-family: Inter, sans-serif; font-size: 0.8rem; }
.library-unpin-btn { width: 32px; height: 32px; border: none; background: rgba(255, 100, 100, 0.1); border-radius: 16px; color: rgb(255, 100, 100); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 180ms; opacity: 0; }
.library-keepsake-card:hover .library-unpin-btn { opacity: 1; }
.library-unpin-btn:hover { background: rgba(255, 100, 100, 0.2); transform: scale(1.1); }
.library-letter-text { color: rgba(255, 255, 255, 0.85); font-family: Inter, sans-serif; line-height: 1.6; font-size: 0.95rem; margin: 0px; overflow-wrap: break-word; }
.empty-library-state { text-align: center; padding: 80px 40px; color: rgba(255, 255, 255, 0.6); }
.empty-library-icon { font-size: 4rem; margin-bottom: 24px; opacity: 0.7; }
.empty-library-state h3 { color: var(--lavender); font-family: Inter, sans-serif; font-size: 1.5rem; font-weight: 600; margin: 0px 0px 12px; }
.empty-library-state p { font-family: Inter, sans-serif; font-size: 1rem; line-height: 1.5; max-width: 400px; margin: 0px auto; }
.letter-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px 16px; border-bottom: 1px solid rgba(200, 162, 255, 0.2); }
.postmark { display: flex; align-items: center; gap: 12px; }
.sender-initial { width: 32px; height: 32px; border-radius: 50%; background: var(--lavender); color: white; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 0.9rem; }
.send-time { font-size: 0.8rem; color: rgba(42, 42, 42, 0.6); }
.close-btn { width: 28px; height: 28px; border-radius: 14px; border: none; background: rgba(42, 42, 42, 0.1); color: rgba(42, 42, 42, 0.6); cursor: pointer; transition: 180ms; display: flex; align-items: center; justify-content: center; }
.close-btn:hover { background: rgba(42, 42, 42, 0.2); color: rgba(42, 42, 42, 0.8); }
.letter-content { padding: 24px; }
.letter-text { font-family: "Dancing Script", cursive; font-size: 1.2rem; line-height: 1.6; margin: 0px; text-align: center; color: rgb(42, 42, 42); }
.letter-actions { display: flex; gap: 8px; padding: 16px 24px 24px; }
.delete-btn, .pin-btn { flex: 1 1 0%; height: 36px; border-radius: 18px; border: 1px solid rgba(200, 162, 255, 0.3); background: rgba(200, 162, 255, 0.1); color: var(--lavender); font-family: Inter, sans-serif; font-size: 0.85rem; cursor: pointer; transition: 180ms; display: flex; align-items: center; justify-content: center; gap: 6px; }
.delete-btn, .pin-btn { flex: 1 1 0%; height: 36px; border-radius: 18px; border: 1px solid rgba(200, 162, 255, 0.3); background: rgba(200, 162, 255, 0.1); color: var(--lavender); font-family: Inter, sans-serif; font-size: 0.85rem; cursor: pointer; transition: 180ms; display: flex; align-items: center; justify-content: center; gap: 6px; }
.delete-btn { background: rgba(255, 100, 100, 0.1); border-color: rgba(255, 100, 100, 0.3); color: rgb(255, 100, 100); }
.delete-btn:hover { background: rgba(255, 100, 100, 0.2); transform: translateY(-1px); }
.pin-btn:hover { background: rgba(200, 162, 255, 0.2); transform: translateY(-1px); }
@media (max-width: 768px) {
  .compose-drawer { width: 92vw; max-width: 360px; }
  .envelope-trigger { bottom: 16px; left: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .letter-token.unread { animation: auto ease 0s 1 normal none running none; }
  .lavender-halo { animation: auto ease 0s 1 normal none running none; }
  * { transition-duration: 0.1s !important; animation-duration: 0.1s !important; }
}
.image-message-popup { position: absolute; background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%); backdrop-filter: blur(15px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 15px; padding: 1.5rem; max-width: 350px; box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 40px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset; transform: scale(0.8) translateY(20px); opacity: 0; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; }
.image-message-popup.show { transform: scale(1) translateY(0px); opacity: 1; }
.image-message-popup.fade-out { transform: scale(0.8) translateY(-20px); opacity: 0; }
.image-content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.popup-image { width: 100%; max-width: 280px; height: auto; max-height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 25px; }
.image-text h3 { font-family: "Playfair Display", serif; font-size: 1.3rem; color: var(--text-color); margin: 0px 0px 0.5rem; font-weight: 600; }
.image-text p { font-family: Inter, sans-serif; font-size: 0.9rem; color: var(--text-secondary); margin: 0px; line-height: 1.4; opacity: 0.9; }
.image-message-popup:hover { transform: scale(1.02) translateY(-2px); box-shadow: rgba(0, 0, 0, 0.15) 0px 25px 50px, rgba(255, 255, 255, 0.3) 0px 1px 0px inset; }
.camera-sparkle { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, rgb(232, 180, 203) 0%, rgba(255, 223, 186, 0.8) 50%, transparent 100%); border-radius: 50%; pointer-events: none; z-index: 1000; animation: 1s ease-out 0s 1 normal forwards running cameraSparkle; }
@keyframes cameraSparkle { 
  0% { opacity: 1; transform: scale(0) rotate(0deg); }
  50% { opacity: 0.8; transform: scale(1.2) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(360deg) translateY(-30px); }
}
@media (max-width: 768px) {
  .floating-camera { width: 60px; height: 60px; }
  .camera-icon { font-size: 2rem; }
  .image-popup { max-width: 95vw; max-height: 95vh; margin: 1rem; }
  .image-popup-caption { padding: 1.5rem; }
  .image-popup-caption h3 { font-size: 1.3rem; }
  .image-popup-caption p { font-size: 0.9rem; }
}
.stars-container { position: fixed; inset: 0px; pointer-events: none; z-index: -1; opacity: 1; }
.star { position: absolute; background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.3) 70%, transparent 100%); border-radius: 50%; animation: 3s ease-in-out 0s infinite normal none running twinkle; box-shadow: rgba(255, 255, 255, 0.4) 0px 0px 6px; }
.star-far { background: radial-gradient(circle, rgba(186, 148, 224, 0.6) 0%, rgba(186, 148, 224, 0.2) 70%, transparent 100%); box-shadow: rgba(186, 148, 224, 0.3) 0px 0px 4px; animation: 4s ease-in-out 0s infinite normal none running gentleTwinkle; }
.star-mid { background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(232, 180, 203, 0.4) 70%, transparent 100%); box-shadow: rgba(232, 180, 203, 0.4) 0px 0px 6px; animation: 3s ease-in-out 0s infinite normal none running twinkle; }
.star-near { background: radial-gradient(circle, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.6) 70%, transparent 100%); box-shadow: rgba(255, 255, 255, 0.6) 0px 0px 8px, rgba(255, 255, 255, 0.3) 0px 0px 12px; animation: 2.5s ease-in-out 0s infinite normal none running brightTwinkle; }
.twinkle-bright { animation: 2s ease-in-out 0s infinite normal none running sparkle !important; box-shadow: rgba(255, 255, 255, 0.8) 0px 0px 12px, rgba(232, 180, 203, 0.4) 0px 0px 20px !important; }
.floating-elements { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 1; overflow: hidden; }
.floating-element { position: absolute; font-size: 1.5rem; cursor: pointer; pointer-events: auto; animation: floatAcross var(--duration) ease-in-out forwards; opacity: 0.7; transition: 0.3s; user-select: none; z-index: 10; }
.floating-element:hover { transform: scale(1.3); opacity: 1; text-shadow: rgba(232, 180, 203, 0.8) 0px 0px 15px; }
.floating-element.dandelion { filter: drop-shadow(rgba(255, 255, 255, 0.3) 0px 0px 8px); }
.floating-element.bubble { background: none; border: none; padding: 0px; backdrop-filter: none; }
.memory-tooltip { position: fixed; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(12px); border: 1px solid rgba(232, 180, 203, 0.3); border-radius: 12px; padding: 12px 16px; font-size: 0.9rem; font-weight: 500; color: var(--text-primary); box-shadow: rgba(232, 180, 203, 0.3) 0px 8px 32px; z-index: 1000; max-width: 280px; animation: 0.3s ease-out 0s 1 normal none running tooltipFadeIn; font-family: Inter, sans-serif; }
[data-theme="dark"] .memory-tooltip { background: rgba(37, 51, 84, 0.95); border: 1px solid rgba(139, 111, 158, 0.3); color: var(--text-primary); box-shadow: rgba(139, 111, 158, 0.4) 0px 8px 32px; }
.memory-tooltip.fade-out { animation: 0.3s ease-in 0s 1 normal forwards running tooltipFadeOut; }
.hero-player { position: relative; display: flex; justify-content: center; padding: var(--space-48) var(--space-24); margin-top: var(--space-32); }
.hero-player-content { display: flex; flex-direction: column; align-items: center; position: relative; max-width: 600px; width: 100%; }
.play-orb-container { position: relative; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-32); }
.progress-ring { position: absolute; top: 0px; left: 0px; transform: rotate(-90deg); z-index: 1; }
.progress-ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 1.5; }
.progress-ring-fill { fill: none; stroke: var(--lavender); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 351.86; stroke-dashoffset: 351.86; transition: stroke-dashoffset 0.3s; filter: drop-shadow(rgba(200, 162, 255, 0.3) 0px 0px 4px); will-change: stroke-dashoffset; }
.play-orb { position: relative; width: 96px; height: 96px; border-radius: 50%; border: none; transform-origin: center center; background: radial-gradient(circle at 30% 30%, var(--rose), var(--lavender)); color: var(--text); font-size: 2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all var(--transition-med) ease; box-shadow: rgba(200, 162, 255, 0.15) 0px 0px 16px, rgba(0, 0, 0, 0.1) 0px 4px 20px; }
.play-orb:hover { transform: scale(1.02); box-shadow: rgba(200, 162, 255, 0.2) 0px 0px 20px, rgba(0, 0, 0, 0.15) 0px 6px 24px; }
.play-orb.playing { animation: 3s ease-in-out 0s infinite normal none running gentle-pulse; }
@keyframes gentle-pulse { 
  0%, 100% { transform: scale(1); transform-origin: center center; }
  50% { transform: scale(1.01); transform-origin: center center; }
}
.play-icon { display: flex; align-items: center; justify-content: center; font-size: inherit; margin-left: 2px; }
.nav-chevron { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; color: var(--text); cursor: pointer; padding: var(--space-16); border-radius: var(--radius-16); opacity: 0.7; transition: all var(--transition-med) ease; z-index: 3; }
.nav-chevron:hover, .nav-chevron:focus-visible { opacity: 1; color: var(--lavender); text-shadow: var(--g-glow-lav); }
.prev-chevron { left: -60px; }
.next-chevron { right: -60px; }
.scrub-track-container { width: 64%; max-width: 400px; margin: 0 auto var(--space-24); }
.scrub-track { position: relative; height: 8px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; cursor: pointer; padding: 4px 0; touch-action: none; }
.scrub-progress { height: 100%; background: var(--lavender); border-radius: 4px; transition: width 0.1s; box-shadow: rgba(200, 162, 255, 0.3) 0px 0px 2px; }
.scrub-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: grab; opacity: 0; transition: opacity var(--transition-fast) ease; color: var(--gold); filter: drop-shadow(rgba(255, 230, 168, 0.4) 0px 0px 2px); touch-action: none; }
.scrub-track:hover .scrub-handle, .scrub-handle.dragging { opacity: 1; }
.scrub-handle:active { cursor: grabbing; }
.time-display-row { display: flex; justify-content: space-between; width: 64%; max-width: 400px; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; opacity: 0.9; }
.hero-player.playing .chapters-container h2, .hero-player.playing .chapters-container .subtitle { opacity: 0.85; transition: opacity var(--transition-med) ease; }
.mini-player { position: fixed; bottom: 0px; left: 0px; right: 0px; height: 60px; background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(20px); border-top: 1px solid rgba(255, 255, 255, 0.06); z-index: 1000; transform: translateY(100%); transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.mini-player.show { transform: translateY(0px); }
.mini-player-content { display: flex; align-items: center; height: 100%; max-width: 1200px; margin: 0px auto; padding: 0 var(--space-24); gap: var(--space-16); }
.mini-left { display: flex; align-items: center; gap: var(--space-12); flex: 1 1 0%; min-width: 0px; }
.mini-orb { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--rose), var(--lavender)); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--transition-fast) ease; flex-shrink: 0; box-shadow: rgba(200, 162, 255, 0.1) 0px 0px 8px; }
.mini-orb:hover { transform: scale(1.05); box-shadow: rgba(200, 162, 255, 0.15) 0px 0px 12px; }
.mini-play-icon { font-size: 0.9rem; color: var(--text); margin-left: 1px; }
.mini-track-info { flex: 1 1 0%; min-width: 0px; }
.mini-title { font-size: 0.85rem; color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: "Playfair Display", serif; }
.mini-progress { flex: 2 1 0%; height: 2px; background: rgba(255, 255, 255, 0.08); border-radius: 1px; cursor: pointer; overflow: hidden; }
.mini-progress-fill { height: 100%; background: var(--lavender); border-radius: 1px; transition: width 0.3s; box-shadow: rgba(200, 162, 255, 0.2) 0px 0px 2px; }
.mini-controls { display: flex; align-items: center; gap: var(--space-8); flex-shrink: 0; }
.mini-btn { background: none; border: none; color: var(--text); cursor: pointer; padding: var(--space-8); border-radius: var(--radius-8); opacity: 0.7; transition: all var(--transition-fast) ease; display: flex; align-items: center; justify-content: center; }
.mini-btn:hover, .mini-btn:focus-visible { opacity: 1; color: var(--lavender); text-shadow: var(--g-glow-lav); }
@media (max-width: 768px) {
  .hero-player { padding: var(--space-32) var(--space-16); }
  .nav-chevron { display: none; }
  .scrub-track-container, .time-display-row { width: 80%; }
  .play-orb { width: 80px; height: 80px; font-size: 1.8rem; }
  .progress-ring { width: 104px; height: 104px; }
  .mini-player-content { padding: 0 var(--space-16); }
  
  /* Better touch targets for iPad */
  .scrub-track { height: 12px; padding: 6px 0; }
  .scrub-handle { width: 32px; height: 32px; }
  .volume-slider { height: 12px; }
  .volume-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
  
  /* Touch-friendly slider controls */
  .custom-slider { 
    touch-action: none; 
    padding: 16px 0; /* Much larger touch area */
  }
  .slider-track { 
    min-height: 44px; 
    display: flex; 
    align-items: center;
    position: relative;
    padding: 16px 0;
  }
  .slider-thumb { 
    width: 44px; /* iOS recommended minimum */
    height: 44px; 
    border-radius: 50%;
    background: var(--accent-primary) !important;
    border: 3px solid white !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  }
  
  /* Make chapter scrub track much bigger for touch */
  .scrub-track-container { 
    padding: 20px 0; 
    margin: 20px auto; 
  }
  .scrub-track { 
    height: 20px !important; 
    padding: 8px 0 !important; 
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
  }
  .scrub-handle { 
    width: 44px !important; 
    height: 44px !important;
    background: white !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
    opacity: 1 !important; /* Always visible on mobile */
  }
  .scrub-progress {
    border-radius: 10px !important;
    height: 4px !important; /* Inner progress bar */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  
  /* Volume sliders bigger */
  .volume-slider { 
    height: 20px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border-radius: 10px !important;
  }
  .volume-slider::-webkit-slider-thumb { 
    width: 44px !important; 
    height: 44px !important;
    background: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  }
  
  /* Prevent page scroll when using sliders */
  .sound-popover { touch-action: pan-y; }
  .ambient-volume-control, .music-volume-control { 
    touch-action: pan-y;
    padding: 20px 16px; /* More space around sliders */
  }
}
@media (prefers-reduced-motion: reduce) {
  .play-orb.playing { animation: auto ease 0s 1 normal none running none; }
  .progress-ring-fill { transition: none; }
  .gentle-pulse { animation: auto ease 0s 1 normal none running none; }
}
.main-controls, .control-btn, .player-controls, .surprise-btn, .chapters-container .main-controls, .scrub-track-container { display: block !important; }
.main-controls { display: flex; align-items: center; justify-content: center; gap: var(--space-8); background: rgba(255, 255, 255, 0.02); border-radius: var(--radius-32); padding: var(--space-8); backdrop-filter: blur(8px); }
.control-btn { cursor: pointer; opacity: 0.7; background: none !important; border: none !important; font-size: 1.1rem !important; padding: var(--space-8) !important; border-radius: var(--radius-16) !important; transition: all 180ms var(--e1) !important; color: var(--rose) !important; text-shadow: var(--g-glow-rose) !important; display: flex !important; align-items: center !important; justify-content: center !important; width: var(--space-32) !important; height: var(--space-32) !important; box-shadow: none !important; backdrop-filter: none !important; }
.control-btn:hover { opacity: 1 !important; transform: scale(1.05) !important; filter: drop-shadow(0 0 2px var(--rose)) !important; }
.control-btn:focus-visible { opacity: 1 !important; outline: none !important; box-shadow: var(--g-glow-rose) !important; }
.control-btn.play-pause { font-size: 1.6rem !important; width: var(--space-48) !important; height: var(--space-48) !important; margin: 0 var(--space-8) !important; opacity: 0.9 !important; color: var(--rose) !important; background: rgba(225, 178, 198, 0.05) !important; border: 1px solid rgba(225, 178, 198, 0.2) !important; border-radius: 50% !important; }
.control-btn.play-pause:hover { transform: scale(1.05) !important; text-shadow: rgba(232, 180, 203, 0.6) 0px 0px 6px, rgba(232, 180, 203, 0.3) 0px 0px 12px !important; box-shadow: rgba(232, 180, 203, 0.15) 0px 0px 8px !important; }
.visualizer { display: none !important; }
.visualizer.show { opacity: 0.4; }
.ending-screen { position: fixed; inset: 0px; background: var(--gradient-primary); display: none; flex-direction: column; align-items: center; justify-content: center; z-index: 3000; text-align: center; padding: 2rem; animation: 1s ease-out 0s 1 normal none running fadeIn; }
.ending-screen.show { display: flex; }
.ending-content { max-width: 600px; opacity: 0; animation: 1.2s ease-out 0.5s 1 normal forwards running slideInFade; }
.ending-title { font-family: "Playfair Display", serif; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; color: var(--text-primary); margin-bottom: 2rem; line-height: 1.2; }
.ending-message { font-family: "Dancing Script", cursive; font-size: clamp(1.5rem, 4vw, 2.2rem); color: var(--text-secondary); margin-bottom: 2rem; line-height: 1.4; }
.ending-signature { font-family: "Playfair Display", serif; font-size: 1.3rem; color: var(--accent-primary); font-style: italic; margin-top: 3rem; }
.ending-hearts { font-size: 2rem; margin: 2rem 0px; animation: 3s ease-in-out 0s infinite normal none running gentlePulse; }
.restart-btn { background: var(--gradient-accent); color: white; border: none; padding: 1rem 2rem; border-radius: 16px; font-size: 1.1rem; font-weight: 500; cursor: pointer; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 6px 20px var(--shadow-medium); margin-top: 2rem; }
.restart-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 25px var(--shadow-heavy); }
.floating-moon-photo { position: absolute; z-index: 5; width: 80px; height: auto; cursor: pointer; transition: transform 0.3s; filter: drop-shadow(rgba(232, 180, 203, 0.3) 0px 4px 20px); will-change: transform; user-select: none; }
.moon-photo { width: 100%; height: auto; transition: 0.3s; pointer-events: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.floating-moon-photo:hover .moon-photo { transform: scale(1.05); filter: brightness(1.1); }
.floating-moon-photo.shake { animation: 0.6s ease-in-out 0s 1 normal none running gentleShake; }
@keyframes gentleShake { 
  0%, 100% { transform: translate(0px, 0px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-0.5deg); }
  20% { transform: translate(-2px, 0px) rotate(0.5deg); }
  30% { transform: translate(2px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(0.5deg); }
  50% { transform: translate(-1px, 2px) rotate(-0.5deg); }
  60% { transform: translate(-2px, 1px) rotate(0deg); }
  70% { transform: translate(2px, 1px) rotate(-0.5deg); }
  80% { transform: translate(-1px, -1px) rotate(0.5deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
}
.heart-particle { position: fixed; font-size: 24px; color: rgb(255, 71, 87); pointer-events: none; z-index: 100; animation: 1.2s ease-out 0s 1 normal forwards running heartBurst; }
@keyframes heartBurst { 
  0% { opacity: 1; transform: scale(0.3) rotate(0deg); }
  30% { opacity: 1; transform: scale(1.3) rotate(15deg); }
  60% { opacity: 0.8; transform: scale(1.1) rotate(-10deg); }
  100% { opacity: 0; transform: scale(0.6) rotate(0deg) translateY(-40px); }
}
.footer { position: fixed; bottom: 1rem; right: 1rem; background: transparent; color: rgba(255, 255, 255, 0.4); font-style: normal; font-size: 0.8rem; z-index: 10; }
.footer p { margin: 0px; }
@keyframes fadeInUp { 
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes fadeIn { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes slideInUp { 
  0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes smoothFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px) scale(1);
    filter: blur(0px);
  }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}
@keyframes glow-ring { 
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.1); }
}
@keyframes twinkle { 
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes float { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
@keyframes heartbeat { 
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.1); }
  28% { transform: scale(1); }
  42% { transform: scale(1.1); }
  70% { transform: scale(1); }
}
@keyframes heartGlow { 
  0%, 100% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 0.6; transform: scale(1.2); }
}
@keyframes slideInFade { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes gentlePulse { 
  0%, 100% { opacity: 0; transform: scale(0.9); }
  50% { opacity: 0.3; transform: scale(1.1); }
}
@keyframes heartPulse { 
  0%, 90%, 100% { transform: scale(1); filter: brightness(1); }
  94%, 96% { transform: scale(1.05); filter: brightness(1.1); }
}
@keyframes sparkleScroll { 
  0% { opacity: 0.3; transform: scale(1) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
  100% { opacity: 0.3; transform: scale(1) rotate(360deg); }
}
@keyframes gentleFloat { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}
@keyframes dreamyPulse { 
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
  50% { transform: translate(-50%, -50%) scale(1.02); filter: brightness(1.1); }
}
@keyframes dreamyGlow { 
  0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
  50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.1); }
}
@keyframes orbitProgress { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes gentleBounce { 
  0%, 20%, 50%, 80%, 100% { transform: translateY(0px); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}
@keyframes sparkle { 
  0%, 100% { opacity: 0; transform: scale(0.5); }
  20% { opacity: 1; transform: scale(1.2); }
  40% { opacity: 0.7; transform: scale(1); }
  60% { opacity: 1; transform: scale(1.1); }
  80% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes goldenSparkle { 
  0%, 100% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 0.8; transform: scale(1); }
}
@keyframes gentleTwinkle { 
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 0.7; transform: scale(1.1); }
}
@keyframes brightTwinkle { 
  0%, 100% { opacity: 0.8; transform: scale(0.9); filter: brightness(1); }
  50% { opacity: 1; transform: scale(1.2); filter: brightness(1.3); }
}
@keyframes floatAcross { 
  0% { opacity: 0; transform: translateX(0px) translateY(0px) scale(0.8) rotate(0deg); }
  10% { opacity: 0.7; transform: translateX(calc(var(--direction) * 100px)) translateY(-20px) scale(1) rotate(5deg); }
  90% { opacity: 0.7; transform: translateX(calc(var(--direction) * calc(100vw - 100px))) translateY(-40px) scale(1) rotate(-5deg); }
  100% { opacity: 0; transform: translateX(calc(var(--direction) * 100vw)) translateY(-60px) scale(0.8) rotate(0deg); }
}
@keyframes tooltipFadeIn { 
  0% { opacity: 0; transform: translateY(10px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
@keyframes tooltipFadeOut { 
  0% { opacity: 1; transform: translateY(0px) scale(1); }
  100% { opacity: 0; transform: translateY(-10px) scale(0.95); }
}
@keyframes memoryGlow { 
  0%, 100% { filter: brightness(1) drop-shadow(rgba(255, 255, 255, 0.3) 0px 0px 8px); }
  50% { filter: brightness(1.5) drop-shadow(rgba(232, 180, 203, 0.8) 0px 0px 20px); }
}
@keyframes heartbeat { 
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  7% { transform: translate(-50%, -50%) scale(1.05); }
  14% { transform: translate(-50%, -50%) scale(1); }
  21% { transform: translate(-50%, -50%) scale(1.08); }
  28% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes heartbeatFast { 
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  10% { transform: translate(-50%, -50%) scale(1.08); }
  20% { transform: translate(-50%, -50%) scale(1); }
  30% { transform: translate(-50%, -50%) scale(1.12); }
  40% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes magicalPulse { 
  0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1) hue-rotate(0deg); box-shadow: rgba(255, 182, 193, 0.3) 0px 20px 40px, rgba(186, 148, 224, 0.4) 0px 0px 30px, rgba(255, 160, 122, 0.2) 0px 0px 60px; }
  25% { transform: translate(-50%, -50%) scale(1.02); filter: brightness(1.1) hue-rotate(5deg); }
  50% { transform: translate(-50%, -50%) scale(1.05); filter: brightness(1.2) hue-rotate(10deg); box-shadow: rgba(255, 182, 193, 0.4) 0px 25px 50px, rgba(186, 148, 224, 0.5) 0px 0px 40px, rgba(255, 160, 122, 0.3) 0px 0px 80px; }
  75% { transform: translate(-50%, -50%) scale(1.02); filter: brightness(1.1) hue-rotate(5deg); }
}
@keyframes orbit-1 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes orbit-2 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes orbit-3 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes orbit-4 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes ambientGlow { 
  0%, 100% { transform: rotate(0deg) scale(1); opacity: 0.3; }
  25% { transform: rotate(90deg) scale(1.1); opacity: 0.6; }
  50% { transform: rotate(180deg) scale(1); opacity: 0.4; }
  75% { transform: rotate(270deg) scale(1.05); opacity: 0.7; }
}
@keyframes gentleGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@keyframes subtleGradientShift { 
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
@keyframes flowingGradient { 
  0%, 100% { background-position: 0% 50%; filter: hue-rotate(0deg); }
  33% { background-position: 50% 100%; filter: hue-rotate(5deg); }
  66% { background-position: 100% 0%; filter: hue-rotate(-5deg); }
}
@keyframes cloudBob { 
  0% { transform: translateY(0px); }
  15% { transform: translateY(-40px); }
  25% { transform: translateY(-100px); }
  40% { transform: translateY(-20px); }
  50% { transform: translateY(-120px); }
  65% { transform: translateY(20px); }
  75% { transform: translateY(-80px); }
  85% { transform: translateY(40px); }
  100% { transform: translateY(0px); }
}

@keyframes goodnightFloat {
  0%, 100% { transform: translateY(0px) scale(1); }
  25% { transform: translateY(-8px) scale(1.02); }
  50% { transform: translateY(5px) scale(1); }
  75% { transform: translateY(-3px) scale(0.98); }
}
.floating-cloud-drift { pointer-events: none; transition-timing-function: linear; overflow: hidden; }
.floating-cloud-drift img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; display: block !important; }
.floating-planet-drift { 
  pointer-events: none; 
  transition-timing-function: linear; 
  overflow: visible;
}
.floating-planet-drift img { 
  width: 100% !important; 
  height: 100% !important; 
  max-width: 100% !important; 
  max-height: 100% !important; 
  object-fit: contain !important; 
  display: block !important;
}
@keyframes popoverSlideIn { 
  0% { opacity: 0; transform: translateY(-20px) scale(0.9); }
  50% { opacity: 0.8; transform: translateY(-10px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
@media (max-width: 768px) {
  .hero-title { font-size: 2.2rem; }
  .chapter-navigation { flex-direction: column; align-items: center; text-align: center; }
  .carousel-container { flex-direction: column; gap: 1.5rem; }
  .carousel-nav { width: 50px; height: 50px; }
  .chapter-slide { padding: 2rem; }
  .main-play-btn { width: 70px; height: 70px; font-size: 1.5rem; }
  .audio-controls { right: 4rem; bottom: 20px; }
  .main-content { padding: 2rem 1rem 0 1rem; }
  .notepad-content { width: 95%; margin: 1rem; }
}
@media (max-width: 480px) {
  .hero { padding: 1rem; }
  .sticky-player { padding: 1rem; }
  .chapter-slide { padding: 1.5rem; }
  .modern-audio-player { padding: 2rem; }
}