.resource-cache {
  flex: 0 0 100%; width: 100%; max-width: 680px; min-width: 0;
  padding-top: 16px; color: #a5bad6; font: 12px/1.8 system-ui, sans-serif;
}
main > .resource-cache { margin: 24px auto 64px; width: calc(100% - 40px); }
.cache-button {
  display: inline-flex; align-items: center; max-width: 100%; min-height: 38px;
  padding: 7px 14px; border: 1px solid #7695bc66; border-radius: 20px;
  color: #c9dcf4; background: #08132d88; cursor: pointer; font: inherit;
  font-variant-numeric: tabular-nums;
}
.cache-button:hover:not(:disabled) { border-color: #a3d1ff; background: #17315c88; }
.cache-button:focus-visible { outline: 2px solid #a3d1ff; outline-offset: 4px; }
.cache-button:disabled { cursor: default; opacity: 1; }
.is-complete .cache-button { color: #a4e9d2; border-color: #72d9b455; }
.cache-meter { display: block; margin-top: 12px; height: 2px; max-width: 280px; background: #7190b533; border-radius: 2px; overflow: hidden; }
.cache-meter i { display: block; width: var(--cached, 0%); height: 100%; background: #8bc3ff; transition: width .35s ease; }
.cache-note { margin: 7px 0 0; font: inherit; color: inherit; }
.sound-toggle.is-buffering .eq { animation: cache-pulse .8s ease-in-out infinite alternate; }
@keyframes cache-pulse { to { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .cache-meter i { transition: none; } .sound-toggle.is-buffering .eq { animation: none; } }