:root{
  --site-bg:#050a10;
  --site-bg-rgb:5,10,16;
  --site-bg2:#08121c;
  --site-panel:#0d1822;
  --site-panel2:#132330;
  --site-line:rgba(130,214,236,.24);
  --site-line-soft:rgba(229,248,251,.08);
  --site-accent:#82d6ec;
  --site-accent-rgb:130,214,236;
  --site-accent2:#e5f8fb;
  --site-accent-deep:#2d7896;
  --site-ink:#edf8fb;
  --site-ink2:#b5cad2;
  --site-ink3:#718d99;
  --site-button-ink:#04131a;
  --site-success:#6fd0a2;
  --site-danger:#e86672;
  --site-hero-image:url('./images/mirage/mirage-frozen-complex.webp');
  --site-logo-image:url('./images/mirage/logo.webp');
  --site-shadow:0 28px 100px rgba(0,4,9,.58);
}

html{background:var(--site-bg)}
body.site-public{
  position:relative;
  isolation:isolate;
  background:
    radial-gradient(900px 540px at 72% -8%,rgba(var(--site-accent-rgb),.19),transparent 66%),
    linear-gradient(180deg,rgba(var(--site-bg-rgb),.72),rgba(var(--site-bg-rgb),.97)),
    var(--site-hero-image) center 22%/cover fixed,
    var(--site-bg);
  color:var(--site-ink);
}
body.site-public::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(rgba(229,248,251,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(229,248,251,.018) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 82%);
}

::selection{background:rgba(var(--site-accent-rgb),.42);color:var(--site-ink)}