/* Quiet page texture with a pointer-lit patch on fine-pointer devices. */
body { background-image:none;isolation:isolate; }
.mf-page-background {
  --dot-x:50%;--dot-y:50%;--dot-active:0;--dot-gap:18px;--dot-size:1.05px;
  --dot-base:var(--af-dot-base,#d2dae43d);--dot-glow:var(--af-dot-glow,#d2dae475);
  --page-glow:var(--af-glow,#d2dae429);--page-start:var(--af-gradient-start,#050505);
  --page-end:var(--af-gradient-end,#141414);--page-soft:var(--af-bg-soft,#0a0a0a);
  position:fixed;inset:0;z-index:-1;width:100vw;height:100vh;pointer-events:none;
  background-color:var(--bg,#050505);
  background-image:radial-gradient(circle at center,var(--dot-base) var(--dot-size),transparent calc(var(--dot-size) + .05px)),radial-gradient(ellipse 95% 60% at 50% -12%,var(--page-glow),transparent 64%),linear-gradient(165deg,var(--page-start) 0%,var(--page-soft) 46%,var(--page-end) 100%);
  background-size:var(--dot-gap) var(--dot-gap),auto,auto;
  background-position:50%,50%,50%;transition:background-color .2s;
}
.mf-page-background[hidden] { display:none; }
html[data-theme=midnight] .mf-page-background {
  --dot-base:var(--af-dot-base,#82a5d247);--dot-glow:var(--af-dot-glow,#82afe67a);
  --page-glow:var(--af-glow,#4678be47);--page-start:var(--af-gradient-start,#07111f);
  --page-end:var(--af-gradient-end,#142848);--page-soft:var(--af-bg-soft,#0c182c);
}
html[data-theme=pure-black] .mf-page-background {
  --dot-base:var(--af-dot-base,#b4b4b41f);--dot-glow:var(--af-dot-glow,#dcdcdc38);
  --page-glow:var(--af-glow,#ffffff0a);--page-start:var(--af-gradient-start,#000);
  --page-end:var(--af-gradient-end,#0c0c0c);--page-soft:var(--af-bg-soft,#050505);
}
@media(hover:hover) and (pointer:fine) {
  .mf-page-background:after {
    content:'';position:absolute;inset:0;pointer-events:none;opacity:var(--dot-active);
    background-image:radial-gradient(circle at center,var(--dot-glow) var(--dot-size),transparent calc(var(--dot-size) + .05px));
    background-size:var(--dot-gap) var(--dot-gap);background-position:50%;
    mask-image:radial-gradient(circle 300px at var(--dot-x) var(--dot-y),#000 0%,#00000080 52%,transparent 72%);
    -webkit-mask-image:radial-gradient(circle 300px at var(--dot-x) var(--dot-y),#000 0%,#00000080 52%,transparent 72%);
    transition:opacity .45s;
  }
}
body:has(dialog[open]) .mf-page-background:after { opacity:0; }
@media(min-width:768px) { .mf-page-background { --dot-gap:20px; } }
@media(min-width:1024px) { .mf-page-background { --dot-gap:22px; } }
@media(prefers-reduced-motion:reduce) {
  :where(html:not([data-motion=full])) .mf-page-background:after { display:none;content:none; }
}
:where(html[data-motion=reduced]) .mf-page-background:after { display:none;content:none; }
@media(hover:none),(pointer:coarse) {
  .mf-page-background:after { display:none;content:none; }
}