/* Shared CSS artwork for the page and Settings swatches. No image requests. */
:root[data-background="original"], [data-background-preview="original"] {
  --scene-image:none;
  --scene-size:auto;
}
:root[data-background="aurora"], [data-background-preview="aurora"] {
  --scene-image:radial-gradient(ellipse at 12% 12%,var(--scene-blue),transparent 55%),radial-gradient(ellipse at 92% 35%,var(--scene-purple),transparent 60%),radial-gradient(ellipse at 45% 100%,var(--scene-mint),transparent 55%);
  --scene-size:100% 100%;
}
:root[data-background="retro"], [data-background-preview="retro"] {
  --scene-image:repeating-radial-gradient(ellipse at 85% 8%,transparent 0 32px,var(--scene-line) 33px 34px,transparent 35px 58px),radial-gradient(ellipse at 85% 8%,var(--scene-warm),transparent 65%),linear-gradient(145deg,transparent 35%,var(--scene-purple));
  --scene-size:auto,100% 100%,100% 100%;
}
:root[data-background="grid"], [data-background-preview="grid"] {
  --scene-image:linear-gradient(var(--scene-line) 1px,transparent 1px),linear-gradient(90deg,var(--scene-line) 1px,transparent 1px),radial-gradient(ellipse at 80% 5%,var(--scene-blue),transparent 65%);
  --scene-size:48px 48px,48px 48px,100% 100%;
}
:root[data-background="chill"], [data-background-preview="chill"] {
  --scene-image:radial-gradient(ellipse at 0 70%,var(--scene-mint),transparent 65%),radial-gradient(ellipse at 90% 20%,var(--scene-blue),transparent 70%);
  --scene-size:100% 100%;
}
:root[data-background="dots"], [data-background-preview="dots"] {
  --scene-image:radial-gradient(circle,var(--scene-line) 1px,transparent 1.5px),radial-gradient(ellipse at 50% 0,var(--scene-purple),transparent 70%);
  --scene-size:18px 18px,100% 100%;
}
body { isolation:isolate; }
body::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:var(--scene-image,none);
  background-size:var(--scene-size,auto);
}
.background-swatch {
  display:block;
  height:64px;
  width:100%;
  border:1px solid var(--border);
  border-radius:var(--radius-small);
  background-color:var(--bg);
  background-image:var(--scene-image,none);
  background-size:var(--scene-size,auto);
}
.background-field { border:0; padding:0; margin:0; min-width:0; }
.background-field legend { font-size:.8rem; font-weight:650; margin-bottom:var(--space-3); }
.background-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2); }
.background-choice { display:grid; gap:var(--space-2); padding:var(--space-2); border:1px solid var(--border); border-radius:var(--radius-small); background:var(--card); text-align:left; font-size:.75rem; }
.background-choice:hover { border-color:var(--card-hover-border); }
.background-choice[aria-pressed="true"] { border-color:var(--accent); background:var(--nav-active); }
.settings-help { font-size:.7rem; line-height:1.6; color:var(--muted); }
.background-field > .settings-help { margin-top:var(--space-2); }