/* Safari tints its toolbars and the overscroll area with the page colour, not with this fixed layer,
   so the page colour matches the bottom of the gradient instead of near-black. */
html[data-theme="portfolio"] body { isolation: isolate; background-color: color-mix(in srgb, var(--chosen-accent, #2f6bff) 55%, #08090e); }

/* Large-viewport height: on iOS the toolbars collapse while scrolling and a 100%-tall fixed layer
   would leave the dark body showing underneath. */
.portfolio-background {
  position: fixed;
  inset: 0 0 auto;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle, #ffffff1c .65px, transparent 1.1px) 0 0 / 3.5px 3.5px,
    radial-gradient(ellipse at 85% 90%, var(--chosen-accent, #2f6bff), transparent 85%),
    linear-gradient(150deg, #08090e, color-mix(in srgb, var(--chosen-accent, #2f6bff) 60%, #08090e));
}

.portfolio-background canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media print { .portfolio-background { display: none; } }