body { background-color: #f5f5f7; color: #1d1d1f; }
* { box-sizing: border-box; }
.chart-container { position: relative; width: 100%; max-width: 850px; margin: 0 auto; height: 380px; }
.fade-in { animation: fadeIn 0.7s ease-out forwards; opacity: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.custom-scrollbar::-webkit-scrollbar { width: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: #d6d3d1; border-radius: 10px; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
section[id] { scroll-margin-top: 7rem; }

/* Soft atmospheric wash so frosted panels have something to blur */
.brief-atmosphere {
  position: relative;
  isolation: isolate;
}
.brief-atmosphere::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 45% at 12% 8%, rgba(35, 63, 105, 0.09), transparent 55%),
    radial-gradient(ellipse 55% 40% at 88% 22%, rgba(26, 79, 140, 0.07), transparent 50%),
    radial-gradient(ellipse 50% 35% at 70% 78%, rgba(106, 154, 125, 0.06), transparent 55%),
    radial-gradient(ellipse 40% 30% at 20% 85%, rgba(138, 90, 68, 0.04), transparent 50%),
    #f5f5f7;
}

/* Frosted paper — light glass for cards / chrome */
.glass-panel {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow:
    0 1px 2px rgba(29, 29, 31, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-panel {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* Nested stage panels — slightly more translucent */
.glass-inset {
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(210, 210, 215, 0.55);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Dark frosted callouts on ink */
.glass-dark {
  background: rgba(29, 29, 31, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow:
    0 8px 28px rgba(29, 29, 31, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-dark {
    background: rgba(29, 29, 31, 0.94);
  }
}