/* Gray theme (2026-09-28): the dark look on a charcoal-gray page with a blue grid, so the near-black
   modules stand out. One of three themes picked by site/www/theme.js: light (default, v2-light.css),
   gray (this file), dark (v2.css alone). */

html.gray{--grid:rgba(125,149,255,.22);--spot:rgba(77,108,255,.085);--bg:#23272e;--bg2:#282c34;--line:#343a46;--line2:#434a58;--muted:#b3bac7;--dim:#848c9b}
html.gray .foot{background:#1b1e24}
html.gray .nav.solid{background:rgba(27,30,36,.86)}
html.gray .frame>.in,html.gray .cell,html.gray .qa,html.gray .care,html.gray .layer,html.gray .next-offer,html.gray .switch,html.gray .after{--panel:#12151b}
html.gray .demo .in,html.gray .report .in{background:#0e1116}
html.gray :is(.frame,.tech-tree,.pair,.qa,.lifetime){filter:drop-shadow(0 16px 28px rgba(0,0,0,.35))}

/* a blue grid across the whole backdrop: fixed, so it reads as the page surface, not a pattern that scrolls */
html.gray body{background-color:var(--bg);background-image:linear-gradient(rgba(96,124,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(96,124,255,.055) 1px,transparent 1px);background-size:56px 56px;background-attachment:fixed}
html.gray .hero-grid{background-image:linear-gradient(rgba(125,149,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(125,149,255,.16) 1px,transparent 1px)}
html.gray .boot-grid{background-image:linear-gradient(rgba(125,149,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(125,149,255,.14) 1px,transparent 1px)}
html.gray .pairs-head{background:linear-gradient(rgba(35,39,46,.94) 70%,transparent)}
@media (max-width:860px){html.gray body{background-attachment:scroll}}