/* akciali shell — single source of the site shell: tokens, halo background,
   top nav and the fixed footer. Linked FIRST by every page; page CSS layers on
   top. This is what makes the top bar and footer identical and consistent
   across the home, demos, about, legal, benchmarks and the Hugo articles. */
:root{
  --bg:#070b14; --ink:#eef1f8; --dim:#9aa4b8; --line:#232c3e;
  --cyan:#4fa1bd; --orange:#f59b3d; --purple:#a98bea;
  --fd:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --fb:'Inter',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --nav-h:62px; --foot-h:52px;
}
*{box-sizing:border-box}
html{color-scheme:only dark}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 var(--fb);
  -webkit-font-smoothing:antialiased;min-height:100dvh;
  padding-top:var(--nav-h);padding-bottom:var(--foot-h)}
a{color:inherit;text-decoration:none}

/* Fixed colour halos — the home background, reused on every page. */
.halo{position:fixed;border-radius:50%;filter:blur(75px);pointer-events:none;z-index:0}
.ha{width:46vmin;height:46vmin;right:22vw;top:14vh;background:rgba(53,198,230,.16)}
.hb{width:36vmin;height:36vmin;right:8vw;top:42vh;background:rgba(245,155,61,.14)}
.hc{width:46vmin;height:46vmin;right:26vw;top:56vh;background:rgba(169,139,234,.15)}

/* Top bar — floating links, fixed to the top, transparent (no bar). */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;
  padding:20px clamp(24px,4.5vw,64px) 8px;background:transparent;pointer-events:none}
.nav__links{pointer-events:auto}
.nav__links{margin-left:auto;display:flex;gap:28px;align-items:center;
  font-size:14.5px;color:var(--dim);flex-wrap:wrap}
.nav__links a{color:var(--dim);transition:color .15s;text-decoration:none}
.nav__links a:hover,.nav__links a[aria-current]{color:var(--ink);text-decoration:none}

/* Footer — floating, fixed to the bottom, transparent (no bar, no separator). */
.foot{position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  min-height:var(--foot-h);padding:10px clamp(24px,4.5vw,64px) 20px;
  font-size:13px;color:var(--dim);background:transparent;pointer-events:none}
.foot .mentions,.foot .footright{pointer-events:auto}
.foot a{color:var(--dim);text-decoration:none}
.foot a:hover{color:var(--ink);text-decoration:none}
.foot .mentions{white-space:nowrap}
.foot .sep{color:var(--line);margin:0 4px}
.social{display:flex;gap:18px;align-items:center}
.social a{color:var(--dim);display:inline-flex;transition:color .15s,transform .15s}
.social a:hover{color:var(--ink);transform:translateY(-1px)}
.social svg{width:19px;height:19px;display:block;fill:currentColor}
.footright{display:flex;align-items:center;gap:22px}

/* Content sits above the halos. */
main{position:relative;z-index:2}