/* Background of the pages before sign-in: soft light, a faint grid and a quiet network of small legal-work icons. Light, Dark and Auto. */
.lxbg { --lx-ln:#0e6f78; --lx-gd:#b86a0f; --lx-co:.24; --lx-g1:rgba(46,230,192,.20); --lx-g2:rgba(255,179,61,.20); --lx-grid:rgba(13,22,32,.05);
        position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
        background: radial-gradient(700px 420px at 6% 8%, var(--lx-g1), transparent 70%), radial-gradient(760px 460px at 96% 96%, var(--lx-g2), transparent 70%); }
html[data-theme="dark"] .lxbg { background:radial-gradient(900px 520px at 0% 0%, rgba(14,143,134,.34), transparent 70%), radial-gradient(900px 600px at 100% 100%, rgba(200,50,30,.2), transparent 70%); --lx-ln:#2ee6c0; --lx-gd:#ffb33d; --lx-g1:rgba(46,230,192,.14); --lx-g2:rgba(255,179,61,.12); --lx-grid:rgba(255,255,255,.04); }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .lxbg { background:radial-gradient(900px 520px at 0% 0%, rgba(14,143,134,.34), transparent 70%), radial-gradient(900px 600px at 100% 100%, rgba(200,50,30,.2), transparent 70%); --lx-ln:#2ee6c0; --lx-gd:#ffb33d; --lx-g1:rgba(46,230,192,.14); --lx-g2:rgba(255,179,61,.12); --lx-grid:rgba(255,255,255,.04); } }
.lxbg::before { content:""; position:absolute; inset:0; background-image:linear-gradient(var(--lx-grid) 1px, transparent 1px), linear-gradient(90deg, var(--lx-grid) 1px, transparent 1px); background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%); mask-image:radial-gradient(ellipse 75% 70% at 50% 45%, #000 35%, transparent 100%); }
.lxbg-art { position:absolute; inset:0; width:100%; height:100%; opacity:var(--lx-co); }
.lxbg-art .t, .lxbg-art .hub, .lxbg-art .cab path, .lxbg-art .cab2 path { stroke:var(--lx-ln); }
.lxbg-art .g { stroke:var(--lx-gd); }
.lxbg-art .t, .lxbg-art .g, .lxbg-art .hub circle { fill:none; stroke-width:.9; stroke-linecap:round; stroke-linejoin:round; }
.lxbg-art .hub circle { stroke-width:1.2; }
.lxbg-art .cab path { fill:none; stroke-width:1.1; opacity:.7; }
.lxbg-art .cab2 path { fill:none; stroke-width:.8; opacity:.5; }
.lxbg-art .nod circle { fill:var(--lx-ln); opacity:.6; }
.lxbg-art .lab text { fill:var(--lx-ln); font:700 11px Inter, system-ui, sans-serif; letter-spacing:.14em; }
/* only the icons drift, slowly; the lines stay still */
.lxbg-art .fl { animation:lxbg-float 10s ease-in-out infinite alternate; }
@keyframes lxbg-float { from { transform:translate(0,0); } to { transform:translate(var(--dx), var(--dy)); } }
.lxbg-still .fl { animation:none; }
@media (prefers-reduced-motion: reduce) { .lxbg-art .fl { animation:none; } }
.lxbg-tag { text-align:center; margin:14px 0 0; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#b86a0f; }
html[data-theme="dark"] .lxbg-tag { color:#ffb33d; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"] .lxbg-tag { color:#ffb33d; } }
@media print { .lxbg { display:none; } }

/* In Dark the page paints its own opaque background over a layer behind it, so on these pages the page background is handed to this layer (same colours). */
html[data-theme="dark"]:has(.lxbg) body { background:transparent !important; background-image:none !important; }
@media (prefers-color-scheme: dark) { html[data-theme="auto"]:has(.lxbg) body { background:transparent !important; background-image:none !important; } }