body { font-family: 'Inter', sans-serif; transition: background-color 0.4s ease; }
    .book-content { font-family: 'Crimson Pro', serif; }

    .glass-nav {
      backdrop-filter: blur(20px) saturate(160%);
      -webkit-backdrop-filter: blur(20px) saturate(160%);
      @apply bg-[#fdfdfc]/70 border-b border-slate-200/50;
    }
    .dark .glass-nav { @apply bg-slate-950/70 border-slate-800/50; }

    .control-btn {
      @apply flex items-center justify-center p-3 rounded-xl
             transition-all hover:bg-black/5 active:scale-95 text-slate-500;
    }
    .dark .control-btn { @apply hover:bg-white/5 text-slate-400; }

    #floatingAudio { transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.3s ease; }
    .fab-hidden { transform: translateY(100px); opacity: 0; pointer-events: none; }

    .cover-wrap { position: relative; overflow: hidden; border-radius: 0.75rem; }
    .cover-overlay {
      position: absolute; inset: 0;
      pointer-events: none;
      background:
        radial-gradient(60% 60% at 50% 15%, rgba(255,255,255,.55), transparent 60%),
        linear-gradient(to top, rgba(0,0,0,.55), transparent 55%);
      opacity: .9;
    }
    .dark .cover-overlay {
      background:
        radial-gradient(60% 60% at 50% 15%, rgba(255,255,255,.18), transparent 60%),
        linear-gradient(to top, rgba(0,0,0,.65), transparent 55%);
      opacity: 1;
    }

    .badge {
      pointer-events: auto;
      position: relative;
      overflow: hidden;
      backdrop-filter: blur(14px) saturate(160%);
      -webkit-backdrop-filter: blur(14px) saturate(160%);
      transform: translateZ(0);
      transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
    }
    .badge::before {
      content: "";
      position: absolute;
      inset: -40% -60%;
      background: linear-gradient(115deg,
        rgba(255,255,255,0) 20%,
        rgba(255,255,255,.22) 45%,
        rgba(255,255,255,0) 70%);
      transform: translateX(-40%) rotate(12deg);
      opacity: .85;
      pointer-events: none;
      transition: transform .45s ease, opacity .25s ease;
    }
    .badge:hover { transform: translateY(-2px) scale(1.01); }
    .badge:hover::before { transform: translateX(35%) rotate(12deg); opacity: 1; }
    .badge:active { transform: translateY(0) scale(.98); }

    .badge-shadow { box-shadow: 0 18px 50px rgba(0,0,0,.25); }

    @media (hover: none) {
      .badge:hover { transform: none; }
      .badge:hover::before { transform: translateX(-40%) rotate(12deg); opacity: .85; }
    }

    /* Resume modal */
    .resume-hidden { display: none; }
    .resume-card {
      backdrop-filter: blur(22px) saturate(160%);
      -webkit-backdrop-filter: blur(22px) saturate(160%);
      box-shadow: 0 25px 70px rgba(0,0,0,.35);
    }
    .resume-bar {
      height: 8px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255,255,255,.16);
      border: 1px solid rgba(255,255,255,.18);
    }
    .resume-bar > div {
      height: 100%;
      width: 0%;
      background: rgba(255,255,255,.65);
    }
    .dark .resume-bar { background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.10); }
    .dark .resume-bar > div { background: rgba(255,255,255,.65); }
    
/* Subtle but visible halo pulse */
.narrator-btn { position: relative; } /* just in case */

.narrator-sonar{
  position:absolute;
  left:50%;
  top:50%;
  width: 56px;        /* bigger than chip */
  height: 56px;
  transform: translate(-50%,-50%) scale(.92);
  border-radius: 999px;
  pointer-events:none;
  z-index: 0;

  /* soft halo */
  background: radial-gradient(circle,
    rgba(99,102,241,.14) 0%,
    rgba(99,102,241,.08) 35%,
    rgba(99,102,241,.04) 55%,
    rgba(99,102,241,0) 70%
  );

  /* crisp ring + blur = premium glow */
  box-shadow:
    0 0 0 1px rgba(99,102,241,.18),
    0 0 18px rgba(99,102,241,.18);

  filter: blur(2px);
  opacity: .70;
  animation: narratorHalo 3.4s ease-in-out infinite;
}

.dark .narrator-sonar{
  background: radial-gradient(circle,
    rgba(165,180,252,.16) 0%,
    rgba(165,180,252,.09) 35%,
    rgba(165,180,252,.05) 55%,
    rgba(165,180,252,0) 70%
  );
  box-shadow:
    0 0 0 1px rgba(165,180,252,.20),
    0 0 18px rgba(165,180,252,.18);
  opacity: .75;
}

.narrator-btn .narrator-chip { position: relative; z-index: 1; }

@keyframes narratorHalo {
  0%   { transform: translate(-50%,-50%) scale(.92); opacity: .55; }
  50%  { transform: translate(-50%,-50%) scale(1.04); opacity: .80; }
  100% { transform: translate(-50%,-50%) scale(.92); opacity: .55; }
}