/* bg.css: page background marks (from /experiments option 1 + option 2 static). One fixed, non-interactive layer; colours from tokens only. */
:root{--mx:-999px;--my:-999px}
.bgx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:strict}
.bgx>i{position:absolute;inset:0;display:block}
main,.site-footer{position:relative;z-index:1}
.site-header{z-index:50}
.bgx{--m-dots:radial-gradient(circle at 1px 1px,currentColor 1px,transparent 1.5px) 0 0/24px 24px;--m-plus:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cpath d='M45 48.5h6M48.5 45v6' stroke='black'/%3E%3C/svg%3E") 0 0/96px 96px}
[data-mode="light"] .bgx{--dot-a:7%;--dot-hi:color-mix(in srgb,color-mix(in srgb,var(--ink) 80%,var(--lime)) 18%,transparent)}
[data-mode="dark"] .bgx{--dot-a:6%;--dot-hi:color-mix(in srgb,color-mix(in srgb,var(--ink) 70%,var(--lime)) 18%,transparent)}
/* 1. dot grid + pointer lens (Home, Work, Playground) */
.o1-grid,.o1-lens{-webkit-mask:var(--m-dots);mask:var(--m-dots)}
.o1-grid{background:color-mix(in srgb,var(--ink) var(--dot-a),transparent)}
.o1-lens{background:radial-gradient(90px circle at var(--mx) var(--my),var(--dot-hi) 40%,transparent 100%)}
/* 2. static plus marks (Notes, Design) */
.o2s{-webkit-mask:var(--m-plus);mask:var(--m-plus);background:color-mix(in srgb,var(--ink) 8%,transparent)}
/* touch and reduced motion: static grid, no lens */
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.o1-lens{display:none}}
@media (forced-colors:active){.bgx{display:none}}
@media print{.bgx{display:none}}